在网页上用表格显示数据是很常见的事情,html标记语言中的table标签能实现,但其功能很简单,只能单纯的显示数据和定义简单的样式,不支持查询,不支持排序,不支持自动增减列等等,这些功能都没有,如果是自己写的话又特别麻烦。但是有了DHX后就不要操心了,DHTMLX 表格组件(dhtmlxGrid )会帮你完成这一切的一切,你只需要提供数据给DHX,然后调用set方法设置即可。而且还是跨浏览器的。
1.使用myeclipse建立web project
2.加入DHX 支持(js、css、img)
3.提供数据源(此例使用XML 格式,在下载包中含有。附件中有下载)
4.在jsp页面中嵌入DHX代码 实现其功能
<body> <div id=”gridbox” style=”width:900px;height:150px;”></div> <br /> <script> mygrid = new dhtmlXGridObject(‘gridbox’); //图片路径 mygrid.setImagePath(“<%=path%>/img/”); //表头设置用逗号分割每列(#master_checkbox 表示表头为checkbox,并支持全选) mygrid.setHeader(“#master_checkbox,Sales,Book Title,Author,Price,In Store,Shipping,Bestseller,Date of Publication”); //列宽 mygrid.setInitWidths(“45,57,150,120,80,80,80,80,200″); //列位置 mygrid.setColAlign(“center,right,left,left,right,center,left,center,center”); //列类型 mygrid.setColTypes(“ch,dyn,ed,txt,price,ch,coro,ra,ro”); //列排序方式 mygrid.setColSorting(“na,int,str,str,int,str,str,str,date”); //皮肤 mygrid.setSkin(“dhx_skyblue”); mygrid.init(); //数据列拖拽 mygrid.enableColumnMove(true); //表头列显示/隐藏 mygrid.enableHeaderMenu(); //加载数据 mygrid.loadXML(“<%=path%>/common/grid.xml”); </script> </body>
5.运行效果:
转载于:https://www.cnblogs.com/mjbrian/p/7522448.html
相关资源:dhtmlxSuite含(dhtmlxTreeGrid)专业版本.zip