JQueryEasyUI 组件 布局 portal组件

1，介绍

         树组件在web 页面中，将分层数据以树形结构进行显示
        他为用户提供展开，折叠，拖拽，编辑 和异步加载
        
        继承关系  draggable    droppable

  树控件的JSON数据格式。

每个节点都具备以下属性：

· id：节点ID，对加载远程数据很重要。

· text：显示节点文本。

· state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。

· checked：表示该节点是否被选中。

· attributes: 被添加到节点的自定义属性。

· children: 一个节点数组声明了若干节点。

 

2，事件

事件名
参数类型
描述
onClick
node
在用户点击一个节点时触发

语法

$("#标签元素ID").tree({            onClick: function(node){                   //node  为操作子节点对象 ，包含"Id"，"text", "state"            }        });

3，实例

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

 var dataNew = [            {                "id": "1",                "text": "1",                "state": "open",                "iconCls": "icon-save",                "children": [                    {                        "id": "11",                        "text": "11",                        "state": "open",                        "iconCls": "icon-save",                        "children": [                            {                                "id": "111",                                "text": "111",                                                             "iconCls": "icon-save",                                "attributes": {                                    "url": "T5-1.html",                                    "Pr": 100                                }                            },                            {                                "id": "222",                                "text": "222",                                "iconCls": "icon-save",                                "attributes": {                                    "url": "T5-1.html",                                    "Pr": 10011                                }                            }                        ]                    },                     {                         "id": "22",                         "text": "22",                         "state": "open",                         "iconCls": "icon-save",                         "children": []                     },                      {                          "id": "33",                          "text": "33",                          "state": "open",                          "iconCls": "icon-save",                          "children": []                      }                ]            }        ];        $(function () {            $("#tree").tree({                data: dataNew,                onClick: function (node) {                    console.info(node);                    if (node.attributes!=null) {                        console.info(node.attributes.url);                    }                }            });        });