EasyUI的treegrid实现自动顺序选择行节点

　这两天用EasyUI的treegrid写了一个根据滚动条滚动时相应的依次选中treegrid中的行的demo，之前用了一个递归实现不了，所以用了两个递归实现的，效果如图：　

这里的使用的easyui 1.4版本，这个treegrid的方法很少，所以实现起来很费劲，需要自己写函数。好了，上代码：

  1 <%@ include file='/main/head.jsp' %>
  2 
  3 <div data-options="region:'center',title:'项目时刻进度展示',split:true">
  4 
  5     <table id="i_dg" style="width:100%;height:300px;margin-bottom:20px;"></table>
  6 
  7     <div id="i_slider" style="height:200px;margin-top:20px;"></div>
  8     
  9 </div>
 10 
 11 <script type="text/javascript">
 12         
 13         var jTestData=[
 14             {'itemid':11,'productid':'sss','arr':[{subname:'sds1d',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'}]},
 15             {'itemid':15,'productid':'sdds','arr':[{subname:'sds2d',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'}]},
 16             {'itemid':14,'productid':'sffss','arr':[{subname:'sds3d',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'}]},
 17             {'itemid':13,'productid':'ssggs','arr':[{subname:'sd4sd',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'}]},
 18             {'itemid':12,'productid':'sshhs','arr':[{subname:'sd5sd',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'}]}
 19         ];
 20 
 21         var jTestData2=[
 22             {"id":10,"name":'xxx1',"pro":'ssssss1',"children":[
 23                 {"id":11,"name":'sds1',"pro":'sdsd1'},
 24                 {"id":12,"name":'sds2',"pro":'sdsd2',"children":[
 25                 {"id":121,"name":'sds21',"pro":'sdsd1'},
 26                 {"id":122,"name":'sds22',"pro":'sdsd2'},
 27                 {"id":123,"name":'sds23',"pro":'sdsd3'}]},
 28                 {"id":13,"name":'sds3',"pro":'sdsd3'}]},
 29 
 30                 {"id":20,"name":'xxx2',"pro":'ssssss2',"children":[
 31                 {"id":21,"name":'sds21',"pro":'sdsd1'},
 32                 {"id":22,"name":'sds22',"pro":'sdsd2'},
 33                 {"id":23,"name":'sds23',"pro":'sdsd3'}]},
 34 
 35                 {"id":30,"name":'xxx3',"pro":'ssssss3',"children":[
 36                 {"id":31,"name":'sds31',"pro":'sdsd1'},
 37                 {"id":32,"name":'sds32',"pro":'sdsd2'},
 38                 {"id":33,"name":'sds33',"pro":'sdsd3'}]}
 39         ];
 40 
 41          var jTestData3=[
 42             {"id":10,"name":'10',"pro":'ssssss1',"children":[
 43                 {"id":11,"name":'11',"pro":'sdsd1'},
 44                 {"id":12,"name":'12',"pro":'sdsd2',"children":[
 45                 {"id":121,"name":'121',"pro":'sdsd1'},
 46                 {"id":122,"name":'122',"pro":'sdsd2',"children":[
 47                 {"id":1221,"name":'1221',"pro":'sdsd1'},
 48                 {"id":1222,"name":'1222',"pro":'sdsd1'}
 49                 ]},
 50                 {"id":123,"name":'123',"pro":'sdsd3'}]},
 51                 {"id":13,"name":'13',"pro":'sdsd3'},
 52                 {"id":14,"name":'14',"pro":'sdsd4'}]},
 53 
 54                 {"id":20,"name":'20',"pro":'ssssss2',"children":[
 55                 {"id":21,"name":'21',"pro":'sdsd1'},
 56                 {"id":22,"name":'22',"pro":'sdsd2'},
 57                 {"id":23,"name":'23',"pro":'sdsd3'}]},
 58 
 59                 {"id":30,"name":'30',"pro":'ssssss3',"children":[
 60                 {"id":31,"name":'31',"pro":'sdsd1'},
 61                 {"id":32,"name":'32',"pro":'sdsd2'},
 62                 {"id":33,"name":'33',"pro":'sdsd3'}]}
 63         ];
 64 
 65       
 66         //初始化数据表格
 67         function fInitDatagrid(){
 68 
 69             $('#i_dg').treegrid({    
 70                 data:jTestData3,
 71                 rownumbers:true,
 72                 idField:'id',    
 73                 treeField:'name',    
 74                 columns:[[    
 75                     {title:'Task Name',field:'name',width:180},    
 76                     {field:'pro',title:'pro',width:160,align:'right'} 
 77                 ]],
 78                 onLoadSuccess:function(row,data){
 79                     $('#i_dg').treegrid("collapseAll");
 80                     $('#i_dg').treegrid("select",data[0].id);//通过id进行选择
 81                     //$("#i_dg").treegrid("expand",data[0].id);
 82                 }    
 83             });  
 84 
 85         }
 86 
 87         
 88         //根据node的Id获取当前节点的子一级节点
 89         function fSelectChildNode(sNodeId){
 90             var aChild=[];
 91             var aChildren=$("#i_dg").treegrid("getChildren",sNodeId);//获取所有子节点
 92             var    nChildLevel=$("#i_dg").treegrid("getLevel",sNodeId)+1;//获取子一级节点的节点等级
 93             
 94             if(aChildren.length>0){
 95                 for (var i = 0; i < aChildren.length; i++) {
 96                     
 97                     if($("#i_dg").treegrid("getLevel",aChildren[i].id)==nChildLevel){
 98                         aChild.push(aChildren[i]);
 99                     }
100 
101                 }
102             }
103             return aChild;
104         }
105 
106         
107         //获取当前节点的所有兄弟节点
108         function fSelectSiblingNode(sNodeId){
109 
110             if($("#i_dg").treegrid("getLevel",sNodeId)==1){//如果当前节点是根节点
111                 return $("#i_dg").treegrid("getRoots");
112             }
113 
114             var oPerNode= $("#i_dg").treegrid("getParent",sNodeId);//获取当前节点的父级节点
115             //var aSiblingNode =fSelectChildNode(oPerNode.id);//获取当前节点的兄弟节点
116             return fSelectChildNode(oPerNode.id);
117         }
118 
119         
120         //获取当前节点的下一个节点（无论该节点和下一个节点是否包含子节点）
121         var oNextNode=null;
122         function fSelectNextNode(sNodeId) {
123             var aSiblingNode=fSelectSiblingNode(sNodeId);
124 
125             for(var i=0; i<aSiblingNode.length;i++){
126                 if (aSiblingNode[i].id==sNodeId && i < aSiblingNode.length-1) {//不是兄弟节点的最后一个节点
127                     var k=i+1;
128                     //return aSiblingNode[k];//这里return返回，只是结束本次循环，arguments.callee(perNode.id)这个调用几次（递归执行几次）return完了之后，会接着执行上次没有执行完的for循环
129                     oNextNode = aSiblingNode[k];
130                     break;
131                 }else if(aSiblingNode[i].id==sNodeId && i == aSiblingNode.length-1){//如果当前节点是最后一个节点，需要跳出返回父节点的下一个节点
132                     if($("#i_dg").treegrid("getLevel",sNodeId)>1){//当前节点不是根节点
133                         var oPerNode= $("#i_dg").treegrid("getParent",sNodeId);//获取当前节点的父节点
134                         arguments.callee(oPerNode.id);
135                     }else{//如果是根节点的最后一个，执行完了
136                         return null;
137                     }
138                 }
139                 /*else{
140                     continue;
141                 }*/
142             }
143 
144         }
145 
146 
147         //选中下一个节点
148         var aNextChildren;
149         function fSelectNode(oRowData,bFlag){
150             
151             if(!oRowData){
152                 return false;
153             }
154 
155             if(bFlag){
156                 if($("#i_dg").treegrid("getRoots")[0].id!=oRowData.id && $("#i_dg").treegrid("getLevel",oRowData.id)>1){
157                     fSelectNextNode(oRowData.id);
158                     oRowData=oNextNode;
159                 }
160             }
161             aNextChildren = fSelectChildNode(oRowData.id);
162             if(aNextChildren.length > 0){//如果当前节点有子节点
163                 //$('#i_dg').treegrid("select",oRowData.id);
164                 $("#i_dg").treegrid("expand",oRowData.id);
165 
166                 //$('#i_dg').treegrid("select",aNextChildren[0].id);
167                 arguments.callee(aNextChildren[0]);
168                         
169                 }else{//如果当前节点没有子节点
170                     $('#i_dg').treegrid("select",oRowData.id);
171                     
172                 }
173        
174         }    
175 
176         //初始化滑动条
177         function fInitSlider(){
178             $('#i_slider').slider({    
179                 mode: 'h',  
180                 width:800,
181                 height:200,
182                 showTip:true,
183                 min:0,
184                 max:400,
185                 value:0,
186                 step:10,
187                 tipFormatter: function(value){    
188                     return value + '%';    
189                 },
190                 onChange:function(){fSelectNode($("#i_dg").treegrid("getSelected"),true);}
191             }); 
192         }
193 
194         //设置Timer
195         function fSetTimer(){
196             var terval=setInterval(function(){
197                 var nValue=$("#i_slider").slider("getValue");
198                 $("#i_slider").slider("setValue",nValue + 10);
199             },1000);
200         }
201 
202 
203         $(function(){
204 
205            fInitDatagrid();
206            fInitSlider();
207            fSetTimer();
208         });
209 
210 </script>
211 
212 <%@ include file='/main/footer.jsp' %>
View Code

上边注释很全，请多多指教。

posted @ 2015-04-24 18:02  JsonID  阅读(2038)  评论(0)  编辑  收藏  举报