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了。理解起來很簡單。