`
azheng270
  • 浏览: 92936 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

dhtmlXtree 相关资料

阅读更多
最近开发项目使用到了dhtmlXtree做权限设置,看了网上相关的中文资料很少,就把官方的资料翻译了下,一共分2部分,API可以参考官方文档:http://dhtmlx.com/docs/download.shtml

效果图如下(三态树):

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进行开发<!--- Initialize object on page -->
在页面初始化对象
    1. <divid="treeBox" );
    2. tree.enableCheckBoxes(false);
    3. tree.enableDragAndDrop(true);
    4. </script>
构造器有以下参数:
  • 加载树的容器对象(应该在调用构造器之前被加载)
  • 树的宽度
  • 树的高度
  • 树根的父结点的id(超级根)

指定树的其他参数:
  • setImagePath(url) - 设置树所使用的图片目录地址
  • enableCheckBoxes(mode) - 打开/关闭多选框(默认打开)
  • enableDragAndDrop(mode) - 打开/关闭拖拽模式

设置事件处理
1.5以上的版本支持一种新的设置事件的方式-使用attachEvent方法.设置一个事件处理方法需要知道事件的名字和所调用的方法.可用的事件名参考这里(以后会翻译),在事件处理方法中,可以这样引用树对象:
    1. <divid="treeBox" ,onNodeSelect)//setfunctionobjecttocallonnodeselect
    2. //seeotheravailableeventhandlersinAPIdocumentation
    3. functiononNodeSelect(nodeId){
    4. ...
    5. }
    6. </script>

很多时候函数要从参数中获取值.关于传值得详细信息请参考事件文档(以后翻译)
使用脚本增加结点
    1. <script>
    2. tree=newdhtmlXTreeObject('treeBox',"100%","100%",0);
    3. ...
    4. tree.insertNewChild(0,1,"NewNode1",0,0,0,0,"SELECT,CALL,TOP,CHILD,CHECKED");
    5. tree.insertNewNext(1,2,"NewNode2",0,0,0,0,"CHILD,CHECKED");
    6. </script>

  • 第4-7的参数都是0(选择后调用的方法,所使用的图片)意味着都使用默认值
  • 最后一个使用逗号分隔的参数可以是以下值(只能是大写):
  • SELECT - 插入后选择此结点
  • CALL - 在选择时调用方法
  • TOP - 在最上方插入此结点
  • CHILD - 此结点有子结点
  • CHECKED - 此结点的多选框被选中(如果有的话)


使用XML加载数据
    1. <script>
    2. tree=newdhtmlXTreeObject('treeBox',"100%","100%",0);
    3. tree.setXMLAutoLoading("http://127.0.0.1/xml/tree.xml");
    4. tree.loadXML("http://127.0.0.1/xml/tree.xml");//loadrootlevelfromxml
    5. </script>

  • 在调用时,被打开的结点id(就像url参数一样)将会被增加到初始化XMLAutoLoading(url) 的URL地址上去
  • 调用loadXML(url)方法不会增加id到url地址上
  • 调用无参的loadXML()将会使用XMLAutoLoading(url)所指定的url地址

XML语法:
    1. <?xmlversion='1.0'encoding='iso-8859-1'?>
    2. <treeid="0">
    3. <itemtext="MyComputer"id="1"child="1"im0="my_cmp.gif"im1="my_cmp.gif"im2="my_cmp.gif"call="true"select="yes">
    4. <userdata>

PHP脚本需要在页面头添加以下代码:
  1. <?php
  2. if(stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml")){
  3. header("Content-type:application/xhtml+xml");}else{
  4. header("Content-type:text/xml");
  5. }
  6. echo("<?xmlversion=\"1.0\"encoding=\"iso-8859-1\"?>\n");
  7. ?>


<tree>结点是必须有的.指定加载数据的父结点.这个id参数指定了父结点id.加载根层需要在创建树的时候指定id:new myObjTree(boxObject,width,height,0)
<itrem>可以包含(为了一次加载多层结点)或者不包含子结点.并且可以包含<itemtext>标签,可以为结点标签(label)增加一些HTML (text属性将会被忽略)
    1. <itemid="123">
    2. <itemtext><![CDATA[<fontcolor="red">Label</font>]]></itemtext>
    3. </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 去指定用户数据值

<!--- Setting custom icons to nodes -->为结点定制图标
有两种方法去定制结点图标,这取决于增加结点的方式.注意:树将会从setImagePath(url)方法指定的路径去获取结点图片.
Javascript的方式:使用insertNewChild(...)或者insertNewNext(...)方法的参数指定
    1. <script>
    2. varim0="doc.gif";//icontoshowifnodecontainsnochildren
    3. varim1="opened.gif";//ifnodecontainschildrenandopened
    4. varim2="closed.gif";//ifnodecontainschildrenandclosed
    5. tree.insertNewItem(0,1,"NewNode1",0,im0,im1,im2);
    6. tree.insertNewNext(1,2,"NewNode2",0,"txt.gif","opened.gif","closed.gif");
    7. </script>

XML的方式.使用<item>标签的属性:
    1. <?xmlversion='1.0'encoding='iso-8859-1'?>
    2. <treeid="0">
    3. <itemtext="MyComputer"id="1"child="1"im0="doc.gif"im1="my_opened.gif"im2="my_closed.gif">
    4. </tree>

  • im0 - 没有子结点的结点显示的图片(将会从setImagePath(url)方法指定的路径去获取图片)
  • im1 - 包含子结点的结点展开时显示的图片
  • im2 - 包含子结点的结点关闭时显示的图片


<!--- Dynamical loading -->构建动态树
如果树包含很大数量的结点(或者你只是不想浪费时间去加载隐藏的结点),按照需要去加 载他们似乎是更好的选择,而不是一次性的全部加载进来.因此我们使用XML动态加载树.请参考"使用XML加载数据"或者查阅"Dynamical Loading in dhtmlxTree v.1.x"
操作结点
一些使用树的方法来操作结点的例子:
    1. <script>
    2. tree=newdhtmlXTreeObject('treeboxbox_tree',"100%","100%",0);
    3. ...
    4. varsID=tree.getSelectedItemId();//getidofselectednode
    5. tree.setLabel(sID,"NewLabel");//changelabelofselectenode
    6. tree.setItemColor(sID,'blue','red');//setcolorsforselectednode'slabel(fornotselectedstateandforselectedstate)
    7. tree.openItem(sID);//expandselectednode
    8. tree.closeItem(sID);//closeselectednode
    9. tree.changeItemId(sID,100);//changeidofselectednodeto100
    10. alert("Thisnodehaschildren:"+tree.hasChildren(100));//showalertwithinformationifthisnodehaschildren
    11. </script>

序列化树
序列化方法允许从xml表现形式(xml字符串)中获取树.不同程度的序列化会在生成的XML字符串的属性上面反映出来
    1. <script>
    2. tree.setSerializationLevel(userDataFl,itemDetailsFl);
    3. varmyXmlStr=tree.serializeTree();

    4. </script>

    • 没有参数的序列化- id,open,select,text,child
    • 参数userDataFl true - userdata
    • 参数itemDetailsFl true - im0,im1,im2,acolor,scolor,checked,open
    Tooltips (鼠标放在结点上所提示的内容)
    有三种方法去设置tooltip :
    • 使用结点的label("text"item结点的text属性)作为tooltip - enableAutoTooltips(mode) - 默认为false
    • 使用item结点的"tooltip"属性作为tooltip(如果此属性被设置了则默认使用此方法)
    • 使用setItemText(itemId,newLabel,newTooltip) 方法
    移动结点
    编程式的移动可以使用以下方法:
    向上/下/左移动:
      1. tree.moveItem(nodeId,mode)

    mode 可以是以下值:
    • "down" - 把结点移动到下方(不用再意层次关系)
    • "up" - 把结点移动到上方
    • "left" - 把结点直接移动到上层位置

    直接移动到指定位置(在树内部)
      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"id="t1">
      3. <itemtext="Childnode1"id="c1"></item>
      4. <itemtext="Childnode2"id="c2"></item>
      5. </item>
      6. </cf_dhtmlXTree>

    Minimal possible tag syntax with server-side xml:
    1. <cf_dhtmlXTreexmldoc="tree.xml">
    2. </cf_dhtmlXTree>


    With images specified:
      1. <cf_dhtmlXTree
      2. im1="book.gif"
      3. im2="books_open.gif"
      4. im3="books_close.gif">
      5. <itemtext="Mystery"id="mystery"open="yes">
      6. <itemtext="LawrenceBlock"id="lb">
      7. <itemtext="AlltheFlowersAreDying"id="lb_1"/>
      8. <itemtext="TheBurglarontheProwl"id="lb_2"/>
      9. <itemtext="ThePlotThickens"id="lb_3"/>
      10. <itemtext="GriftersGame"id="lb_4"/>
      11. <itemtext="TheBurglarWhoThoughtHeWasBogart"id="lb_5"/>
      12. </item>
      13. <itemtext="RobertCrais"id="rc">
      14. <itemtext="TheForgottenMan"id="rc_1"/>
      15. <itemtext="StalkingtheAngel"id="rc_2"/>
      16. <itemtext="FreeFall"id="rc_3"/>
      17. <itemtext="SunsetExpress"id="rc_4"/>
      18. <itemtext="Hostage"id="rc_5"/>
      19. </item>
      20. <itemtext="IanRankin"id="ir"></item>
      21. <itemtext="JamesPatterson"id="jp"></item>
      22. <itemtext="NancyAtherton"id="na"></item>
      23. </item>
      24. </cf_dhtmlXTree>


    With Events Handlers,Checkboxes and Drag-n-drop:
      1. <cf_dhtmlXTree
      2. dragndrop="true"
      3. checkboxes="twoState"
      4. onSelect="onClick"
      5. onCheck="onCheck"
      6. onDrop="onDrag">
      7. <itemtext="Mystery"id="mystery"open="yes">
      8. <itemtext="LawrenceBlock"id="lb">
      9. <itemtext="AlltheFlowersAreDying"id="lb_1"/>
      10. <itemtext="TheBurglarontheProwl"id="lb_2"/>
      11. <itemtext="ThePlotThickens"id="lb_3"/>
      12. <itemtext="GriftersGame"id="lb_4"/>
      13. <itemtext="TheBurglarWhoThoughtHeWasBogart"id="lb_5"/>
      14. </item>
      15. <itemtext="RobertCrais"id="rc">
      16. <itemtext="TheForgottenMan"id="rc_1"/>
      17. <itemtext="StalkingtheAngel"id="rc_2"/>
      18. <itemtext="FreeFall"id="rc_3"/>
      19. <itemtext="SunsetExpress"id="rc_4"/>
      20. <itemtext="Hostage"id="rc_5"/>
      21. </item>
      22. <itemtext="IanRankin"id="ir"></item>
      23. <itemtext="JamesPatterson"id="jp"></item>
      24. <itemtext="NancyAtherton"id="na"></item>
      25. </item>
      26. </cf_dhtmlXTree>


    可编辑结点
    1.3版本后dhtmlxTree专业版可以使用可编辑结点.只须在页面中引用dhtmlxtree_ed.js 去开启这个功能:
      1. <scriptsrc="../codebase/ext/dhtmlxtree_ed.js"></script>
      2. <script>
      3. tree.enableItemEditor(mode);
      4. </script>

    参数如下:
    • mode - 必要参数- true/false - 开启/关闭可编辑结点
    • Event: 使用事件处理可以处理可编辑结点的不同阶段的事件,可以使用attachEvent("onEdit",handlerFunc)来设置. 在编辑过程中有4个不同的阶段:开始编辑前(可取消),编辑开始后,编辑结束前(可取消),编辑结束后 处理方法的4个参数如下:
    • state - 0 开始编辑前, 1 编辑开始后, 2 编辑结束前, 3 编辑结束后
    • id - 可编辑结点的id
    • tree - 树对象
    • value - 只有2阶段可以使用,编辑的值


    同步与服务器更新
    通常的树操作-比如拖拽(包括不同树间的),删除结点,插入结点,更新结点标签(label)-在1.3版本后可以使用数据处理模型(dataProcessor module)与服务器上的数据库进行同步更新.主要特性如下:
    • 更新/插入结点,使用黑体字,删除结点-使用一条横线穿过
    • 可以定义数据处理模式(自动/手动).更新/删除结点的数据发送到指定的服务器URL(我们叫它服务器处理器).服务器处理器应该可以返回普通的xml和自定的格式化格式(如下),让树知道服务器是否成功进行处理,所有存储后的过程都会被自动处理
    • 使用以下步骤开启此功能:
    • 页面中包含dhtmlxdataprocessor.js
    • 为树创建数据处理(dataProcessor)对象
      1. <scriptsrc="../codebase/dhtmlxdataprocessor.js"></script>
      2. <script>
      3. ...
      4. tree.init();
      5. myDataProcessor=newdataProcessor(serverProcessorURL);
      6. myDataProcessor.init(treeObj);
      7. </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数据:
      1. <data>
      2. <actiontype='insert/delete/update'sid='incomming_node_ID'tid='outgoing_node_ID'/>
      3. </data>


    只有对于插入结点来说incomming_node_IDoutgoing_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当作第一个参数传进去
    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/archive/2008/10/28/3166205.aspx
    分享到:
    评论

    相关推荐

      dhtmlXtree树 右dhtmlXtree键菜单

      dhtmlXtree是一款功能强大的JavaScript库,用于在Web页面中创建交互式的树形结构。它提供了丰富的特性,如拖放操作、多选、上下文(右键)菜单、图标支持等,广泛应用于网站导航、数据组织和展示。在这个场景中,...

      dhtmlxtree

      **dhtmlxtree详解与JSON应用** `dhtmlxtree` 是一个基于JavaScript的富客户端树形组件,它允许在Web应用程序中创建交互式的、可扩展的树状视图。这个组件由DHTMLX Suite提供,它是一个广泛使用的JavaScript UI库,...

      dhtmlxTree

      **dhtmlxTree** 是一个强大的...通过深入学习dhtmlxTree及其相关组件,开发者可以构建出高效、易用的Web界面,提升用户交互体验。同时,结合实际项目需求,灵活运用这些工具和资源,可以实现更多定制化的功能。

      专业版dhtmlxtree下载

      dhtmlxtree是一款基于JavaScript的开源树形菜单控件,专为Web开发人员设计,用于在网页中构建交互式、可扩展的树状结构。它提供了丰富的功能和自定义选项,使得用户界面更加直观和易于操作。这款专业版dhtmlxtree在...

      dhtmlXTree1.6

      3. **初始化树结构**:通过JavaScript代码实例化dhtmlXTree对象,并设置相关配置,如数据源、图标、事件处理等。 4. **加载数据**:根据所选数据源类型(XML或JSON),加载节点数据到树结构中。 5. **绑定事件**:...

      dhtmlxtree的一个实用demo

      总结来说,这个压缩包提供了一个关于dhtmlxtree的实际应用案例,特别是与权限管理相关的功能。通过学习这个demo,开发者可以了解到如何利用dhtmlxtree来创建交互式树形结构,并实现复杂的业务逻辑,如权限分配。同时...

      dhtmlxtree实例

      **dhtmlxtree实例详解** **一、dhtmlxtree简介** dhtmlxtree是一款强大的JavaScript树形控件,由DHTMLX Suite组件库提供,它允许开发者在Web应用程序中创建交互式的、可扩展的树状结构。dhtmlxtree支持多种特性,...

      dhtmlxTree v.3.0

      例如,当用户点击一个节点时,可以触发一个函数来加载与该节点相关的详细信息,或者在拖放操作中重新组织数据结构。 4. **扩展组件集成** 在压缩包中,我们看到了如dhtmlxConnector、dhtmlxDataProcessor等其他...

      JS树:dhtmlxTree

      **JS树:dhtmlxTree详解** 在网页开发中,数据可视化是不可或缺的一部分,而JavaScript树形组件(如dhtmlxTree)就是一种强大的工具,用于呈现层次结构的数据。dhtmlxTree是一款功能丰富的JavaScript库,它允许...

      Dhtmlxtree的例子

      Dhtmlxtree是一款基于JavaScript的树形控件,它提供了丰富的功能和自定义选项,用于在Web应用中创建交互式的树结构。这个例子展示了如何简单地使用Dhtmlxtree,并且利用XML数据来构建树节点。 首先,我们需要理解...

      第三方树控件dhtmlxTree 3.6

      `libCompiler`目录可能包含了编译库所需的相关工具或资源。 **7. 许可协议** `License_gpl_2.0.txt`表明dhtmlxTree 3.6遵循GPLv2开源许可协议,这意味着源代码可供自由使用、修改和分发,但需遵守特定的条款,如...

      基于dhtmlxtree构建动态维护树

      `&lt;%@ include file="common/dhtmlxtree.jsp"%&gt;`这行代码引用了dhtmlxtree的相关配置和初始化脚本。页面中的JavaScript函数如`deletenode`和`addchild`分别用于删除和新增子节点的操作。 3. **AJAX通信**: 动态...

      DhtmlxTree

      包含dhtmlxTree(树型控件),dhtmlxTabbar(选项卡),dhtmlxGrid(数据表格),dhtmlxCombo(下拉选项),dhtmlxTreeGrid(树型表格),dhtmlxVault(文件上传控件),dhtmlxMenu(菜单),dhtmlxToolbar(工具条),dhtmlxCalendar(日历...

      dhtmlxTree树形控件JavaScript

      dhtmlxTree是一款基于JavaScript的树形控件,它提供了丰富的功能和自定义选项,用于在Web应用程序中创建交互式的树状数据结构。这个控件允许开发者以灵活的方式展示层次化的信息,例如网站导航、文件系统目录或者...

      DHtmlXTree中文使用手册2.0版本

      【DHTMLXTree中文使用手册2.0版本】 在DHTMLX组件库中,DHTMLXTree是一款基于JavaScript的DHTML组件,它主要用于构建富交互式的Web界面,特别是在Ajax技术的支持下,能实现动态更新和高效的数据展示。DHTMLXTree...

    Global site tag (gtag.js) - Google Analytics