Dhtmlx TreeGrid中文帮助文档

简单TreeGrid的实现

1、导入关键文件

<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、初始化

<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的嵌套达到树形效果)

<?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、导入关键文件：

<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文件

<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、执行初始化方法

<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、其主要功能代码如下：

//添加行
<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代码

<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