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
源代码如下
<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