Extjs tree 实现父节点和子节点联动
ee = Ext.extend(Ext.tree.TreePanel, {
constructor : function(config) {
console.debug('Tree config roleId=' + config.roleId);
Eway.relation.Role2Permission.Tree.superclass.constructor.call(this, Ext.apply({
height: 450,
width: 300,
useArrows:true,
autoScroll:true,
animate:true,
enableDD:false,
containerScroll: true,
/*plugins: [new Ext.plugin.tree.TreeNodeChecked({
// 级联选中
cascadeCheck: true,
// 级联父节点
cascadeParent: true,
// 级联子节点
cascadeChild: true ,
// 连续选中
linkedCheck: false,
// 异步加载时，级联选中下级子节点
asyncCheck: false,
// 显示所有树节点checkbox
displayAllCheckbox: false
})] ,*/
// loader : new Ext.tree.TreeLoader({
// }),
root : new Ext.tree.AsyncTreeNode({
id : 'root',
text : '安全内控系统',
expanded : true
}),
loader : new Ext.tree.TreeLoader({
requestMethod : 'GET',
dataUrl : Eway.REST_URL+"/relation/role2permission/tree",
baseParams : {
roleId : config.roleId
}
}),
listeners: {
'checkchange': function(node, checked){
var INDEX_CATEGORY_CHECKING = false;
node.expand();
node.attributes.checked = checked;
if(checked) {
this.link(this.roleId, node.attributes.id);
}
else {
this.unlink(this.roleId, node.attributes.id);
};
var parentNode = node.parentNode;
if(parentNode !== null) {
this.parentCheck(parentNode,checked);
}
node.expand();
node.attributes.checked = checked;
node.eachChild(function(child){
child.ui.toggleCheck(checked);
child.attributes.checked = checked;
if(!child.isLeaf()){
child.fireEvent('checkchange', child, checked);
}
});
// this.childChecked(node,checked);
/*if (!INDEX_CATEGORY_CHECKING) {
INDEX_CATEGORY_CHECKING = true;
this.checkchild(node,checked);
this.checkparent(node);
INDEX_CATEGORY_CHECKING=false;
}*/
}
}
}, config));
},
childHasChecked :function(node){
var childNodes = node.childNodes;
if(childNodes || childNodes.length>0){
for(var i=0;i<childNodes.length;i++){
if(childNodes[i].getUI().checkbox.checked)
return true;
}
}
return false;
},
parentCheck:function(node,checked){
var checkbox = node.getUI().checkbox;
if(typeof checkbox == 'undefined')
return false;
if(!(checked ^ checkbox.checked))
return false;
if(!checked && this.childHasChecked(node))
return false;
checkbox.checked = checked;
node.attributes.checked = checked;
node.getUI().checkbox.indeterminate = checked; //半选中状态
node.getOwnerTree().fireEvent('check', node, checked);
var parentNode = node.parentNode;
if( parentNode !== null){
this.parentCheck(parentNode,checked);
}
},
checkchild:function(node,checked){
node.eachChild(function(child){
//debugger;
child.ui.toggleCheck(checked);
child.attributes.checked = checked;
if(!child.isLeaf()){
this.checkchild(child,checked);//递归
}else{
return;
}
//child.on('checkchange',function(node, checked){return false});
//child.fireEvent('checkchange', child, checked);
});
},
checkparent:function(node){
if(!node){return false;}
var parentNode = node.parentNode;
if(parentNode !== null) {
var isall=true;
parentNode.eachChild(function(n){
if(!n.attributes.checked){
isall=false;
}
});
if(isall){
parentNode.ui.toggleCheck(isall);
parentNode.attributes.checked = isall;
}else{
parentNode.ui.toggleCheck(isall);
parentNode.attributes.checked = isall;
}
}else{
return ;
}
this.checkparent(parentNode);//递归
},
childChecked:function(node,checked){
var INDEX_CATEGORY_CHECKING;
if (!INDEX_CATEGORY_CHECKING) {
INDEX_CATEGORY_CHECKING = true;
// true时，子同父，父也同子
if (checked == true) {
node.attributes.checked = true;
// 父变为true，所有子都跟着变化
(function(node) {
var _this = arguments.callee;
if (!node.isLeaf()) {
node.expand();
node.eachChild(function(child) {
child.ui.toggleCheck(true);
child.attributes.checked = true;
_this.call(_this, child);
});
}else{
return;
}
})(node);
// 父变为true，父的父（如果有的话）也应该都为true
(function(node) {
var _this = arguments.callee;
if (node.parentNode && node.parentNode != this.root) {
var pnode = node.parentNode;
pnode.ui.toggleCheck(true);
pnode.attributes.checked = true;
_this.call(_this, pnode);
}else{
return;
}
})(node);
}else { // false 时，子同父，但父不一定同子
node.attributes.checked = false;
// 父变为false，所有子跟着变化
(function(node) {
var _this = arguments.callee;
if (!node.isLeaf()) {
node.expand();
node.eachChild(function(child) {
child.ui.toggleCheck(false);
child.attributes.checked = false;
_this.call(_this, child);
});
}else{
return;
}
})(node);
// 父变为false，但父的父（如果有的话）不一定变化
(function(node) {
var _this = arguments.callee;
if (node.parentNode && node.parentNode != this.root) {
var pnode = node.parentNode;
var chk = false;
pnode.eachChild(function(child) {
if (child.attributes.checked == true) {
chk = true;
return false;
}
});
if (chk == true) {
return;
} else {
pnode.ui.toggleCheck(false);
pnode.attributes.checked = false;
_this.call(_this, pnode);
}
}else{
return;
}
})(node);
}
INDEX_CATEGORY_CHECKING = false;
}
},
link : function(roleId, permissionCode) {
Ext.Ajax.request({
url : Eway.REST_URL+"/relation/role2permission/link",
method : 'POST',
params : {
roleId : roleId,
permissionCode : permissionCode
}
});
},
unlink : function(roleId, permissionCode) {
Ext.Ajax.request({
url : Eway.REST_URL+"/relation/role2permission/unlink",
method : 'POST',
params : {
roleId : roleId,
permissionCode : permissionCode
}
});
}
});
Ext.reg('relation.Role2Permission.tree', Eway.relation.Role2Permission.Tree);