您的位置:首页 > 产品设计 > UI/UE

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

2012-06-20 10:06 531 查看
有时,在修改功能中,会显示出树,并把其中某些结点初始化为已经选择的状态,即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了。理解起来很简单。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: