dojo之tree

最新推荐文章于 2015-10-09 09:00:08 发布

最新推荐文章于 2015-10-09 09:00:08 发布 · 197 阅读

标签

#Ajax #JavaScript #ViewUI

js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Dojo创建带有复杂节点的Tree组件，包括Tree Model的构建、Tree的创建及自定义节点展开方式等内容。

这是从我之前的blog搬过来的。

dojo的tree创建比较简单，但创建一个含有复杂节点的tree并不是那么容易，我们接下来要创建的树节点将是比较复杂的节点树。
一. 创建treeModel
其中dataform的格式必须为

[
    {
        "frames": [
            {
                "start_time": 1354608387092039000,
                "id": "b9f9c586-86a8-4c99-8da1-2a872901bb3b",
                "desc": "<h2>ExtraTraceData</h2><table class=\"dl\"><tbody><tr><td>mandatory</td><td>false</td></tr></tbody></table><h2>properties</h2><table class=\"dl\"><tbody><tr><td>type</td><td>OperationType[http]</td></tr><tr><td>ExtraTraceData</td><td></td></tr><tr><td>label</td><td>GET /dojo/dojo/resources/blank.gif</td></tr><tr><td>contentLength</td><td>1042</td></tr><tr><td>returnValue</td><td>void</td></tr><tr><td>statusCode</td><td>404</td></tr></tbody></table>",
                "expanded": 1,
                "operation_signature": "GET /dojo/dojo/resources/blank.gif",
                "duration": 1693000
            }
        ],
        "operation_signature": "GET /dojo/dojo/resources/blank.gif",
        "id": "eefd777a-f365-4fbd-bcd8-721b3d8951fe"
    }
]

var data={
 identifier: 'id',
 label: 'operation_signature',
 items: dataform
 }
var archiveNames = new dojo.data.ItemFileReadStore({
     data: data
 });
var treeModel = new dijit.tree.ForestStoreModel({
        store: archiveNames,
        childrenAttrs: ["frames"]
});

二.创建tree

var tree=new dijit.Tree({
showRoot:false,
model: treeModel,
persist:false,
_createTreeNode: function(args) {
var treeNode=new dijit._TreeNode(args);
var idx=treeNode.indent+1;
if(idx > 0)
{
treeNode=formatter(treeNode);
}
return treeNode;
},
getIconClass: function(/*dojo.store.Item*/ item, /*Boolean*/ opened){
return (!item || this.model.mayHaveChildren(item)) ?

(opened ? "noimage" : "noimage") : "dijitLeaf"
},
}, "trace_detaillist");

tree.startup();
tree.collapseAll();

需要说明的是：

showRoot    是否展示根节点
persist     是否持久化树的状态，若真，则在下次打开浏览器的时候，树各个节点的展开情况和上次打开的状态相同
_createTreeNode    自定义创建树节点

在tree上附加上双击事件响应。nodeWidget是dojo的树节点控件，通过nodeWidget.domNode可以获得dom节点，从而为其添加子节点。

dojo.connect( tree,"onDblClick", function(/*dojo.data*/ item, /*TreeNode*/ nodeWidget)
{/*事件响应处理*/})

三.自定义树节点的展开方式
只展开node中有expanded标志为1的节点。

expandAllNode=function()
{
    var treeObj = dijit.byId('trace_detail');                
    var children = treeObj.rootNode.getChildren();
    expandChildNode(children, treeObj);
};

expandChildNode=function(children, treeObj)
{
    for (var i = 0; i < children.length; i++)
    {
        var node = children[i];
        if(node.item.expanded==0)
                continue;
        if (node.isExpandable && !node.isExpanded)
        {
            treeObj._expandNode(node);
            var childNodes = node.getChildren();
            if (childNodes.length > 0)
                 expandChildNode(childNodes, treeObj);
         }
    }
}