dhtmlXTree 指南与实例(二)

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

查找功能

dhtmlxTree的查找功能允许开发人员把注意力从匹配标签(label)搜索码中解脱出来,支持智能XML解析脚本语法
    tree.findItem(searchString); //find item next to current selection
    tree.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 size
    tree.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 object

 

Cold Fusion 标签
<cf_dhtmlXTree
    >
        ...configuration xml...
    </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:
<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_dhtmlXTree  
    im1="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_dhtmlXTree   
    dragndrop="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 - 可编辑结点的id
tree - 树对象
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初始化
    <div
        class="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 object
    tree.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 file
    tree.loadCSVString(CSVSTRING);//for loading from string

两个方法都有第二个可选参数-当数据被加载后执行的方法.CSV格式:树结点被三个值所表示-id,parent_id,text.比如:
    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

从JS数组加载

执行以下方法从javascript对象或者javascript文件加载:
    tree.loadJSArrayFile(FILE);//for loading from file
    tree.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"]
    )