jQuery easyui通过点击tree节点动态添加tab

  要实现的效果:点击easyui tree节点,如果tree节点包含href属性,则动态的往easyui tabs对象添加一个tab,tab加载href中指向的url地址内容。

 

  实现要点:href属性不是easyui tree数据源的标准配置,所以需要将非标配数据放到attributes节点中,要不直接放到数据节点中获取不到附加数据


Every node can contains following properties:
    id: node id, which is important to load remote data
    text: node text to show
    state: node state, 'open' or 'closed', default is 'open'. When set to 'closed', the node have children nodes and will load them from remote site
    checked: Indicate whether the node is checked selected.
    attributes: custom attributes can be added to a node
    children: an array nodes defines some children nodes


jQuery easyui通过点击tree节点动态想tabs添加tab
源代码如下

<script>
    $(function () {
        $('#tree').tree({
            url: 'data.txt', method: 'get', onClick: function (node) {
                if (node.attributes && node.attributes.href) {//存在href配置
                    var exists = $('#tt').tabs('exists', node.text); //判断是否存在tab,不存在添加,存在则选取这个tab
                    $('#tt').tabs(exists ? 'select' : 'add',exists?node.text: { title: node.text, href: node.attributes.href, closable: true });
                }
            }
        });
    });
</script>
<table><tr><td valign="top">
<ul id="tree"></ul></td><td>
<div id='tt' class="easyui-tabs" data-options="tabWidth:112" style="width:700px;height:250px"></div>
</td></tr></table>

data.txt


    [{
        "id": 1,
        "text": "评分项目", "attributes": { "href": "tab.txt" },
        "children": [{
            "id": 11,
            "text": "项目一","attributes": { "href": "tab.txt" },
            "state": "closed",
            "children": [{
                "id": 111,
                "text": "项目分支1",
                "state": "closed",
                "children": [{
                    "id": 1111,
                    "text": "项目底层"
                }]
            }, {
                "id": 112,
                "text": "项目分支2"
            }]
        }, {
            "id": 12,
            "text": "项目二",
            "state": "closed",
            "children": [{
                "id": 121,
                "text": "尺寸"
            }]
        }]
    }]


原创文章,转载请注明出处:jQuery easyui通过点击tree节点动态添加tab

评论(0)Web开发网
阅读(2914)喜欢(0)不喜欢(0)easyui开发技巧