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=”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.運行效果：

DHTMLX 表格組件(dhtmlxGrid )使用介紹

免責聲明！