关于Easyui中tree 的那点破事

先看官网的提供的说明：

id: 节点的ID
text: 节点显示的文字
state: 节点状态，有两个值 'open' or 'closed', 默认为'open'. 当为‘closed’时说明此节点下有子节点否则此节点为叶子节点
checked: Indicate whether the node is checked selected.
attributes: 节点中其他属性的集合
children: 子节点集合

接收的JSON格式如下：

[{
    "id":1,
    "text":"Folder1",
    "iconCls":"icon-save",
    "children":[{
        "text":"File1",
        "checked":true
    },{
        "text":"Books",
        "state":"open",
        "attributes":{
            "url":"/demo/book/abc",
            "price":100
        },
        "children":[{
            "text":"PhotoShop",
            "checked":true
        },{
            "id": 8,
            "text":"Sub Bookds",
            "state":"closed"
        }]
    }]
},{
    "text":"Languages",
    "state":"closed",
    "children":[{
        "text":"Java"
    },{
        "text":"C#"
    }]
}]

我们在应用时，程序只要返这样的格式给tree 就可以了

如果tree 节点不多，建议一次取出所有数据。如果想异步加载数据。可以使用如下代码：

html:

<ul id="tree"></ul>

JS:

$(function(){
     $('#tree').tree({
          url:'treedata.ashx',
          onClick:function(node){
                alert(node.text);
          }
     })
})

代码很简单吧，其实复杂的都在处理JSON数据中，后端要生tree指定格式的字符串，这棵树才会正常运转.

大多数据在设计的时候不会专门为此树设计相应的字段。比如：text 在我们的数据库中可能是title 那我们就需要在生成字符串后替换下，将title 替换为 text 。很多同学认为在点击节点时需要把此节点的ID传给后端程序，这一点很多同学在初次接触时会有误解，在点击节点时会自动检查是否有子节点，如有会自动调用url并将父ID传过去地。

秒客网

关于Easyui中tree 的那点破事

相关文章