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并且级联选择或者取消选择