有时,在修改功能中,会显示出树,并把其中某些结点初始化为已经选择的状态,即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了。理解起来很简单。