menu
more_vert
DHTMLX Tree中文开发指导

作者:dayu

dhtmlXTree指南与实例
主要特性


  • 多浏览器/多平台支持
  • 全部由JavaScript控制
  • 动态加载
  • XML支持
  • 大数据树动态翻译(智能XML解析)
  • 拖拽(同一个树,不同的树之间,不同的框架之间)
  • 带多选框(CheckBox)的树(两态/三态)
  • 定制图标(使用JavaScript或xml)
  • 内容菜单(与dhtmlxMenu集成)
  • 结点数据为用户数据
  • 多行结点
  • 高稳定性
  • 支持Macromedia Cold Fusion
  • 支持Jsp
  • 支持ASP.NET


支持以下浏览器

  • IE 5.5或更高版本
  • Mac OS X Safari
  • Mozilla 1.4 或更高版本
  • FireFox 0.9 或更高版本
  • Opera (Xml加载支持取决于浏览器版本)


使用dhtmlXTree进行开发

在页面初始化对象
    1. <div- 把结点移动到下方(不用再意层次关系)
    2. "up" - 把结点移动到上方
    3. "left" - 把结点直接移动到上层位置

    4. 直接移动到指定位置(在树内部)

        1. tree.moveItem(nodeId,mode,targetId)


      mode可以是以下值:

      • "item_child" - 把结点移动到第三个参数子结点的位置作为子结点
      • "item_sibling" -把结点移动到第三个参数兄弟结点的位置作为兄弟结点


      targetId- 目标结点的Id To move node into position (to another tree) 移动结点到指定位置(另一个树)

        1. tree.moveItem(nodeId,mode,targetId,targetTree)


      mode的值参考以上两个例子targetId- 目标结点的Id(在targetTree里面的id).targetTree- 目标树对象 剪切/粘贴的方式 另一种方式是使用doCut()和doPaste(id)函数-但是这种方法只能对选中的结点有效.程序员也可以从一个位置删除一个结点然后再另外一个地方再创建一个(也是个办法:-)).提供给用户拖拽功能去移动结点

      结点计数器

      可以显示指定结点标签(label)的结点子元素的数量.激活此方法使用以下代码:
        1. <script>
        2. tree.setChildCalcMode(mode);
        3. </script>

      mode 可以是以下值:
      • "child" - 这层的所有子结点
      • "leafs" - 这层的所有没有子结点的子结点
      • "childrec" - 所有子结点
      • "leafsrec" -没有子结点的所有子结点
      • "disabled" -什么都没有


      其他相关方法: _getChildCounterValue(itemId) - 得到当前的记数值 setChildCalcHTML(before,after) - 包含计数器的html代码 如果在动态加载中需要设定计数器的值,请在xml中使用child属性

      智能XML解析

      智能XML解析的概念很简单-整个树结构是从客户端加载的,但是只有应该被显示的结点才会被展示出来.很有效的减少了加载时间和大数据量树的性能.另外-与动态加载相反的是-脚本方法可以使用整个树结构(比如搜索整个树-而不是只有被显示出来的)
      用以下方法激活智能XML解析:
        1. <script>
        2. tree.enableSmartXMLParsing(true);//falsetodisable
        3. </script>

      在树被完全展开的时候只能XML解析不会产生作用

      树的多选框

      dhtmlxTree支持两态和三态树.三态树有三种状态:选中/未选中/某些子结点被选中(不是全部)
      用以下方法激活三态树:
        1. <script>
        2. tree.enableThreeStateCheckboxes(true)//falsetodisable
        3. </script>

      使用智能XML解析的话需要手工设置第三种状态(checked="-1");
        1. <itemchecked="-1"...>
        2. <itemchecked="1".../>
        3. <item.../>
        4. </item>

      Checkboxes可以被禁用-disableCheckbox(id,state)
      一些结点可以隐藏checkboxes - showItemCheckbox(id,state) (nocheckboxxml 属性)
      版本1.4以后 showItemCheckbox可以对整棵树使用(第一个参数使用0或者null)

      树的单选框

      dhtmlxTree支持但选按钮 使用以下代码对整棵树进行设置
        1. <script>
        2. tree.enableRadiobuttons(true);
        3. </script>

      对某些特定的结点使用单选按钮(代替多选框)
        1. <script>
        2. tree.enableCheckboxes(true);
        3. tree.enableRadiobuttons(nodeId,true);
        4. </script>

      默认情况下单选按钮是根据层次分组的,但是版本1.4以后可以对整棵树进行设置:
        1. 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
      • 前目标结点(如果拖拽的是兄弟结点)
      • 源树对象
      • 目标树对象



      两个框架之间的拖拽

      默认情况下框架间的拖拽是开启的.只需要把下列代码加在页面上没有树的地方
        1. <scriptsrc="codebase/dhtmlxcommon.js"></script>
        2. <script>
        3. newdhtmlDragAndDropObject();
        4. </script>

      提高性能

      如果生成DHTML树的性能很低,有两种途径去改进大数据树的性能:
      1.Dynamical Loading(动态加载)
      2.Smart XML Parsing(智能XML解析)
      3.Distributed Parsing(分布式解析)
      4.Smart Rendering(动态显示)
      另外确保你的树组织的很好-把很多个结点放在同一层很不美观并且降低性能,虽然分布式解析或者智能显示可以解决这个问题

      上下文菜单

      在dhtmlxTree里面可以构建上下文菜单.菜单的上下文可以使用XML或者脚本进行设置.改变上下文菜单内容取决于树结点开发人员可以实现函数隐藏/显示同一个菜单的结点或者不同菜单的不同结点.下面的代码激活上下文菜单
        1. <script>
        2. //initmenu
        3. aMenu=newdhtmlXContextMenuObject(‘120‘,0,"../codebase/imgs/");
        4. aMenu.menu.loadXML("menu/_context.xml");
        5. aMenu.setContextMenuHandler(onMenuClick);
        6. //inittree
        7. tree=newdhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
        8. ...
        9. tree.enableContextMenu(aMenu);//linkcontextmenutotree
        10. functiononMenuClick(id){
        11. alert("Menuitem"+id+"wasclicked");
        12. }

      HTTPS 兼容

      为了兼容HTTPS,我们需要为上下文菜构造器增加两个参数
      • Images URL
      • Dummy 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)
        1. <script>
        2. //initmenucompatiblewithsHTML
        3. aMenu=newdhtmlXContextMenuObject(‘120‘,0,"imgs/","empty.html");
        4. ...
        5. </script>

      刷新结点

      • refreshItems(itemIdList,source) 仅刷新itemIdList里面的结点(不包含它们的子结点)
      • refreshItem(itemId) - 刷新itemId指定的子结点.自动加载会被激活


      结点排序

      专业版本中可以对结点进行排序(需要dhtmlxtree_sb.js)使用以下方式:根据标签(label)文本(如果没有定制比较描述符)
        1. tree.sortTree(nodeId,order,all_levels);

      • nodeId- 开始排序层的父结点id(如果是超级根Id,排序整棵树)
      • order- 排序方向:"升序"/"降序"
      • all_levels- 如果为true,则所有子层都会被排序
        1. //defineyourcomparator(inourcaseitcomparessecondwordsinlabel)
        2. functionmySortFunc(idA,idB){
        3. a=(tree.getItemText(idA)).split("")[1]||"";
        4. b=(tree.getItemText(idB)).split("")[1]||"";
        5. return((a>b)?1:-1);
        6. }
        7. tree=new...
        8. //attachyourcomparatortothetree
        9. tree.setCustomSortFunction(mySortFunc);


      比较函数有两个结点id,使用树对象和id返回一个比较结果.如果定制比较函数被指定.则tree.sortTree(...)方法使用此函数排序

      查找功能

      dhtmlxTree的查找功能允许开发人员把注意力从匹配标签(label)搜索码中解脱出来,支持智能XML解析脚本语法
        1. tree.findItem(searchString);//finditemnexttocurrentselection
        2. tree.findItem(searchString,1,1)//finditemprevioustocurrentselection
        3. tree.findItem(searchString,0,1)//searchfromtop

      例子包含在专业版中-samples/treeExPro2.html

      多行结点

      允许在多行显示树结点.建议关掉避免影响外观.开启多行功能需要以下代码:
        1. tree.enableTreeLines(false);
        2. tree.enableMultiLineItems(true);

      例子包含在专业版中-samples/treeExPro6.html

      树的图标

      设置图标

      有一种方法可以使用脚本设置图标(setItemImage,setItemImage2)或者xml (im0,im1,im2 attributes of item node):
      • im0 - 没有子结点的结点
      • im1 - 有子结点的关闭结点
      • im2 - 有子结点的打开结点



      设置图标大小

      有一种方法可以使用脚本或者xml为整棵树或者每个结点设置图标大小: XML设置每个结点的图标大小(可选):

        1. <item...imheight="Xpx"imwidth="Xpx"></item>


      脚本语法:

        1. tree.setIconSize(w,h);//setglobaliconsize
        2. tree.setIconSize(w,h,itemId)//seticonsizeforparticularitem

      键盘导航

      默认情况下dhtmlxTree没有支持键盘功能,但是可以在页面中增加dhtmlxtree_kn.js 文件去开启键盘支持,只需要下面一条指令:
        1. <scriptsrc="../codebase/ext/dhtmlxtree_kn.js"></script>
        2. <script>
        3. tree.enableKeyboardNavigation(true);
        4. </script>

      默认按键:
      • Up arrow - 选择上面的结点
      • Down arrow - 选择下面的结点
      • Right arrow - 打开结点
      • Left arrow - 关闭结点
      • Enter - 调用结点方法


      也可以指定自己的按键如下:

        1. tree.assignKeys([["up",104],["down",98],["open",102],["close",100],["call",101]]);


      "up"/"down"/"open"/"close"/"call"是可用的动作,数字是按键代码

      分布式解析

      另一种增加大数据树(每层100-200个结点)性能的方法是分布式解析,这个是企业版才有的功能.最大的好处是可以在树完全被解析之前看到树的层次并准备使用.使用以下命令激活这个功能:
        1. <script>
        2. tree.enableDistributedParsing(mode,count,timeout);
        3. </script>

      参数:
      • mode - 必要参数- true/false - 开启/关闭分布解析
      • count - 可选参数- 分配结点的数量
      • timeout - 可选参数- 两部分结点之间延迟的毫秒数,这个功能完全和智能XML解析兼容


      错误处理

      一些dhtmlxTree异常可以被捕获并且处理
        1. functionmyErrorHandler(type,desc,erData){
        2. alert(erData[0].status)
        3. }
        4. dhtmlxError.catchError("ALL",myErrorHandler);

      支持错误类型:
      • "All"
      • "LoadXML"


      处理函数参数:

      • type - 字符串(如上)
      • desc - 错误描述(硬编码)
      • erData - 错误相关对象数组(如下).

      Type Object(s)
      LoadXML [0] - response object





      Cold Fusion 标签

        1. <cf_dhtmlXTree
        2. >
        3. ...configurationxml...
        4. </cf_dhtmlXTree>

      • name - [optional] name of the tree js object to use in javascript, if skiped, then name autogenerated
      • width - [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 tree
      • JSPath - [optional] absolute or relative path to directory which contains tree js files, "js" directory by default
      • CSSPath - [optional] absolute or relative path to directory which contains tree css files, "css" directory by default
      • iconspath - [optional] absolute or relative path to directory which contains tree icon files, "img" directory by default
      • xmldoc - [mandatory for xml loading] url of the xml file used to load levels dynamically
      • checkboxes - [optional] show checkboxes (none, twoState, threeState)
      • dragndrop - [optional] activate drag-&-drop (true,false)
      • style - [optional] style for the tree box
      • onSelect - [optional] javascript function to call on node selection
      • oncheck - [optional] javascript function to call on node (un)checking
      • onDrop - [optional] javascript function to call on node drop
      • im1 - [optional] default image used for child nodes
      • im2 - [optional] default image used for opened branches
      • im3 - [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:

        1. <cf_dhtmlXTree>
        2. <itemtext="Topnode"为参数
        3. new dataProcessor(url) 使用"dhtmlxDataProcessor/server_code/PHP/update.php?ctrl=tree" 为参数
        4. 在dhtmlxDataProcessor/server_code/PHP/db.php 中配置连接
        5. 在dhtmlxDataProcessor/server_code/PHP/tree_data.xml 中指定表的相应列值


        6. 从HTML初始化

          可以使用html List或者内联XML来创建一个树.无论哪种方法都要在放置在一个DIV元素里面,DIV元素当作树的容器(XML应该包含XMP标签-见下面代码)任何树以set或者enable开头的方法可以当作DIV元素的属性使用去设置树的属性.可以自动转换或者调用脚本函数

          自动转换
          • 在页面中包含 dhtmlxtree_start.js
          • 把DIV元素的class属性设置为dhtmlxTree



          使用脚本方法转换

          • 在页面中包含 dhtmlxtree_start.js
          • 调用dhtmlXTreeFromHTML函数,把DIV元素的id当作第一个参数传进去
            1. varmyTree=dhtmlXTreeFromHTML(‘listBox‘);


          使用html List初始化

            1. <div
            2. class="dhtmlxTree"
            3. id="treeboxbox_tree"
            4. setImagePath="../codebase/imgs/"
            5. >
            6. <ul>
            7. <li>Root</li>
            8. <ul>
            9. <li>Child1
            10. <ul>
            11. <li>Child1-1</li>
            12. </ul>
            13. </li>
            14. <li>Child2</li>
            15. <li>Bold Italic </li>
            16. </ul>
            17. </li>
            18. </ul>
            19. </div>


          使用内联XML初始化
          关于dhtmlxTree XML结构的详细内容清参照 Loading data with XML

            1. <divid="treeboxbox_tree2"setImagePath="../codebase/imgs/"class="dhtmlxTree">
            2. <xmp>
            3. <itemtext="Root"open="1"id="11">
            4. <itemtext="Child1"select="1"open="1"id="12">
            5. <itemtext="Child1-1"id="13"/>
            6. </item>
            7. <itemtext="Child2"id="14"/>
            8. <itemid="15"text="Text"/>
            9. </item>
            10. </xmp>
            11. </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对象或者文件,并且使用以下方法加载:
            1. tree.loadJSONObject(JSON_OBJECT);//forloadingfromscriptobject
            2. tree.loadJSON(FILE);//forloadingfromfile

          两个方法都有第二个可选参数-当数据被加载后执行的方法.JSON格式:结构类似树的XML结构,标签被翻译成对象,属性被翻译成字段
            1. {id:0,
            2. item:[
            3. {id:1,text:"first"},
            4. {id:2,text:"middle",
            5. item:[
            6. {id:"21",text:"child"}
            7. ]},
            8. {id:3,text:"last"}
            9. ]

          Version/Edition: v1.6/Professional/Standard Required js file:dhtmlXGrid_json.js

          从CSV加载数据
          需要使用CSV格式的字符串或者文件,使用以下方法加载:
            1. tree.loadCSV(FILE);//forloadingfromfile
            2. tree.loadCSVString(CSVSTRING);//forloadingfromstring

          两个方法都有第二个可选参数-当数据被加载后执行的方法.CSV格式:树结点被三个值所表示-id,parent_id,text.比如:
            1. 1,0,node1
            2. 2,1,node1.1
            3. 3,2,node1.1.1
            4. 4,0,node2

          Version/Edition: v1.6/Professional/Standard Required js file:dhtmlXGrid_json.js

          从JS数组加载

          执行以下方法从javascript对象或者javascript文件加载:
            1. tree.loadJSArrayFile(FILE);//forloadingfromfile
            2. tree.loadJSArray(ARRAY);//forloadingfromarrayobject

          两个方法都有第二个可选参数-当数据被加载后执行的方法.ARRAY格式:树结点被三个值所组成的子数组所表示-id,parent_id,text.比如:
            1. vartreeArray=newArray(
            2. ["1","0","node1"],
            3. ["2","1","node1.1"],
            4. ["3","2","node1.1.1"],
            5. ["4","0","node2"]
            6. )

          Version/Edition: v1.6/Professional/Standard Required js file:dhtmlXGrid_json.js

          转自:http://blog.csdn.net/Colin_Bin/article/details/3166205

          DHTMLX Tree中文开发指导

          原文地址:http://www.cnblogs.com/wangluochong/p/7204730.html



Processed Time:0.16507792472839

_REQUEST:
Array
(
    [0] => read
    [1] => 95598
)
_SESSION:
Array
(
    [fid] => 4
)