dhtmlxgrid控件使用

導入js類和css文件

<!-- grid's css&js code! --> <link rel="stylesheet" type="text/css" href="/resources/controls/dhtmlx/grid/dhtmlxgrid.css"> <link rel="stylesheet" type="text/css" href="/resources/controls/dhtmlx/grid/skins/dhtmlxgrid_dhx_skyblue.css">

<script src="/resources/controls/dhtmlx/grid/dhtmlxcommon.js"></script> <script src="/resources/controls/dhtmlx/grid/dhtmlxgrid.js"></script> <script src="/resources/controls/dhtmlx/grid/dhtmlxgridcell.js"></script> <script src="/resources/controls/dhtmlx/grid/ext/dhtmlxgrid_pgn.js"></script> <script src="/resources/controls/dhtmlx/dataProcessor/dhtmlxdataprocessor.js"></script>

 

用於顯示信息的表格

<table width="100%"> <tr colspan="2">    <td id="recfound" style="color:red;"></td> </tr> <tr>    <td colspan="2">    <div id="gridbox" style="width:100%;height:250;background-color:white;"></div>    </td> </tr> <tr>    <td id="pagingArea"></td><td id="recinfoArea" align="right"></td> </tr> </table>

 

js調用類庫並在表格顯示數據

mygrid = new dhtmlXGridObject('gridbox'); mygrid.setImagePath("/resources/controls/dhtmlx/grid/imgs/"); mygrid.setHeader("報廢申請號,報廢類型,報廢申請人,報告申請日期,庫位,成本中心,物料號,物料描述,舊物料號,規格,物料組,報廢數量,單價,報廢金額,單位,報廢原因,物料入廠時間,SAP憑證號碼,SAP記賬時間,備注"); mygrid.setInitWidths("100,90,90,100,100,100,100,90,60,80,90,90,50,100,90,100,100,100,100,100"); mygrid.setColAlign("center,center,center,center,center,center,center,center,center,center,center,center,center,center,center,center,center,center,center,center"); mygrid.setColTypes("ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro"); //mygrid.setColSorting("str,str,str,str,str,str,str,int,int"); mygrid.setSkin("dhx_skyblue") mygrid.setPagingWTMode(false,false,false,false,false,false,false,false,false,false); mygrid.init(); mygrid.attachEvent("onXLE",strShowLoading); mygrid.attachEvent("onXLS",endShowLoading); mygrid.enablePaging(true, 50, 10, "pagingArea", true, "recinfoArea");

//導出數據

mygrid.loadXML(*.xml);

 

在未導出數據時，如圖：