ext3.0 樹控制元件處理
前幾個月,一直在學習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;
}