首页 > 代码库 > easyui tree使用方法

easyui tree使用方法

技术分享

 

加载数据

 

[javascript] view plaincopy
 
  1. $(‘#treeul‘).tree({  
  2.                checkbox:true,  
  3.                url:‘initTree.aspx‘,  
  4.                onLoadSuccess:function(){  
  5.                    //绑定权限  
  6.                     $.ajax({  
  7.                        url:‘getId.aspx?id=‘+v,  
  8.                         cache:false,  
  9.                         dataType:‘text‘,  
  10.                         success:function(data){    
  11.                            var array = data.split(‘,‘);  
  12.                            for(var i=0;i<array.length;i++)  
  13.                            {  
  14.                                var node = $(‘#treeul‘).tree(‘find‘,array[i]);  
  15.                               $(‘#treeul‘).tree(‘check‘,node.target);  
  16.                            }  
  17.                        }  
  18.                    })  
  19.                }  
  20.            });  

  

 

 

cache必须设置为false,意思为不缓存当前页,否则更改权限后绑定的权限还是上一次的操作结果.

dataType表示获取服务器发送的数据,"text"表示纯文本

 

 

保存选中的节点

 

[javascript] view plaincopy
 
  1. $(‘#savebtn‘).click(function(){      
  2.              $.ajax({  
  3.               url:‘nodeHandler.ashx?pnodes=‘+GetNode(‘fnode‘)+ ‘&cnodes=‘+GetNode(‘child‘) +‘&id=‘+v,  
  4.                 cache:false,  
  5.               success:function(data){  
  6.                   eval(‘data=http://www.mamicode.com/‘+data);
  7.                   if(data.success){  
  8.                       alert(‘保存成功‘);  
  9.                       window.location.href=http://www.mamicode.com/‘Permission.aspx‘;  
  10.                   }  
  11.               }  
  12.              })  
  13.           });  

 

保存的时候,也必须将cache设置为false 

 

GetNode方法

参数代表:父节点或子节点

 

[c-sharp] view plaincopy
 
  1. function GetNode(type){  
  2.             var node = $(‘#treeul‘).tree(‘getChecked‘);  
  3.             var cnodes=‘‘;  
  4.             var pnodes=‘‘;  
  5.               
  6.              var prevNode=‘‘; //保存上一步所选父节点  
  7.             for(var i=0;i<node.length;i++){  
  8.                  
  9.                 if($(‘#treeul‘).tree(‘isLeaf‘,node[i].target)){  
  10.                     cnodes+=node[i].id+‘,‘;    
  11.                       
  12.                     var pnode = $(‘#treeul‘).tree(‘getParent‘,node[i].target); //获取当前节点的父节点  
  13.                    if(prevNode!=pnode.id) //保证当前父节点与上一次父节点不同  
  14.                    {  
  15.                         pnodes+=pnode.id+‘,‘;  
  16.                         prevNode = pnode.id; //保存当前节点  
  17.                    }  
  18.                 }  
  19.             }  
  20.             cnodes = cnodes.substring(0,cnodes.length-1);  
  21.             pnodes = pnodes.substring(0,pnodes.length-1);  
  22.              
  23.             if(type==‘child‘){return cnodes;}  
  24.             else{return pnodes};  
  25.         };  

 

 

 

绑定tree的时候,只需要绑定子节点就可以了,父节点是根据子节点的状态决定是否选中的。一个父节点有2个子节点,如果我只绑定一个子节点,那么父节点的选择状态就不是“√”,如果2个子节点都有绑定的话,那么父节点的选中状态就是"√"

easyui tree使用方法