dhtmlxgrid使用基础

目录

1. 包含的javascript文件

2. 初始化grid

3. 数据来源于外部XML文件

4. 数据来源于本页XML数据岛

---

dhtmlxgrid用于显示表格，相关官方资料可参阅http://www.dhtmlx.com/

1. 包含的javascript文件（回目录）

1 < script type = " text/javascript " src = " jquery.js " >< / script>
2 < link rel = " STYLESHEET " type = " text/css " href = " dhtmlxgrid.css " >
3 < script type = " text/javascript " src = " dhtmlxcommon.js " >< / script>
4 < script type = " text/javascript " src = " dhtmlxgrid.js " >< / script>
5 < script type = " text/javascript " src = " dhtmlxgridcell.js " >< / script>

初始化grid代码（回目录）

1 mygrid = new dhtmlXGridObject( ' dataTable ' );
2 mygrid.setImagePath( " /imgs/ " );
3 mygrid.setHeader( " 第1列标题,第2列标题 " );　　// 列标题用逗号隔开
4 mygrid.setInitWidths( " 100,* " );　　　　　　 // 各列宽度数字表示像素，弹性用*表示
5 mygrid.setColAlign( " center,left " );
6 mygrid.setSkin( " light " );
7 mygrid.enableAutoHeight( true );
8 mygrid.init();

 其中，在页面上先放一个表格容器：

< DIV id ="dataTable" ></ DIV >

数据来源于外部XML文件（回目录）

初始化grid后，就可以从外部XML文件装入数据并在表格上显示：

mygrid.loadXML( " data.xml " );

数据来源于本页XML数据岛（回目录）

如果数据来自于本页中的XML数据岛，形如：

1 < xml id =dataXML>
2 <rows >
3 < row id =1>
4 <cell > cell11 </ cell >
5 < cell > cell12 </ cell >
6 </ row >
7 < row id =2>
8 <cell > cell21 </ cell >
9 < cell > cell22 </ cell >
10 </ row >
11 </ rows >
12 </ xml >

则装入数据的javascript代码将是

mygrid.parse($( " #dataXML " )[ 0 ]);

转载于:https://www.cnblogs.com/jyginger/archive/2010/12/09/1900858.html