当前位置: 代码迷 >> JavaScript >> Extjs:初始化树结点替被选择状态(checked= true)的两种方法
  详细解决方案

Extjs:初始化树结点替被选择状态(checked= true)的两种方法

热度:434   发布时间:2012-06-21 13:42:41.0
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了。理解起来很简单。





  相关解决方案