DhtmlxTreeGrid中文帮助文档

1、一 简单treegrid的实现1.导入关键文件<link rel="stylesheet" type="text/css" href="./././dhtmlxgrid/codebase/dhtmlxgrid.css"><script src=“././dhtmlxgrid/codebase/dhtmlxcommon.js"></script><script src="././dhtmlxgrid/codebase/dhtmlxgrid.js"></s

2、cript><script src="././dhtmlxgrid/codebase/dhtmlxgridcell.js"></script><script src="././dhtmlxtreegrid/codebase/dhtmlxtreegrid.js"></script>2.初始化<div id="gridbox" width="100%" height="250px" style="overflow:hidden&q

3、uot;></div><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.setcolty

4、pes("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</cel

5、l><cell>.</cell><cell>.</cell> <row id=“c1”><cell image="folder.gif">honda</cell><cell>.</cell><cell>.</cell><row></row></rows>二 关键词定位功能实现说明（红色部分为关键代码）引入js文件，如下：<link rel="stylesheet" type=&

6、quot;text/css" href="./././dhtmlxgrid/codebase/dhtmlxgrid.css"><script src="././ dhtmlxgrid/codebase/dhtmlxcommon.js"></script><script src="././dhtmlxgrid/codebase/dhtmlxgrid.js"></script><script src="././dhtmlxgrid/codebase/dhtml

7、xgridcell.js"></script><script src="./dhtmlxtreegrid/codebase/dhtmlxtreegrid.js"></script><script src="././dhtmlxgrid/codebase/ext/dhtmlxgrid_filter.js"></script><script src="././dhtmlxtreegrid/codebase/ext/dhtmlxtreegrid_filter.js&qu

8、ot;></script>执行初始化方法如下：<div id="gridbox" width="100%" height="250px" style="background-color:white; overflow:hidden"></div><script>/将treegrid放入id为gridbox的div中mygrid=newdhtmlxgridobject('gridbox');/引入图片mygrid.setimagepath(&quo

9、t;././ext/dhtmlx/dhtmlxgrid/codebase/imgs/icons_books/");/设置表头mygrid.setheader("search, text filter, select filter");/设置检索类型(有文本框查找，文本框过滤，下拉列表过滤)mygrid.attachheader("#text_search,#text_filter,#select_filter");/设置单元格的大小mygrid.setinitwidths("200,100,*");/数据的对齐方式mygri

10、d.setcolalign("left,right,right");/设置每列的数据类型mygrid.setcoltypes("tree,price,ed");/排序方式(有字符排序,数字排序,date排序等)mygrid.setcolsorting("str,int,int");/初始化mygrid.init();/ loadxml()方法在xml或action中得到xml类型的数据mygrid.loadxml("treegrid_sample.xml");</script>样式下图所示：xml文档的

11、格式如下:<?xml version="1.0" encoding="utf-8"?><rows><row id="bmw"><cell image="folder.gif">.</cell><row id="bmw1"><cell image="folder.gif"></cell><row id="bmw11"><cell image=&q

12、uot;leaf.gif">.</cell><cell>.</cell></row></row><row><cell image="folder.gif">cell></row></row></rows>三 简单算数运算实现（求和）导入关键文件：<script src="<%=url%>grid/codebase/ext/dhtmlxgrid_math.js"></script>

13、初始化：/对相应列求和（列中必须位数字，可以有小数点）mygrid.setcoltypes("tree,price,ed,price=sum,ed=sum");/精确到小数位数mygrid.setmathround(2);四 绑定事件（动态添加删除等）引入js和css文件，如下：<link href="././ext/dhtmlxtreegrid/common/style.css" type="text/css" rel="stylesheet"/><link href="././ext

14、/dhtmlx/dhtmlxgrid/codebase/dhtmlxgrid.css" type="text/css" rel="stylesheet"/><script src="././ext/dhtmlx/dhtmlxgrid/codebase/dhtmlxcommon.js"></script><script src="././ext/dhtmlx/dhtmlxgrid/codebase/dhtmlxgrid.js"></script><

15、script src="././ext/dhtmlx/dhtmlxgrid/codebase/dhtmlxgridcell.js"></script><script src="././ext/dhtmlx/dhtmlxtreegrid/codebase/dhtmlxtreegrid.js"></script><script src="././ext/dhtmlx/dhtmlxtreegrid/codebase/ext/dhtmlxtreegrid_lines.js"></sc

16、ript>执行初始化方法如下：<div id="gridbox" width="100%" height="250px" style="background-color:white;overflow:hidden"></div><script> mygrid = new dhtmlxgridobject('gridbox'); mygrid.selmultirows = true; mygrid.imgurl = "././ext/dhtmlx/d

17、htmlxgrid/codebase/imgs/icons_books/" mygrid.enabletreegridlines(); mygrid.init(); mygrid.loadxml("treegrid.xml");</script>增加行，删除行的操作是通过<a href=” onclick=”></a>中的onclick事件来实现的。其主要功能代码如下：/添加行<a href="#" onclick="mygrid.addrow(new date().valueof(),

18、9;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

19、child of node at position</a><input>/添加一个条目<ahref="#"onclick="varz=mygrid.getselectedid();if(z) mygrid.addrow(newdate().valueof(),'new row','text','text',1,1,0,z)"> add new row as a child of selectt</a>/根据id删除行<a href="#&quo

20、t; onclick="var z=mygrid.getrowid(this.nextsibling.value);if (z) mygrid.deleterow(z)">delete row position</a><input>/删除行<a href="#" onclick="mygrid.deleteselecteditem()">delete a row</a>/返回所选行<a href="#" onclick="alert(mygrid

21、.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>/生成xml代码：<table width=&quo