DhtmlxTreeGrid中文幫助文檔

1、一 簡單treegrid的實(shí)現(xiàn)1.導(dǎo)入關(guān)鍵文件<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"); /列類型（要顯示為樹行結(jié)構(gòu)第一列必值須為tree，ed為可編輯，txt為文本框）mygrid.setcolty

4、pes("tree,ed,txt,ch,ch");mygrid.init(); mygrid.loadxml("test_list_1.xml");</script> 3.基本xml結(jié)構(gòu)（基本機(jī)構(gòu)就是使用row的嵌套達(dá)到樹形效果）<?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>二 關(guān)鍵詞定位功能實(shí)現(xiàn)說明（紅色部分為關(guān)鍵代碼）引入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>執(zhí)行初始化方法如下：<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/");/設(shè)置表頭mygrid.setheader("search, text filter, select filter");/設(shè)置檢索類型(有文本框查找，文本框過濾，下拉列表過濾)mygrid.attachheader("#text_search,#text_filter,#select_filter");/設(shè)置單元格的大小mygrid.setinitwidths("200,100,*");/數(shù)據(jù)的對齊方式mygri

10、d.setcolalign("left,right,right");/設(shè)置每列的數(shù)據(jù)類型mygrid.setcoltypes("tree,price,ed");/排序方式(有字符排序,數(shù)字排序,date排序等)mygrid.setcolsorting("str,int,int");/初始化mygrid.init();/ loadxml()方法在xml或action中得到xml類型的數(shù)據(jù)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>三 簡單算數(shù)運(yùn)算實(shí)現(xiàn)（求和）導(dǎo)入關(guān)鍵文件：<script src="<%=url%>grid/codebase/ext/dhtmlxgrid_math.js"></script>

13、初始化：/對相應(yīng)列求和（列中必須位數(shù)字，可以有小數(shù)點(diǎn)）mygrid.setcoltypes("tree,price,ed,price=sum,ed=sum");/精確到小數(shù)位數(shù)mygrid.setmathround(2);四 綁定事件（動(dòng)態(tài)添加刪除等）引入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>執(zhí)行初始化方法如下：<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事件來實(shí)現(xiàn)的。其主要功能代碼如下：/添加行<a href="#" onclick="mygrid.addrow(new date().valueof(),

18、9;new row','text','text',1,0,0)">add new row</a>/根據(jù)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>/添加一個(gè)條目<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>/根據(jù)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>/展開所有節(jié)點(diǎn)<div><a href="#" onclick="mygrid.expandall()">expand all</a></div>/收縮所有節(jié)點(diǎn)<div><a href="#" onclick="mygrid.collapseall()">collapse all</a></div>/生成xml代碼：<table width=&quo