Ext.tree.Panel显示checkbox并且级联选择或者取消选择
ext4,ext5 Ext.data.TreeStore如何显示复选框checkbox,勾选复选框checkbox时如何级联选中子节点的复选框。
ext4,ext5实现check tree级联选择源代码如下
提示:checkchange事件参数node,5+返回的是Ext.data.TreeModel,ext4是Ext.data.NodeInterface对象
Ext.onReady(function () { store = Ext.create('Ext.data.TreeStore', { root: { expanded: true }, proxy: { type: 'ajax', url: 'data.json' } }); Ext.create('Ext.tree.Panel', { listeners: { checkchange: function (node, checked, opts) { if (checked) checkParentNode(node.parentNode, checked); checkChildNode(node, checked); } }, store: store, rootVisible: false, renderTo: document.body }); }); function checkChildNode(node, checked) { if (!node) return; node.set('checked', checked); node.eachChild(function (child) { checkChildNode(child, checked); }); } function checkParentNode(node, checked) { if (!node) return; node.set('checked', checked); checkParentNode(node.parentNode); }
data.json,Ext.tree.Panel显示复选框很简单,每个节点增加checked属性(布尔值)即可。
[ { "id": 1, "text": "Class 1", "leaf": false,"checked":false, "children": [ { "id": 2, "text": "Class 1.1", "leaf": true, "children": [ ],"checked":false }, { "id": 3, "text": "Class 1.2", "leaf": true, "children": [ ],"checked":false } ] }, { "id": 4, "text": "Class 2", "leaf": false, "children": [ { "id": 5, "text": "Class 2.1", "leaf": true, "children": [ ],"checked":false } ],"checked":false } ]
加支付宝好友偷能量挖...
原创文章,转载请注明出处:Ext.tree.Panel显示checkbox并且级联选择或者取消选择