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);