碰到一个问题解决不了,请大家帮分析一下!
问题是这样的,我要一个用来授权时候用的授权树,她的基本需求如下:
1.可以复选节点。
2.选中节点后要递归选中其所有子节点;取消选中状态后,要递归取消其所有子节点。
3.选中节点后腰递归选中所有直系父节点,如果某节点的所有子节点都被取消了则取消所有直系父节点的选中状态。
我目前已经实现了大部分功能(参考了E3项目授权树模型代码),但有一个Bug,选中某一叶子节点,则所有节点会被选中。
/**
* 监听节点的选中状态
/
tree.on('checkchange', function(pNode, pChecked) {
pNode.attributes.checked = pChecked;
/*
* 说明:
* 下面这两个方法同时调用就回出现,选择一个叶子节点则所有节点都被选中的Bug
* 如果只是调用其中任一个方法,则选中子节点功能和选中父节点功能都是正常的
* 小弟水平有限,实在找不出问题所在,特请大家看看
/
checkChildren(pNode);
checkParents(pNode);
});
附件里面已经打包了Ext3.1的SDK,下载解压后便可以直接修改代码调试。有兴趣的可以看看!多谢!
部分代码如下:
*
/
-
树模型测试
*/
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'qtip';
Ext.BLANK_IMAGE_URL = './resource/image/ext/s.gif';
var node00 = new Ext.tree.TreeNode({
text : '根节点00',
expanded : true,
checked : false,
// leaf:false,
id : '00'
});
var node0001 = new Ext.tree.TreeNode({
text : '节点0001',
expanded : true,
checked : false,
// leaf:false,
id : '0001'
});
var node000101 = new Ext.tree.TreeNode({
text : '节点000101',
expanded : true,
checked : false,
// leaf:false,
id : '000101'
});
var node000102 = new Ext.tree.TreeNode({
text : '节点000102',
expanded : true,
checked : false,
// leaf:true,
id : '000102'
});
var node00010103 = new Ext.tree.TreeNode({
text : '节点00010103',
expanded : true,
checked : false,
// leaf:true,
id : 'node00010103'
});
node00.appendChild(node0001);
node0001.appendChild(node000101);
node0001.appendChild(node000102);
node000101.appendChild(node00010103);
var tree = new Ext.tree.TreePanel({
autoHeight : false,
autoWidth : false,
autoScroll : true,
animate : false,
rootVisible : true,
title : '测试',
border : false,
containerScroll : true,
applyTo : 'treeDiv',
root : node00
});
node00.expand();
var checkChildren = function(node) {
if (node.isLeaf()) {// 非叶子节点
return;
}
//alert('1');
var nodeUI = node.getUI();
var children = node.childNodes;
//alert(children.length);
for (var i = 0; i < children.length; i++) {
var child = children[i];
var childUI = child.getUI();
if (typeof child.attributes.checked == 'undefined') continue;
if (child.attributes.checked == node.attributes.checked) continue;
childUI.toggleCheck(nodeUI.isChecked());
child.attributes.checked = nodeUI.isChecked();
checkChildren(child);
}
};/** * 递归选中父节点 */ var checkParents = function(node) { if (node == null) { return; } var nodeUI = node.getUI(); if (typeof node.attributes.checked == 'undefined') { return; } if (node.attributes.checked == false) {// 取消父亲. uncheckParents(node); return; } var parentNode = node.parentNode; if (parentNode == null) { return; } var parentNodeUI = parentNode.getUI(); if (typeof parentNode.attributes.checked == 'undefined') { return; } if (parentNode.attributes.checked) {// 已经选种 return; } parentNodeUI.toggleCheck(true); parentNode.getOwnerTree().fireEvent('onChecked', parentNode); parentNode.attributes.checked = true; checkParents(parentNode); }; /** * 递归取消父节点选中状态 */ var uncheckParents = function(node) { var parentNode = node.parentNode; if (parentNode == null) { return; } var parentNodeUI = parentNode.getUI(); if (typeof parentNode.attributes.checked == 'undefined') { return; } var children = parentNode.childNodes; for (var i = 0; i < children.length; i++) { var child = children[i]; var childUI = child.getUI(); if (typeof child.attributes.checked == 'undefined') { continue; } if (child.attributes.checked == true) { return; } } parentNodeUI.toggleCheck(false); parentNode.attributes.checked = false; parentNode.getOwnerTree().fireEvent('onUnchecked', parentNode); uncheckParents(parentNode); }; /** * 监听节点的选中状态 */ tree.on('checkchange', function(pNode, pChecked) { pNode.attributes.checked = pChecked; /** * 说明: * 下面这两个方法同时调用就回出现,选择一个叶子节点则所有节点都被选中的Bug * 如果只是调用其中任一个方法,则选中子节点功能和选中父节点功能都是正常的 * 小弟水平有限,实在找不出问题所在 */ checkChildren(pNode); checkParents(pNode); }); })