这两天用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‘ %>
上边注释很全，请多多指教。
时间： 2024-10-18 14:54:44