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了。理解起来很简单。
以前做了一种方法,但有些局限性,有时加载过慢的话就会出问题。现在把两种方法总结一下,贴出来。
方法一:在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了。理解起来很简单。
相关文章推荐
- Extjs:初始化树结点为被选择状态(checked= true)的两种方法
- EXTJS动态载入组件定义文件并初始化组件,动态构造界面的方法.
- ajax XMLHttpRequest.readyState: 状态码 0 - (未初始化)还没有调用send()方法 解决了
- 状态栏的隐藏主要有两种方法: 方法一:通过代码控制 @interface UIApplication(UIApplicationDeprecated) // Setting statusBarHi
- IOS初始化控制器的两种方法
- jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
- json数据格式转换成树形状态两种方法
- 两种模型选择和超参数调整方法及Spark MLlib使用示例(Scala/Java/Python)
- JavaScript基础教程01编辑器的选择和两种链接方法
- 初始化ArrayList的两种方法
- 初始化ArrayList的两种方法
- 构造函数的两种初始化成员变量的方法 09.2.23
- Java中两种字符串初始化方法的区别
- linux 下获取当前网络连接状态的两种方法
- poj 3311 floyd+dfs或状态压缩dp 两种方法
- Java中两种字符串初始化方法的区别
- iOS 获取当前网络状态的两种方法
- ios: webview 中 加载状态显示两种方法
- Android中两种获取状态栏高度的方法
- 关于UIImage类的对象两种初始化方法的区别