ExtJS中TreePanel复选框全选与清空问题探讨

在 ExtJS 开发实践中，TreePanel 组件结合复选框实现全选与清空是许多项目常见的交互需求。下面的代码示例通过递归遍历子节点完成全选操作，并通过遍历已勾选节点实现清空，完整展示了这一功能的实现思路。核心逻辑其实并不复杂——关键在于同步更新节点的 UI 显示状态与 attributes.checked 属性，否则界面展示与数据状态会出现不一致的问题。

复制代码 代码如下:

// 定义树组件
var treePanel = new Ext.tree.TreePanel({
id:'ptree',
region:'west',
layout:'anchor',
border:false,
rootVisible: false,
root:{},
listeners:{
render: function() {
authorityTree(treePanel); // 渲染树
},
checkchange: function(node, state) {
if (node.parentNode != null) {
// 子节点选中时同步勾选对应父节点
var pNode = node.parentNode;
if (state || treePanel.getChecked(id, pNode) == "") {
pNode.ui.toggleCheck(state); // 触发父节点选中
pNode.attributes.checked = state;
}
}
treeId = node.attributes.id;
treeName = node.attributes.text;
}
}
});
// 工具栏操作按钮
tbar: [{
id: 'btnQingKong',
text: '清空',
iconCls: 'winupdate-icon',
handler: function() {
var nodes = Ext.getCmp('ptree').getChecked();
if (nodes && nodes.length) {
for (var i = 0; i < nodes.length; i++) {
// 将 UI 显示设置为未选中
nodes[i].getUI().toggleCheck(false);
// 同步更新节点属性为未选中
nodes[i].attributes.checked = false;
}
}
}
},{
id: 'btnQuanXuan',
text: '全选',
iconCls: 'winupdate-icon',
handler: function() {
var nodeT = Ext.getCmp('ptree').getRootNode();
treeCheckTrue(nodeT);
}
}]
/**
* 递归全选所有子节点
*/
var treeCheckTrue = function(node)
{
node.eachChild(function (child) {
child.getUI().toggleCheck(true);
child.attributes.checked = true;
treeCheckTrue(child);
});
}
/**
* 清空所有已选中的节点
*/
var treeCheckfalse = function(tree)
{
var nodes = tree.getChecked();
if(nodes && nodes.length){
for(var i=0;i// 将 UI 显示设置为未选中
nodes[i].getUI().toggleCheck(false);
// 同步更新节点属性为未选中
nodes[i].attributes.checked=false;
}
}
}