前几个月,一直在学习ext,并用它做了个项目,其中涉及到大量的树列表的创建,动态修改。现在不忙了,总结出来:
//创建节点
root为树的根节点,node当前要加入的节点,nodeArray所有的树节点(可以不包括根节点) checked表示树节点是否加入check框,带check框的节点都加入了选中子节点,父节点连同当前节点的子节点一起选中的事件。
function addNode(root,node,nodeArray,checked){
//alert(node.ID);
if(findNode(root,node.ID)!=null){
return;
}
var parent = findNode(root,node.PARENT);
if(parent==null){
for(var j=0;j<nodeArray.length;j++){
if(nodeArray[j].ID==node.PARENT){
addNode(root,nodeArray[j],nodeArray,checked);
}
}
}
parent = findNode(root,node.PARENT);
if(checked){
if(node.CHECKED=='true'){
node.CHECKED=true;
}
if(node.CHECKED=='false'){
node.CHECKED=false;
}
var newNode=createCheckedNode(node);
}else{
var newNode=new Ext.tree.TreeNode({
text : node.TEXT,
id : node.ID ,
leaf:false,
draggable: false,
expanded : true//默认展开根节点
});
}
parent.appendChild(newNode);
}
//创建带checked属性的节点
function createCheckedNode(node){
var newNode=new Ext.tree.TreeNode({
text : node.TEXT,
id : node.ID ,
leaf:false,
draggable: false,
checked:node.CHECKED,
expanded : true,//默认展开根节点
listeners:{
'checkchange': function(){
checkChange(newNode);
}
}
});
return newNode;
}
//节点改变触发的状态
function checkChange(newNode){
var checked=newNode.attributes.checked;
//alert("ssssss");
changeParentNode(newNode);
var childs = newNode.childNodes;
//alert(childs.length);
for(var i=0;i<childs.length;i++){
//alert(childs[i].attributes.checked);
if(childs[i].attributes.checked!=checked){
childs[i].ui.toggleCheck();
}
}
}
//同步父节点
function changeParentNode(newNode){
var parent=newNode.parentNode;
if(parent==null){
return;
}
var allChilds=parent.childNodes;
//alert(allChilds.length);
var checked=parent.attributes.checked;
var childChecked=false;
for(var i=0;i<allChilds.length;i++){
if(allChilds[i].attributes.checked){
childChecked=true;
if(!checked){
changeChecked(parent);
changeParentNode(parent);
}
return;
}
}
if(checked){
changeChecked(parent);
changeParentNode(parent);
return;
}
}
//改变父节点的选中状态
function changeChecked(node){
node.suspendEvents();
node.ui.toggleCheck();
node.resumeEvents();
}
查找任意层次的节点,只要你的nodeId足够深。
//查找节点
function findNode(parent,nodeId){
if(parent.id==nodeId){
return parent;
}
var node=parent.findChild('id',nodeId);
if(node!=null){
return node;
}else{
var childs=parent.childNodes;
for(var i=0;i<childs.length;i++){
if(childs[i].hasChildNodes()){
node = findNode(childs[i],nodeId);
if(node!=null){
return node;
}
}
}
return null;
}
}
查找当前根节点的所有节点。
//查找所有的节点,有子节点则不加人返回数组,没有则加入返回数组
var array=[];
function findAllNode(root,arr){
if(arr==null){
array=[];
}
array.push(root);
if(!root.hasChildNodes()){
return array;
}
var childs=root.childNodes;
for(var i=0;i<childs.length;i++){
findAllNode(childs[i],array);
}
return array;
}