下载文档原格式
文章主题：three.js八叉树（Octree）案例解析与实践1. 介绍three.js是一款流行的JavaScript 3D图形库，它提供了丰富的API和功能，使得在Web上创建交互式的3D场景变得更加容易。
而八叉树（Octree）是一种用于优化3D空间中对象查询的树状数据结构，通过将空间划分成八个子空间来减少查询的复杂度。
在本文中，我们将探讨three.js中八叉树的应用案例，并深入分析其实现和性能优化。
2. three.js八叉树的基本原理三维空间可以划分为八个相等大小的立方体空间，每个立方体对应一个八叉树节点。
当对象被添加到场景中时，八叉树会根据对象的位置和大小将其插入到对应的节点中。
这样一来，查询时可以根据当前位置和尺寸快速定位到对应的节点，从而减少不必要的遍历和计算，提高查询效率。
3. three.js八叉树的应用案例在实际项目中，八叉树常常用于管理场景中的大量对象，比如碰撞检测、可见性判断和光照计算等。
以碰撞检测为例，通过构建八叉树可以将碰撞检测的复杂度从O(n^2)降低到O(logn)，极大地提高了性能和效率。
八叉树还可以用于提高渲染效率，比如在渲染大规模场景时只计算可见的部分，减少不必要的渲染开销。
4. 实践案例分析以一个3D游戏场景为例，场景中包含大量的可交互对象和动态物体。
在没有八叉树的情况下，每帧都需要对所有对象进行碰撞检测和渲染计算，导致性能严重下降。
而通过引入八叉树，可以有效地优化碰撞检测和渲染过程，使得场景可以实现更复杂的交互和动态效果。
5. 个人观点和总结八叉树作为一种高效的空间分割和查询数据结构，在three.js中得到了广泛的应用，并且在实际项目中取得了显著的性能提升。
在开发过程中，我们应该根据实际需求合理地使用八叉树，避免盲目地追求性能优化而造成过度复杂化。
不同应用场景下的八叉树实现也有所不同，需要根据具体情况进行灵活选择和调整。
总结：通过本文的探讨和实践案例分析，我们对three.js中八叉树的原理、应用和性能优化有了更深入的理解。
目录detachHeader(index) (2)enableAutoHeight(mode,maxHeight, countFullHeight) (2)enableAutoWidth (mode, max_limit, min_limit) (2)enableCellIds(mode) (2)enableHeaderImages(fl) (3)init (3)setAwaitedRowHeight(height) (3)setCSVDelimiter(str) (3)setColAlign(alStr) (3)setColSorting(sortStr) (4)setColTypes(typeStr) (4)setColVAlign(valStr) (4)setDelimiter (delim) (4)setHeader (hdrStr, splitSign, styles) (5)setIconPath (path) (5)setImagePath (path) (5)setInitWidths (wp) (5)setInitWidthsP(wp) (6)setNoHeader(fl) (6)setSkin(name) (6)setStyle (ss_header, ss_grid, ss_selCell, ss_selRow) (6)uid (6)detachHeader(index)参数：index 表头索引用途：删除grid的某个表头，与attachHeader配对使用enableAutoHeight(mode,maxHeight, countFullHeight)参数：mode: true/falsemaxHeight: 最大无滚动高度，默认为无限制countFullHeight: 最大高度计算方式，true 最大高度表示所有表格高度总和，false 仅表示数据表格的高度总和，即除去header 和footer，默认为false。
dhtmlx使用翻译（一）dhtmlxgrid 配置部分Dhtmlx是一个半开源的js框架，说是半开源，因为它的有些脚本是收费的。
总体感觉很轻巧，可依赖的东西不多，和ext这样的庞然大物，dhtmlx应该定位为一个tool更为合适。
我自己一直在使用，很喜欢它。
因为网上好像没看见可用的API中文翻译，今天终于鼓起勇气来做这件事情，纯属个人爱好，大伙见笑了，其实我的英文不好，大学四年，英语就挂过四次。
好,不废话了，这就开始。
1 dhtmlxgrid1.1 API1.1.1 attachEvent(evName , evHandler)版本：大众版参数：evName 可定义事件名称evHandler 用户自定义处理函数.用途：对当前grid事件绑定用户的自定义的处理js函数，这里支持两种格式定义一匿名函数定义<script>grid.attachEvent("onRowSelect",function(rowId,cellIndex){alert("Row with id="+rowId+" was selected");});</script>二命名函数定义<script>grid.attachEvent("onEditCell",doOnEditCell);function doOnEditCell(stage,rowId,cellIndex,newValue,oldValue){if ((stage==2)&&(newValue!=oldValue)){alert("Cell with id="+rowId+" and index="+cellIndex+" was edited");return true;}return true;}</script>这里也支持一个事件绑定多个处理函数的方法<script>grid.attachEvent("onCheck",doOnCheck1);grid.attachEvent("onCheck",doOnCheck2);function doOnCheck1(rowId,cellIndex,state){if (state){alert("Checkbox in the row with id="+rowId+" was checked");}}function doOnCheck2(rowId,cellIndex,state){if (state){alert("Checkbox in column with index="+cellIndex+" was checked");}}</script>执行顺序为doOnCheck1 –》doOnCheck2，这里可以用于通过全局js变量实现grid连动效果的实现。
下载后解压dhtmlxTree.rar 文件，得到dhtmlxTree\codebase文件夹,我试用的就是引入的codebase中的文件。
建立测试目录结构：Java代码1testdhtmlxTree 文件夹2 ......index.html 文件3 ......dhtmlxTree 文件夹4 ...............codebase 文件夹index.html内容如下：Html代码5<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">6<html xmlns="/1999/xhtml">7<head>8<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />9<title>测试dhtmlxTree</title>10<link rel="stylesheet" type="text/css"href="dhtmlxTree/codebase/dhtmlxtree.css">11<script src="dhtmlxTree/codebase/dhtmlxcommon.js"></script>12<script src="dhtmlxTree/codebase/dhtmlxtree.js"></script>13</head>14<body>15<table>16<tr>17<td valign="top">18<div id="treeboxbox_tree" style="width:250;height:218;background-color:#f5f5f5;border:1px solid Silver;"></div>19</td>20</tr>21</table>22<script>23tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);24tree.setImagePath("dhtmlxTree/codebase/imgs/");25tree.enableDragAndDrop(0);26tree.enableTreeLines(false);27tree.setImageArrays("plus","","","","plus.gif");28tree.setImageArrays("minus","","","","minus.gif");29//tree.setStdImages("book.gif","books_open.gif","books_close.gif");30//tree.setXMLAutoLoading("tree4.xml");31//tree.loadXML("tree4.xml");32//tree.insertNewItem(parentId,itemId,itemText,itemActionHandler,image1,image2,ima ge3,optionStr,childs)33tree.insertNewItem(0,1,'区域管理','','','','','','');34tree.insertNewChild(1,2,'北京');35tree.insertNewChild(1,3,'天津');36tree.insertNewChild(1,4,'上海');37tree.insertNewChild(1,5,'湖南');38tree.insertNewChild(1,6,'广西');39tree.insertNewChild(4,7,'徐家汇');40tree.insertNewChild(4,8,'百老会');41tree.insertNewChild(4,9,'不清楚');42tree.insertNewChild(4,10,'哈哈哈');43tree.setOnClickHandler(test);44function test(){45var text= tree.getSelectedItemText();46alert(text);47}48</script>49</body>50</html>效果图如下：。
一简单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"></script><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"></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.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>二关键词定位功能实现说明（红色部分为关键代码）引入JS文件，如下：<link rel="STYLESHEET" type="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/dhtmlxgridcell.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"></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("../../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,*");//数据的对齐方式mygrid.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文档的格式如下:<?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="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>初始化：//对相应列求和（列中必须位数字，可以有小数点）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/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><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"></script>执行初始化方法如下：<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/dhtmlxGrid/codebase/imgs/icons_books/";mygrid.enableTreeGridLines();mygrid.init();mygrid.loadXML("treegrid.xml");</script>增加行，删除行的操作是通过<a href=”” onclick=””></a>中的onclick事件来实现的。
Dhtmlxgrid表格组件介绍在网页上用表格显示数据是很常见的事情，html标记语言中的table标签能实现，但其功能很简单，只能单纯的显示数据和定义简单的样式，不支持查询，不支持排序，不支持自动增减列等等，这些功能都没有，如果是自己写的话又特别麻烦。
有了DHTMLX 表格组件(dhtmlxGrid )，会帮你完成这所有的一切。
引入需要的css样式和js文件css：dhtmlxgrid.cssdhtmlxgrid_dhx_custom.cssdhtmlxcombo.cssdhtmlxcalendar.cssdhtmlxcalendar_dhx_skyblue.css<link rel="stylesheet"type="text/css"href="dhtmlxGrid/codebase/dhtmlxgrid.css"/><link rel="stylesheet"type="text/css"href="dhtmlxCombo/codebase/dhtmlxcombo.css"/><link rel="stylesheet"type="text/css"href="css/dhtmlxgrid_dhx_custom.css"/><link rel="stylesheet"type="text/css"href="css/dhtmlxcalendar.css"/> <link rel="stylesheet"type="text/css"href="css/dhtmlxcalendar_dhx_skyblue.css"/>Js：dhtmlxgrid.jsdhtmlxgridcell.jsdhtmlxcommon.jsdhtmlxgrid_excell_cntr.jsdhtmlxgrid_filter.jsdhtmlxcombo.jsdhtmlxgrid_excell_combo.jsdhtmlxcombo_whp.jsdhtmlxgrid_excell_dhxcalendar.jsdhtmlxcalendar.js<script>window.dhx_globalImgPath ="dhtmlxCombo/codebase/imgs/";</script><script type="text/javascript"src="js/gl/dhtmlxcommon.js"></script> <script type="text/javascript"src="js/gl/dhtmlxgrid.js"></script><script type="text/javascript"src="js/gl/dhtmlxgridcell.js"></script> <script type="text/javascript"src="dhtmlxCombo/codebase/dhtmlxcommon.js"></script><script type="text/javascript"src="dhtmlxGrid/codebase/excells/dhtmlxgrid_excell_cntr.js"></script> <script type="text/javascript"src="dhtmlxGrid/codebase/ext/dhtmlxgrid_filter.js"></script><script type="text/javascript"src="dhtmlxCombo/codebase/dhtmlxcommon.js"></script><script type="text/javascript"src="js/gl/dhtmlxcombo.js"></script><script type="text/javascript"src="js/gl/dhtmlxgrid_excell_combo.js"></script><script type="text/javascript"src="dhtmlxCombo/codebase/ext/dhtmlxcombo_whp.js"></script><script type="text/javascript"src="dhtmlxGrid/codebase/excells/dhtmlxgrid_excell_dhxcalendar.js"></ script><script type="text/javascript"src="js/dhtmlxcalendar.js"></script>配置// <div id="gridboxFY"style="width: 100%;"></div>Var gridboxFY =new dhtmlXGridObject('gridboxFY');//当前表格是否设置为宽度自适应，并可设定默认最大宽度、最小宽度。
dhtmlXTree 指南与实例主要特性多浏览器/多平台支持全部由JavaScript控制动态加载XML支持大数据树动态翻译(智能XML解析)拖拽(同一个树,不同的树之间,不同的框架之间)带多选框(CheckBox)的树(两态/三态)定制图标(使用JavaScript或xml)内容菜单(与dhtmlxMenu集成)结点数据为用户数据多行结点高稳定性支持Macromedia Cold Fusion支持Jsp支持支持以下浏览器IE 5.5或更高版本Mac OS X SafariMozilla 1.4 或更高版本FireFox 0.9 或更高版本Opera (Xml加载支持取决于浏览器版本)使用dhtmlXTree进行开发在页面初始化对象<div id="treeBox" );tree.enableCheckBoxes(false);tree.enableDragAndDrop(true);</script>构造器有以下参数:加载树的容器对象(应该在调用构造器之前被加载)树的宽度树的高度树根的父结点的id(超级根)指定树的其他参数:setImagePath(url) - 设置树所使用的图片目录地址enableCheckBoxes(mode) - 打开/关闭多选框(默认打开) enableDragAndDrop(mode) - 打开/关闭拖拽模式设置事件处理1.5以上的版本支持一种新的设置事件的方式-使用attachEvent方法.设置一个事件处理方法需要知道事件的名字和所调用的方法.可用的事件名参考这里(以后会翻译),在事件处理方法中,可以这样引用树对象:<div id="treeBox" ,onNodeSelect)//set function object to call on node select //see other available event handlers in API documentationfunction onNodeSelect(nodeId){...}</script>很多时候函数要从参数中获取值.关于传值得详细信息请参考事件文档(以后翻译)使用脚本增加结点<script>tree=new dhtmlXTreeObject('treeBox',"100%","100%",0);...tree.insertNewChild(0,1,"New Node 1",0,0,0,0,"SELECT,CALL,TOP,CHILD,CHECKED");tree.insertNewNext(1,2,"New Node 2",0,0,0,0,"CHILD,CHECKED");</script>第4-7的参数都是0(选择后调用的方法,所使用的图片)意味着都使用默认值最后一个使用逗号分隔的参数可以是以下值(只能是大写):SELECT - 插入后选择此结点CALL - 在选择时调用方法TOP - 在最上方插入此结点CHILD - 此结点有子结点CHECKED - 此结点的多选框被选中(如果有的话)使用XML加载数据<script>tree=new dhtmlXTreeObject('treeBox',"100%","100%",0);tree.setXMLAutoLoading("http://127.0.0.1/xml/tree.xml");tree.loadXML("http://127.0.0.1/xml/tree.xml");//load root level from xml</script>在调用时,被打开的结点id(就像url参数一样)将会被增加到初始化XMLAutoLoading(url) 的URL地址上去调用loadXML(url)方法不会增加id到url地址上调用无参的loadXML()将会使用XMLAutoLoading(url)所指定的url地址XML语法:<?xml version='1.0' encoding='iso-8859-1'?><tree id="0"><item text="My Computer" id="1" child="1" im0="my_cmp.gif" im1="my_cmp.gif" im2="my_cmp.gif" call="true" select="yes"><userdata >PHP脚本需要在页面头添加以下代码:<?phpif ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {header("Content-type: application/xhtml+xml"); } else {header("Content-type: text/xml");}echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");?><tree>结点是必须有的.指定加载数据的父结点.这个id参数指定了父结点id.加载根层需要在创建树的时候指定id:new myObjTree(boxObject,width,height,0)<itrem>可以包含(为了一次加载多层结点)或者不包含子结点.并且可以包含<itemtext>标签,可以为结点标签(label)增加一些HTML (text属性将会被忽略)<item id="123"><itemtext><![CDATA[<font color="red">Label</font>]]></itemtext></item>必要属性有:text - 结点显示的标签id - 结点id可选属性有:tooltip - 鼠标放在结点上提示的信息im0 - 没有子结点的结点显示的图片(将会从setImagePath(url)方法指定的路径去获取图片)im1 - 包含子结点的结点展开时显示的图片im2 - 包含子结点的结点关闭时显示的图片aCo1 - 没有选中的结点的颜色sCol - 选中的结点的颜色select - 在加载时选择此结点(可以为任意值)style - 结点文本风格open - 展开此结点(可以为任意值)call - 选择时调用函数(可以为任意值)checked - 如果存在的话,选择此结点的多选框(可以为任意值)child - 指定结点是否有子结点(1:有,0:无)imheight - 图标的高度imwidth - 图标的宽度topoffset - 设置结点和上层结点间的偏移量radio - 如果非空则此结点的子结点会有单选按钮直接在XML里面设置用户数据可以使用<userdata>标签,此标签只有一个参数:name和 value 去指定用户数据值为结点定制图标有两种方法去定制结点图标,这取决于增加结点的方式.注意:树将会从setImagePath(url)方法指定的路径去获取结点图片.Javascript的方式:使用insertNewChild(...)或者insertNewNext(...)方法的参数指定<script>var im0 = "doc.gif";//icon to show if node contains no childrenvar im1 = "opened.gif";//if node contains children and openedvar im2 = "closed.gif";//if node contains children and closedtree.insertNewItem(0,1,"New Node 1",0,im0,im1,im2);tree.insertNewNext(1,2,"New Node 2",0,"txt.gif","opened.gif","closed.gif"); </script>XML的方式.使用<item>标签的属性:<?xml version='1.0' encoding='iso-8859-1'?><tree id="0"><item text="My Computer" id="1" child="1" im0="doc.gif" im1="my_opened.gif" im2="my_closed.gif"></tree>im0 - 没有子结点的结点显示的图片(将会从setImagePath(url)方法指定的路径去获取图片)im1 - 包含子结点的结点展开时显示的图片im2 - 包含子结点的结点关闭时显示的图片构建动态树如果树包含很大数量的结点(或者你只是不想浪费时间去加载隐藏的结点),按照需要去加载他们似乎是更好的选择,而不是一次性的全部加载进来.因此我们使用XML动态加载树.请参考"使用XML加载数据"或者查阅"Dynamical Loading in dhtmlxTree v.1.x"操作结点一些使用树的方法来操作结点的例子:<script>tree=new dhtmlXTreeObject('treeboxbox_tree',"100%","100%",0);...var sID = tree.getSelectedItemId();//get id of selected nodetree.setLabel(sID,"New Label");//change label of selecte nodetree.setItemColor(sID,'blue','red');//set colors for selected node's label (for not selected state and for selected state)tree.openItem(sID);//expand selected nodetree.closeItem(sID);//close selected nodetree.changeItemId(sID,100);//change id of selected node to 100alert("This node has children: "+tree.hasChildren(100));//show alert with information if this node has children</script>序列化树序列化方法允许从xml表现形式(xml字符串)中获取树.不同程度的序列化会在生成的XML字符串的属性上面反映出来<script>tree.setSerializationLevel(userDataFl,itemDetailsFl);var myXmlStr = tree.serializeTree();</script>没有参数的序列化- id,open,select,text,child参数userDataFl true - userdata参数itemDetailsFl true - im0,im1,im2,acolor,scolor,checked,openTooltips (鼠标放在结点上所提示的内容)有三种方法去设置tooltip :使用结点的label("text"item结点的text属性)作为tooltip - enableAutoTooltips(mode) - 默认为false使用item结点的"tooltip"属性作为tooltip(如果此属性被设置了则默认使用此方法)使用setItemText(itemId,newLabel,newTooltip) 方法移动结点编程式的移动可以使用以下方法:向上/下/左移动:tree.moveItem(nodeId,mode)mode 可以是以下值:"down" - 把结点移动到下方(不用再意层次关系)"up" - 把结点移动到上方"left" - 把结点直接移动到上层位置直接移动到指定位置(在树内部)tree.moveItem(nodeId,mode,targetId)mode 可以是以下值:"item_child" - 把结点移动到第三个参数子结点的位置作为子结点"item_sibling" -把结点移动到第三个参数兄弟结点的位置作为兄弟结点targetId - 目标结点的Id To move node into position (to another tree) 移动结点到指定位置(另一个树)tree.moveItem(nodeId,mode,targetId,targetTree)mode 的值参考以上两个例子 targetId - 目标结点的Id(在targetTree里面的id). targetTree - 目标树对象剪切/粘贴的方式另一种方式是使用doCut()和doPaste(id)函数-但是这种方法只能对选中的结点有效.程序员也可以从一个位置删除一个结点然后再另外一个地方再创建一个(也是个办法:-)).提供给用户拖拽功能去移动结点结点计数器可以显示指定结点标签(label)的结点子元素的数量.激活此方法使用以下代码:<script>tree.setChildCalcMode(mode);</script>mode 可以是以下值:"child" - 这层的所有子结点"leafs" - 这层的所有没有子结点的子结点"childrec" - 所有子结点"leafsrec" -没有子结点的所有子结点"disabled" - 什么都没有其他相关方法: _getChildCounterValue(itemId) - 得到当前的记数值setChildCalcHTML(before,after) - 包含计数器的html代码如果在动态加载中需要设定计数器的值,请在xml中使用child属性智能XML解析智能XML解析的概念很简单-整个树结构是从客户端加载的,但是只有应该被显示的结点才会被展示出来.很有效的减少了加载时间和大数据量树的性能.另外-与动态加载相反的是-脚本方法可以使用整个树结构(比如搜索整个树-而不是只有被显示出来的)用以下方法激活智能XML解析:<script>tree.enableSmartXMLParsing(true);//false to disable</script>在树被完全展开的时候只能XML解析不会产生作用树的多选框dhtmlxTree支持两态和三态树.三态树有三种状态:选中/未选中/某些子结点被选中(不是全部)用以下方法激活三态树:<script>tree.enableThreeStateCheckboxes(true)//false to disable</script>使用智能XML解析的话需要手工设置第三种状态(checked="-1");<item checked="-1" ...><item checked="1" .../><item .../></item>Checkboxes可以被禁用-disableCheckbox(id,state)一些结点可以隐藏checkboxes - showItemCheckbox(id,state) (nocheckbox xml 属性) 版本1.4以后 showItemCheckbox可以对整棵树使用(第一个参数使用0或者null)树的单选框dhtmlxTree支持但选按钮使用以下代码对整棵树进行设置<script>tree.enableRadiobuttons(true);</script>对某些特定的结点使用单选按钮(代替多选框)<script>tree.enableCheckboxes(true);tree.enableRadiobuttons(nodeId,true);</script>默认情况下单选按钮是根据层次分组的,但是版本1.4以后可以对整棵树进行设置:tree.enableRadiobuttons(true)Checkboxs相关的API和XML属性也适用于radiobuttons(参考radiobuttons方法描述) 拖拽技术拖拽有三种模式(使用setDragBehavior(mode)方法进行设置)当作子结点拖拽-"child"当作兄弟结点拖拽-"sibling"复合模式(前两种模式一起)- "complex" 每一种模式还有两种子模式:1. 普通拖拽2. 复制拖拽 - tree.enableMercyDrag(1/0)所有模式都可以在运行时改变事件处理在处理结点放下之前的事件使用-attachEvent("onDrag",func)如果func没有返回true,将会取消拖拽.将结点放下后会有另一个事件-onDrop-使用attachEvent("OnDrop",func)进行处理.两种方法都会传给func对象5个参数被拖拽结点的id目标结点的id前目标结点(如果拖拽的是兄弟结点)源树对象目标树对象两个框架之间的拖拽默认情况下框架间的拖拽是开启的.只需要把下列代码加在页面上没有树的地方<script src="codebase/dhtmlxcommon.js"></script><script>new dhtmlDragAndDropObject();</script>提高性能如果生成DHTML树的性能很低,有两种途径去改进大数据树的性能:1.Dynamical Loading(动态加载)2.Smart XML Parsing(智能XML解析)3.Distributed Parsing(分布式解析)4.Smart Rendering(动态显示)另外确保你的树组织的很好-把很多个结点放在同一层很不美观并且降低性能,虽然分布式解析或者智能显示可以解决这个问题上下文菜单在dhtmlxTree里面可以构建上下文菜单.菜单的上下文可以使用XML或者脚本进行设置.改变上下文菜单内容取决于树结点开发人员可以实现函数隐藏/显示同一个菜单的结点或者不同菜单的不同结点.下面的代码激活上下文菜单<script>//init menuaMenu=new dhtmlXContextMenuObject('120',0,"../codebase/imgs/");aMenu.menu.loadXML("menu/_context.xml");aMenu.setContextMenuHandler(onMenuClick);//init treetree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);...tree.enableContextMenu(aMenu); //link context menu to treefunction onMenuClick(id){alert("Menu item "+id+" was clicked");}HTTPS 兼容为了兼容HTTPS,我们需要为上下文菜构造器增加两个参数Images URLDummy page URL (url of the page to use for iframes src /now they are empty as iframes are used to make menu be positioned under selectboxes in IE/ in menu to make it compatible with https)<script>//init menu compatible with sHTMLaMenu=new dhtmlXContextMenuObject('120',0,"imgs/","empty.html");...</script>刷新结点refreshItems(itemIdList,source) 仅刷新itemIdList里面的结点(不包含它们的子结点)refreshItem(itemId) - 刷新itemId指定的子结点.自动加载会被激活结点排序专业版本中可以对结点进行排序(需要dhtmlxtree_sb.js)使用以下方式:根据标签(label)文本(如果没有定制比较描述符)tree.sortTree(nodeId,order,all_levels);nodeId - 开始排序层的父结点id(如果是超级根Id,排序整棵树)order - 排序方向:"升序"/"降序"all_levels - 如果为true,则所有子层都会被排序//define your comparator (in our case it compares second words in label) function mySortFunc(idA,idB){a=(tree.getItemText(idA)).split(" ")[1]||"";b=(tree.getItemText(idB)).split(" ")[1]||"";return ((a>b)?1:-1);}tree = new ...//attach your comparator to the treetree.setCustomSortFunction(mySortFunc);比较函数有两个结点id,使用树对象和id返回一个比较结果.如果定制比较函数被指定.则tree.sortTree(...)方法使用此函数排序查找功能dhtmlxTree的查找功能允许开发人员把注意力从匹配标签(label)搜索码中解脱出来,支持智能XML解析脚本语法tree.findItem(searchString); //find item next to current selectiontree.findItem(searchString,1,1)//find item previous to current selection tree.findItem(searchString,0,1)//search from top例子包含在专业版中-samples/treeExPro2.html多行结点允许在多行显示树结点.建议关掉避免影响外观.开启多行功能需要以下代码:tree.enableTreeLines(false);tree.enableMultiLineItems(true);例子包含在专业版中-samples/treeExPro6.html树的图标设置图标有一种方法可以使用脚本设置图标(setItemImage,setItemImage2)或者xml (im0,im1,im2 attributes of item node):im0 - 没有子结点的结点im1 - 有子结点的关闭结点im2 - 有子结点的打开结点设置图标大小有一种方法可以使用脚本或者xml为整棵树或者每个结点设置图标大小: XML设置每个结点的图标大小(可选):<item ... imheight="Xpx" imwidth="Xpx"></item>脚本语法:tree.setIconSize(w,h);//set global icon sizetree.setIconSize(w,h,itemId)//set icon size for particular item键盘导航默认情况下dhtmlxTree没有支持键盘功能,但是可以在页面中增加dhtmlxtree_kn.js 文件去开启键盘支持,只需要下面一条指令:<script src="../codebase/ext/dhtmlxtree_kn.js"></script><script>tree.enableKeyboardNavigation(true);</script>默认按键:Up arrow - 选择上面的结点Down arrow - 选择下面的结点Right arrow - 打开结点Left arrow - 关闭结点Enter - 调用结点方法也可以指定自己的按键如下:tree.assignKeys([["up",104],["down",98],["open",102],["close",100],["call",101]] );"up"/"down"/"open"/"close"/"call" 是可用的动作,数字是按键代码分布式解析另一种增加大数据树(每层100-200个结点)性能的方法是分布式解析,这个是企业版才有的功能.最大的好处是可以在树完全被解析之前看到树的层次并准备使用.使用以下命令激活这个功能:<script>tree.enableDistributedParsing(mode,count,timeout);</script>参数:mode - 必要参数- true/false - 开启/关闭分布解析count - 可选参数- 分配结点的数量timeout - 可选参数- 两部分结点之间延迟的毫秒数,这个功能完全和智能XML解析兼容错误处理一些dhtmlxTree异常可以被捕获并且处理function myErrorHandler(type, desc, erData){alert(erData[0].status)}dhtmlxError.catchError("ALL",myErrorHandler);支持错误类型:"All""LoadXML"处理函数参数:type - 字符串(如上)desc - 错误描述(硬编码)erData - 错误相关对象数组(如下).Type Object(s)LoadXML [0] - response objectCold Fusion 标签<cf_dhtmlXTree>...configuration xml...</cf_dhtmlXTree>name - [optional] name of the tree js object to use in javascript, if skiped, then name autogeneratedwidth - [optional] width of the tree (definitely it sets the with of the tree box, leaving the with of the tree itself by 100%)height - [optional] height of the treeJSPath - [optional] absolute or relative path to directory which contains tree js files, "js" directory by defaultCSSPath - [optional] absolute or relative path to directory which contains tree css files, "css" directory by defaulticonspath - [optional] absolute or relative path to directory which contains tree icon files, "img" directory by defaultxmldoc - [mandatory for xml loading] url of the xml file used to load levels dynamicallycheckboxes - [optional] show checkboxes (none, twoState, threeState)dragndrop - [optional] activate drag-&-drop (true,false)style - [optional] style for the tree boxonSelect - [optional] javascript function to call on node selectiononcheck - [optional] javascript function to call on node (un)checkingonDrop - [optional] javascript function to call on node dropim1 - [optional] default image used for child nodesim2 - [optional] default image used for opened branchesim3 - [optional] default image used for closed branches For description of optional configuration xml - see chapter "Loading data with XML"Minimal possible tag syntax with on-page xml:<cf_dhtmlXTree><item text="Top node" id="t1" ><item text="Child node 1" id="c1" ></item><item text="Child node 2" id="c2" ></item></item></cf_dhtmlXTree>Minimal possible tag syntax with server-side xml:<cf_dhtmlXTree xmldoc="tree.xml"></cf_dhtmlXTree>With images specified:<cf_dhtmlXTreeim1="book.gif"im2="books_open.gif"im3="books_close.gif"><item text="Mystery " id="mystery" open="yes" ><item text="Lawrence Block" id="lb" ><item text="All the Flowers Are Dying" id="lb_1" /><item text="The Burglar on the Prowl" id="lb_2" /><item text="The Plot Thickens" id="lb_3" /><item text="Grifters Game" id="lb_4" /><item text="The Burglar Who Thought He Was Bogart" id="lb_5" /> </item><item text="Robert Crais" id="rc" ><item text="The Forgotten Man" id="rc_1" /><item text="Stalking the Angel" id="rc_2" /><item text="Free Fall" id="rc_3" /><item text="Sunset Express" id="rc_4" /><item text="Hostage" id="rc_5" /></item><item text="Ian Rankin" id="ir" ></item><item text="James Patterson" id="jp" ></item><item text="Nancy Atherton" id="na" ></item></item></cf_dhtmlXTree>With Events Handlers,Checkboxes and Drag-n-drop:<cf_dhtmlXTreedragndrop="true"checkboxes="twoState"onSelect="onClick"onCheck="onCheck"onDrop="onDrag"><item text="Mystery " id="mystery" open="yes" ><item text="Lawrence Block" id="lb" ><item text="All the Flowers Are Dying" id="lb_1" /><item text="The Burglar on the Prowl" id="lb_2" /><item text="The Plot Thickens" id="lb_3" /><item text="Grifters Game" id="lb_4" /><item text="The Burglar Who Thought He Was Bogart" id="lb_5" /> </item><item text="Robert Crais" id="rc" ><item text="The Forgotten Man" id="rc_1" /><item text="Stalking the Angel" id="rc_2" /><item text="Free Fall" id="rc_3" /><item text="Sunset Express" id="rc_4" /><item text="Hostage" id="rc_5" /></item><item text="Ian Rankin" id="ir" ></item><item text="James Patterson" id="jp" ></item><item text="Nancy Atherton" id="na" ></item></item></cf_dhtmlXTree>可编辑结点1.3版本后dhtmlxTree专业版可以使用可编辑结点.只须在页面中引用dhtmlxtree_ed.js 去开启这个功能:<script src="../codebase/ext/dhtmlxtree_ed.js"></script><script>tree.enableItemEditor(mode);</script>参数如下:mode - 必要参数- true/false - 开启/关闭可编辑结点Event: 使用事件处理可以处理可编辑结点的不同阶段的事件,可以使用attachEvent("onEdit",handlerFunc)来设置. 在编辑过程中有4个不同的阶段:开始编辑前(可取消),编辑开始后,编辑结束前(可取消),编辑结束后处理方法的4个参数如下: state - 0 开始编辑前, 1 编辑开始后, 2 编辑结束前, 3 编辑结束后id - 可编辑结点的idtree - 树对象value - 只有2阶段可以使用,编辑的值同步与服务器更新通常的树操作-比如拖拽(包括不同树间的),删除结点,插入结点,更新结点标签(label)-在1.3版本后可以使用数据处理模型(dataProcessor module)与服务器上的数据库进行同步更新.主要特性如下:更新/插入结点,使用黑体字,删除结点-使用一条横线穿过可以定义数据处理模式(自动/手动).更新/删除结点的数据发送到指定的服务器URL(我们叫它服务器处理器).服务器处理器应该可以返回普通的xml和自定的格式化格式(如下),让树知道服务器是否成功进行处理,所有存储后的过程都会被自动处理使用以下步骤开启此功能:页面中包含dhtmlxdataprocessor.js为树创建数据处理(dataProcessor)对象<script src="../codebase/dhtmlxdataprocessor.js"></script><script>...tree.init();myDataProcessor = new dataProcessor(serverProcessorURL);myDataProcessor.init(treeObj);</script>dataProcessor构造器参数如下:serverProcessorURL - 必要参数- 处理接收数据文件的Url地址.如果使用服务器端运行.那么就是"dhtmlxDataProcessor/server_code/PHP/update.php?ctrl=tree" myDataProcessor.init方法的参数是:treeObj - 必要参数- 分配数据处理器(dataProcessor )的树对象如果不需要使用built-in服务器处理器(serverProcessor)而是使用自己的文件处理数据,需要知道以下几点:所有数据从Get域中获取- tr_id - 结点ID - tr_order - 同层结点顺序 - tr_pid - 父结点 - tr_text -结点文字(label) - 用户数据块和名字一起传来 - !nativeeditor_status - 如果存在并且值是"inserted"则为插入操作,值为"deleted"为删除操作,不存在或者值为"updated"是更新操作服务器处理器(serverProcessor )应该返回以下格式的XML数据:<data><action type='insert/delete/update' sid='incomming_node_ID' tid='outgoing_node_ID'/></data>只有对于插入结点来说incomming_node_ID和outgoing_node_ID 是两个不同的值.其他操作这两个值时一样的.对于统一服务器端运行时(PHP5/mySQLk可用)使用以下步骤: yourTree.loadXML(url) 使用"dhtmlxDataProcessor/server_code/PHP/get.php?ctrl=tree" 为参数new dataProcessor(url) 使用"dhtmlxDataProcessor/server_code/PHP/update.php?ctrl=tree" 为参数在dhtmlxDataProcessor/server_code/PHP/db.php 中配置连接在dhtmlxDataProcessor/server_code/PHP/tree_data.xml 中指定表的相应列值从HTML初始化可以使用html List或者内联XML来创建一个树.无论哪种方法都要在放置在一个DIV元素里面,DIV元素当作树的容器(XML应该包含XMP标签-见下面代码)任何树以set或者enable开头的方法可以当作DIV元素的属性使用去设置树的属性.可以自动转换或者调用脚本函数自动转换在页面中包含 dhtmlxtree_start.js把DIV元素的class属性设置为dhtmlxTree使用脚本方法转换在页面中包含 dhtmlxtree_start.js调用dhtmlXTreeFromHTML函数,把DIV元素的id当作第一个参数传进去var myTree = dhtmlXTreeFromHTML('listBox');使用html List初始化<divclass="dhtmlxTree"id="treeboxbox_tree"setImagePath="../codebase/imgs/"><ul><li>Root</li><ul><li>Child1<ul><li>Child 1-1</li></ul></li><li>Child2</li><li>Bold Italic </li></ul></li></ul></div>使用内联XML初始化关于dhtmlxTree XML结构的详细内容清参照 Loading data with XML<div id="treeboxbox_tree2" setImagePath="../codebase/imgs/" class="dhtmlxTree" ><xmp><item text="Root" open="1" id="11"><item text="Child1" select="1" open="1" id="12"><item text="Child1-1" id="13"/></item><item text="Child2" id="14"/><item id="15" text="Text"/></item>< /xmp></div>Version/Edition: v1.4/Professional/Standard Required js file:dhtmlxtree_start.js动态显示(Smart Rendering)如果树的每层都有很大数量的结点(500或者更多),可以尝试使用动态(Smart Rendering)显示来增加性能.数据结构不需要做任何变化-只需要使用enableSmartRendering打开此功能.注意:此方法和分布解析和三态树不兼容. Version/Edition: v1.5/Professional Required js file:dhtmlxtree_srnd.js从JSON加载从JSON加载树需要有JSON对象或者文件,并且使用以下方法加载:tree.loadJSONObject(JSON_OBJECT);//for loading from script objecttree.loadJSON(FILE);//for loading from file两个方法都有第二个可选参数-当数据被加载后执行的方法.JSON格式:结构类似树的XML结构,标签被翻译成对象,属性被翻译成字段{id:0,item:[{id:1,text:"first"},{id:2, text:"middle",item:[{id:"21", text:"child"}]},{id:3,text:"last"}]Version/Edition: v1.6/Professional/Standard Required js file:dhtmlXGrid_json.js从CSV加载数据需要使用CSV格式的字符串或者文件,使用以下方法加载:tree.loadCSV(FILE);//for loading from filetree.loadCSVString(CSVSTRING);//for loading from string两个方法都有第二个可选参数-当数据被加载后执行的方法.CSV格式:树结点被三个值所表示-id,parent_id,text.比如:1,0,node 12,1,node 1.13,2,node 1.1.14,0,node 2Version/Edition: v1.6/Professional/Standard Required js file:dhtmlXGrid_json.js 从JS数组加载执行以下方法从javascript对象或者javascript文件加载:tree.loadJSArrayFile(FILE);//for loading from filetree.loadJSArray(ARRAY);//for loading from array object两个方法都有第二个可选参数-当数据被加载后执行的方法.ARRAY格式:树结点被三个值所组成的子数组所表示-id,parent_id,text.比如:var treeArray = new Array(["1","0","node 1"],["2","1","node 1.1"],["3","2","node 1.1.1"],["4","0","node 2"])Version/Edition: v1.6/Professional/Standard Required js file:dhtmlXGrid_json.js本文来自CSDN博客，转载请标明出处：/azheng270/archive/2008/12/10/3491150.aspx。
