DHTMLX 表格组件(dhtmlxGrid )使用介绍

<table width="100%"

在网页上用表格显示数据是很常见的事情，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=”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.运行效果：