1. 程式人生 > >Extjs:初始化樹結點為被選擇狀態(checked= true)的兩種方法

Extjs:初始化樹結點為被選擇狀態(checked= true)的兩種方法

有時,在修改功能中,會顯示出樹,並把其中某些結點初始化為已經選擇的狀態,即checked=true狀態。

以前做了一種方法,但有些侷限性,有時載入過慢的話就會出問題。現在把兩種方法總結一下,貼出來。

方法一:在form的onload方法中,呼叫initSelectedNodes方法。

function initSelectedNodes(){
var rootN=Ext.getCmp('showparkingtree').getRootNode();//得到根結點
var szParkingIds = document.getElementById("parkingIds").value;   //拿到需要置為check=true狀態的樹結點
checkSelectedNodes(rootN,szParkingIds);//拿到要置為已經選擇狀態的id,然後初始化
 }

//遞迴查詢應該被初始化為選擇狀態的停車場

function checkSelectedNodes(node,szParkingIds){
var childnodes = node.childNodes;
var szParkingId = szParkingIds.split(",");
        //對每一個子結點的操作
        for(var i=0; i < childnodes.length; i++){
var cNode = childnodes[i];   //對結點下每一個結點進行判斷 
var checkedNodeId = "";
var flag = false;//用於判斷該結點是否為選中的狀態
for(var j=0;j<szParkingId.length;j++){
checkedNodeId = "regionInfo_" + szParkingId[j];
       //alert("cNode.id=" + cNode.id + " --- checkNodeId=" + checkedNodeId);
   if(cNode.id == checkedNodeId){
   flag = true;
   break;
   }
}   
 if(flag == true){//是被選中
       cNode.ui.toggleCheck(true);
       cNode.attributes.checked = true;
   }
       
  if(cNode.childNodes.length >0){       
 checkSelectedNodes(cNode,szParkingIds);//遞迴呼叫
    }

 }//for end

}

但上面這個方法有個弊端,就是有可能ext樹載入過慢,這樣,這個方法可以被先執行到,從而導致樹應該被置為選中的結點並沒有被選中的狀態。

但上面這個方法學習一下遞迴還是有好處的。比較喜歡第二種方法,很簡單:

unitTree = new Ext.tree.TreePanel({
id:"showparkingtree",
firstChangeFlag:true,
//useArrows : true,
animate : false,
enableDD : false,
rootVisible : false,
border : false,
//bodyStyle : 'background-color:transparent;',
frame : false,
root : rootnode,
loader : treeloader,
listeners : {
'dblclick' : function(node, event) {


},
'expandnode' : function(node) {
//當能找到此元素時,是修改狀態
if(document.getElementById("parkingIds")){
var szSelectedIds = document.getElementById("parkingIds").value;
if(szSelectedIds != "" && node.id.indexOf("regionInfo_")>=0)
{
szSelectedIds = ","+szSelectedIds+",";
if(szSelectedIds.indexOf(","+node.id.split("regionInfo_")[1]+",")>=0)
{
node.ui.toggleCheck(true);
node.attributes.checked = true;
}
}
}else{    //是增加時,頁面上無此元素

}
}
}
});

這個方法更簡單,其實只要是我們知道在expandnode這個事件中新增就ok了。理解起來很簡單。