JQueryEasyUI 组件布局 portal组件

最新推荐文章于 2025-05-25 13:54:12 发布

寂寞的一只狗

最新推荐文章于 2025-05-25 13:54:12 发布

阅读量871

点赞数

CC 4.0 BY-SA版权

分类专栏： JQueryEasyUI 文章标签： easyui jquery Web 布局

本文链接：https://blog.youkuaiyun.com/qq_35019337/article/details/61542184

JQueryEasyUI 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了JQueryEasyUI中的布局portal组件，详细解析了树控件的JSON数据格式，包括节点的属性如id、text、state、checked等，并探讨了相关事件的语法和实际使用示例。

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);
                    }
                }
            });

        });