ExtJS关于TreePanel+CheckBox全部选中以及清空选中问题探讨
1. CheckBox的状态问题
在使用ExtJS的TreePanel时，节点如果要使用CheckBox，需要在NodeInterface中添加配置：
Ext.define('MyApp.model.MyTreeNode', {
extend: 'Ext.data.TreeModel',
mixins: ['Ext.mixin.Observable'],
requires: [
'Ext.data.proxy.Memory',
'Ext.data.identifier.UUID'
],
/**
* NodeInterface配置
*/
statics: {
nodeInterface: {
// 下面两个配置和CheckBox有关
checked: false, // 默认不选中
expandable: true // 点击CheckBox时自动展开或折叠子节点
}
},
fields: [
{name: 'text', type: 'string'},
// 其他属性
]
});
在配置完成后，通过TreePanel的选择事件控制CheckBox的选中状态：
Ext.create('Ext.tree.Panel', {
// 其他配置
listeners: {
/**
* 选择事件
* @param {Ext.selection.TreeModel} selModel 选择模型
* @param {Ext.data.TreeModel} record 点击的 node
* @param {number} index node 索引
* @param {object} eOpts
*/
select: function(selModel, record, index, eOpts){
if (record && record.childNodes.length > 0){
var checked = record.get('checked');
for (i = 0; i < record.childNodes.length; i++){
record.childNodes[i].set('checked', checked);
}
}
}
}
});
在上面的代码中，判断当前点击的节点是否有子节点，如果有，则将子节点的选中状态与当前节点相同。
但是，如果一个节点被选中，那么它的所有父节点也应该被选中。我们需要根据这个原则更新父节点的状态。
可以使用以下代码：
/**
* 更新指定节点的父节点选中状态
* @param {Ext.data.TreeModel} node
*/
function updateCheckedParent(node){
var parentNode = node.parentNode;
if (parentNode){
// 判断是否所有子节点都被选中，如果是，则选中父节点；否则，取消选中父节点
var allChecked = true;
for (i = 0; i < parentNode.childNodes.length; i++){
if (parentNode.childNodes[i].get('checked') !== true){
allChecked = false;
break;
}
}
parentNode.set('checked', allChecked);
updateCheckedParent(parentNode);
}
}
在每次选择事件结束时，调用该函数更新父节点的状态：
Ext.create('Ext.tree.Panel', {
// 其他配置
listeners: {
/**
* 选择事件
* @param {Ext.selection.TreeModel} selModel 选择模型
* @param {Ext.data.TreeModel} record 点击的 node
* @param {number} index node 索引
* @param {object} eOpts
*/
select: function(selModel, record, index, eOpts){
if (record && record.childNodes.length > 0){
var checked = record.get('checked');
for (i = 0; i < record.childNodes.length; i++){
record.childNodes[i].set('checked', checked);
}
updateCheckedParent(record);
}
}
}
});
现在，我们已经完成了所有节点的选中或取消选中。但是，我们还需要实现两个特殊的按钮功能：全部选中和清空选中。
2. 全部选中按钮
当我们点击全部选中按钮时，需要遍历所有节点，将它们的选中状态都设置为 true：
/**
* 遍历所有节点，将它们的选中状态设置为 true
* @param {Ext.tree.Panel} tree TreePanel面板
*/
function checkAll(tree){
tree.getRootNode().cascadeBy(function(node){
node.set('checked', true);
});
}
3. 清空选中按钮
当我们点击清空选中按钮时，需要遍历所有节点，将它们的选中状态都设置为 false：
/**
* 遍历所有节点，将它们的选中状态设置为 false
* @param {Ext.tree.Panel} tree TreePanel面板
*/
function uncheckAll(tree){
tree.getRootNode().cascadeBy(function(node){
node.set('checked', false);
});
}
完整的示例代码如下：
Ext.create('Ext.tree.Panel', {
renderTo: 'tree',
title: 'Sample Tree',
width: 350,
height: 300,
rootVisible: false,
store: Ext.create('Ext.data.TreeStore', {
model: 'MyApp.model.MyTreeNode',
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'children'
}
},
root: {
expanded: true,
children: [
// 树的数据
]
}
}),
columnLines: true,
viewConfig: {
stripeRows: false,
listeners: {
/**
* 渲染后执行
* @param {Ext.tree.View} view TreeView视图
*/
afterrender: function(view){
// 渲染后创建按钮
var toolbar = view.up('panel').addDocked({
xtype: 'toolbar',
dock: 'top',
items: [
{
text: '全部选中',
glyph: 'xf00c@FontAwesome',
handler: function(){
checkAll(view.up('treepanel'));
}
},
{
text: '清空选中',
glyph: 'xf00d@FontAwesome',
handler: function(){
uncheckAll(view.up('treepanel'));
}
}
]
})[0];
// 为按钮添加样式类
toolbar.items.items.forEach(function(item){
item.setGlyphCls('toolbar-glyph toolbar-glyph-big');
});
},
/**
* 选择事件
* @param {Ext.selection.TreeModel} selModel 选择模型
* @param {Ext.data.TreeModel} record 点击的 node
* @param {number} index node 索引
* @param {object} eOpts
*/
select: function(selModel, record, index, eOpts){
if (record && record.childNodes.length > 0){
var checked = record.get('checked');
for (i = 0; i < record.childNodes.length; i++){
record.childNodes[i].set('checked', checked);
}
updateCheckedParent(record);
}
}
}
}
});
/**
* 更新指定节点的父节点选中状态
* @param {Ext.data.TreeModel} node
*/
function updateCheckedParent(node){
var parentNode = node.parentNode;
if (parentNode){
// 判断是否所有子节点都被选中，如果是，则选中父节点；否则，取消选中父节点
var allChecked = true;
for (i = 0; i < parentNode.childNodes.length; i++){
if (parentNode.childNodes[i].get('checked') !== true){
allChecked = false;
break;
}
}
parentNode.set('checked', allChecked);
updateCheckedParent(parentNode);
}
}
/**
* 遍历所有节点，将它们的选中状态设置为 true
* @param {Ext.tree.Panel} tree TreePanel面板
*/
function checkAll(tree){
tree.getRootNode().cascadeBy(function(node){
node.set('checked', true);
});
}
/**
* 遍历所有节点，将它们的选中状态设置为 false
* @param {Ext.tree.Panel} tree TreePanel面板
*/
function uncheckAll(tree){
tree.getRootNode().cascadeBy(function(node){
node.set('checked', false);
});
}
以上就是关于ExtJS关于TreePanel+CheckBox全部选中以及清空选中问题探讨的完整攻略。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：extjs关于treePanel+chekBox全部选中以及清空选中问题探讨 - Python技术站
微信扫一扫 
支付宝扫一扫 