Dhtmlx TreeGrid中文帮助文档

简单TreeGrid的实现

1、导入关键文件

1 2 3 4 5 6

<link rel="STYLESHEET" type="text/css"     href="../dhtmlxGrid/codebase/dhtmlxgrid.css"/> <script src="../dhtmlxGrid/codebase/dhtmlxcommon.js"/> <script src="../dhtmlxGrid/codebase/dhtmlxgrid.js"/> <script src="../dhtmlxGrid/codebase/dhtmlxgridcell.js"/> <script src="../dhtmlxTreeGrid/codebase/dhtmlxtreegrid.js"/>

2、初始化

1 2 3 4 5 6 7 8 9 10 11

<div id="gridbox" width="100%" height="250px" style="overflow:hidden"/> <script>     mygrid = new dhtmlXGridObject('gridbox');  //xml文件中图片的路径     mygrid.setImagePath("<%=url%>Grid/codebase/imgs/icons_books/";     mygrid.setHeader("Tree,Plain Text,Long Text,Color,Checkbox");  //列类型（要显示为树行结构第一列必值须为tree，ed为可编辑，txt为文本框…）     mygrid.setColTypes("tree,ed,txt,ch,ch");     mygrid.init();      mygrid.loadXML("test_list_1.xml"); </script>

3、基本XML结构(基本机构就是使用row的嵌套达到树形效果)

1 2 3 4 5 6 7 8 9 10 11 12 13

<?xml version="1.0" encoding="UTF-8"?> <rows>     <row id="h1">         <cell image="folder.gif">Honda</cell>         <cell>...</cell>         <cell>...</cell>          <row id=“c1”>             <cell image="folder.gif">Honda</cell>             <cell>...</cell>             <cell>...</cell>         <row>     </row> </rows>

关键词定位功能实现

具体的实现方法可以参考博文：Dhtmlx TreeGrid关键词定位功能实现

简单算数运算实现(求和)

1、导入关键文件：

1	<script  src="<%=url%>Grid/codebase/ext/dhtmlxgrid_math.js"/>

2、初始化
//对相应列求和（列中必须位数字，可以有小数点）
mygrid.setColTypes(“tree,price,ed,price[=sum],ed[=sum]“);
//精确到小数位数
mygrid.setMathRound(2);

绑定事件(动态添加删除等)

1、引入JS和CSS文件

1 2 3 4 5 6 7 8 9

<link href="../dhtmlxTreeGrid/common/style.css"     type="text/css" rel="STYLESHEET"/> <link href="../dhtmlxGrid/codebase/dhtmlxgrid.css"     type="text/css" rel="STYLESHEET"/> <script src="../dhtmlxGrid/codebase/dhtmlxcommon.js"/> <script src="../dhtmlxGrid/codebase/dhtmlxgrid.js"/> <script src="../dhtmlxGrid/codebase/dhtmlxgridcell.js"/> <script src="../dhtmlxTreeGrid/codebase/dhtmlxtreegrid.js"/> <script src="../dhtmlxTreeGrid/codebase/ext/dhtmlxtreegrid_lines.js"/>

2、执行初始化方法

1 2 3 4 5 6 7 8 9 10

<div id="gridbox" width="100%" height="250px"     style="background-color:white;overflow:hidden"/> <script>      mygrid = new dhtmlXGridObject('gridbox');      mygrid.selMultiRows = true;      mygrid.imgURL = "../dhtmlx/dhtmlxGrid/codebase/imgs/icons_books/";      mygrid.enableTreeGridLines();      mygrid.init();      mygrid.loadXML("treegrid.xml"); </script>

增加行，删除行的操作是通过a标记中的onclick事件来实现的
3、其主要功能代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

//添加行 <a href="#" onclick="mygrid.addRow((new Date()).valueOf(), ['new row','text','text',1,0],0)">add new row</a>; //根据id添加条目 <a href="#" onclick="var z=mygrid.getRowId(this.nextSibling.value);      if (z)          mygrid.addRow((new Date()).valueOf(),                 ['new row','text','text',1,1],0,z)">     add new row at child of node at position </a><input>; //添加一个条目 <a   href="#" onclick="     var z=mygrid.getSelectedId();        if(z) mygrid.addRow((new Date()).valueOf(),             ['new row','text','text',1,1],0,z)">     add new row as a child of select </a> //根据id删除行 <a href="#" onclick="var z=mygrid.getRowId(this.nextSibling.value);     if (z) mygrid.deleteRow(z)">delete row position </a> //删除行 <a href="#" onclick="mygrid.deleteSelectedItem()">delete a row</a> //返回所选行 <a href="#" onclick="alert(mygrid.getRowIndex(mygrid.getSelectedId()))">     Index of selected </a> //展开所有节点 <div>     <a href="#" onclick="mygrid.expandAll()">Expand all</a> </div> //收缩所有节点 <div>     <a href="#" onclick="mygrid.collapseAll()">Collapse all</a> </div>

4、生成xml代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<table width="835">     <tr>         <td width="600px">             <div id="gridbox" width="100%" height="250px"                 style="background-color:white;"></div>         </td>         <td valign="top">             <textarea style='width:300px; height:230px;'></textarea>             <div>             <a href="#"                 onclick="this.parentNode.previousSibling.                     value=mygrid.serialize();return false;">                 Serialize TreeGrid             </a>             </div>         </td>     </tr>     <tr>         <td>&nbsp;</td>     </tr> </table>

5、样式下图所示：

除非注明，文章为IT热血青年原创，欢迎转载！转载请注明本文地址，谢谢。
本文地址：http://blog.itblood.com/dhtmlx-treegrid-chinese-api.html