码迷,mamicode.com
首页 > 编程语言 > 详细

如何用easyui+JAVA 实现动态拼凑datagrid表格(续)

时间:2014-09-07 09:46:14      阅读:516      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   os   io   java   ar   strong   

前面一段时间写了一篇文章:

如何用easyui+JAVA 实现动态拼凑datagrid表格

这篇文章的话,效果是可以实现,但是经过我反复试验,还是存在一些问题的。

今天这篇文章就是向大家介绍下如何避免和解决这些问题。

问题如下:

bubuko.com,布布扣

这个TEMP值其实就是上面文章提到的z1,z2,z3,z4的值,也就是说,每次进行each循环,都会查出不同的值,并返回,但是事实并不是这样的

这个TEMP返回的是EACH循环以后的最后一次的值。

记住,EACH循环本身就是一个封闭的,不会循环一次返回一个值,而是让前面的值被后面的值覆盖掉了!,所以查出来的结果都一样了,怎么样避免这种情况的发生呢?

我先放出整个代码块,然后我们再一步一步分析并解决问题。

bubuko.com,布布扣
  1 using("sable.easyui");
  2 
  3 var gv=$("#dg");
  4 var today=new Date();
  5 
  6 //动态生成列
  7 var dynamicCols=[];
  8 var dynamicItems=[];
  9 var dynamicItemsAfter=[];
 10 var dynamicItemsEnd=[];
 11 
 12 //设置时间
 13 function GetDateStr(AddDayCount) {
 14     var dd = new Date();
 15     dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期
 16     var y = dd.getFullYear();
 17     var m = dd.getMonth()+1;//获取当前月份的日期
 18     var d = dd.getDate();
 19     return y+"-"+m+"-"+d;
 20 }
 21 
 22 //以开始时间为基准设置时间
 23 
 24 function GetDateStrA(AddDayCount) {
 25     
 26     //得到开始时间
 27     
 28     var dd = new Date($("#StartTime").datebox(‘getValue‘));
 29     dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期
 30     var y = dd.getFullYear();
 31     var m = dd.getMonth()+1;//获取当前月份的日期
 32     var d = dd.getDate();
 33     return y+"-"+m+"-"+d;
 34 }
 35 
 36 $(function(){
 37     $("#StartTime").datebox(‘setValue‘,GetDateStr(-1));
 38     $("#EndTime").datebox(‘setValue‘,GetDateStr(0));
 39     
 40     //绑定空数据
 41     gv.datagrid( "dataBind" ,
 42             {
 43                 autoHeight : 46 ,
 44                 datas      : [],
 45                 striped:true,
 46                 pagination : true,
 47                 autoRowHeight:false
 48                 
 49             });
 50     //绑定空列
 51     gv.datagrid({
 52         columns:[[
 53                   {title:‘时间‘,width:150,sortable:true},
 54                   {title:‘站点1‘,width:150,sortable:true},
 55                   {title:‘站点2‘,width:150,sortable:true},
 56                   {title:‘站点3‘,width:500,sortable:true},
 57                   ]]
 58         
 59     });
 60     
 61 });
 62 
 63 //列元素(动态)
 64 //序号
 65 var stcd={
 66            field: ‘Stcd‘,
 67            title: ‘序号‘,
 68           // width: 150,
 69            rowspan:3,
 70            sortable:true
 71 }
 72 
 73 //站名
 74 var stnm={
 75        field: ‘Stnm‘,
 76        title: ‘站名‘,
 77       // width: 150,
 78        rowspan:3,
 79        sortable:true
 80 }
 81 
 82 
 83 
 84 
 85 
 86 //平均值
 87 var avg={
 88         title:‘平均值‘,
 89         //width:500,
 90         colspan:2
 91 }
 92 
 93 //库水位
 94 var rz={
 95     title:‘库水位‘,
 96     //width:150 /*PS:动态列中不适宜固定宽度,其他同样的*/
 97 }
 98 
 99 //库容
100 var rv={
101         title:‘库容‘,
102         width:150
103 }
104 
105 
106 //查询按钮
107 $("#btnSearch").click(function(){
108     
109 
110     //得到开始日期和结束日期之间的天数之差
111     var ipt1=$("#StartTime").datebox(‘getValue‘);
112     var ipt2=$("#EndTime").datebox(‘getValue‘);
113     
114     var arr1 = ipt1.split("-"); 
115     var arr2 = ipt2.split("-"); 
116     
117     var dt1 = new Date(); 
118     dt1.setFullYear(arr1[0]); 
119     dt1.setMonth(arr1[1] - 1); 
120     dt1.setDate(arr1[2]);  
121     var dt2 = new Date(); 
122     dt2.setFullYear(arr2[0]);  
123     dt2.setMonth(arr2[1] - 1); 
124     dt2.setDate(arr2[2]);  
125     var dif = dt2.getTime() - dt1.getTime(); 
126     var days = dif / (24 * 60 * 60 * 1000); 
127     
128     
129     
130     //再次初始化,避免数组的堆积
131      dynamicCols=[];
132      dynamicItems=[];
133      dynamicItemsAfter=[];
134      dynamicItemsEnd=[];
135 
136     
137     //前部
138     dynamicItems.push(stcd);
139     dynamicItems.push(stnm);
140     
141     //查询条件数据
142     var datas={
143             "Stcd":$("#stnmCombo").combobox(‘getValue‘),
144             "StartTime":$("#StartTime").datebox(‘getValue‘),
145             "EndTime":$("#EndTime").datebox(‘getValue‘)            
146     }
147     //查询具体的数据
148     formLoader.load("querydata",datas,function(s){
149         
150         //空白SPAN
151         var blank={
152                 title:‘ ‘,
153                 colspan:days*2+4 //动态得到COLSPAN的跨度,根据天数
154                 
155         }
156         dynamicItems.push(blank);
157         
158         //动态载入库水位数据
159 
160 
161         
162            
163             
164             //创建一个新的存储MAP中的键的东西(表头Field) -水位
165             var index=[];
166             $.each(s[0].DynamicList, function(i,option){
167                 index.push(i);
168                 
169             });
170           
171             //创建一个新的存储MAP中的键的东西(表头Field) -流量
172             var indexQ=[];
173             $.each(s[0].DynamicListQ, function(i,option){
174                 indexQ.push(i);
175                 
176             });
177             
178            
179             
180             
181            //拼凑表头
182             $.each(s[0].DynamicList, function(i,option){
183                 
184                 
185                  //详细数据
186                    var k=0; //设定一个值,匹配Z0,Z1,Z2。。。。。
187                    
188                    var d = new Date($("#StartTime").datebox(‘getValue‘));
189                    do{
190                        //alert(i.substring(1));
191                        d.setDate(d.getDate()+(parseInt(i.substring(1)))/2); //转换成INT类型的
192                        
193                        var RealDate=d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate(); //动态得到日期值
194                        
195                        var details2={
196                            title:RealDate,
197                        //    width:150,
198                            colspan:2
199                                
200                        }
201                        
202                        dynamicItemsAfter.push(details2);
203                       k+=2;
204                       break; //这里因为会执行i此结果 ,所以 BREAK掉
205                    }while(days>k)
206 
207             });
208             
209              //把水位和流量合并成一个对象
210             var extend=function(o,n,override){
211                    for(var p in n)
212                    {
213                        //alert(n[p]);
214                        
215                        if(n.hasOwnProperty(p) && (!o.hasOwnProperty(p) || override))
216                        {
217                            
218                            o[p]=n[p]; 
219                        }
220                            
221                    }
222                        
223                 };
224             extend(s[0].DynamicList,s[0].DynamicListQ);
225             
226             //表头排序
227             /*表头排序的作用是将2个不相干的MAP组合到一起,然后按照第二个数字的大小进行冒泡排序*/
228             var aa=Object.keys(s[0].DynamicList);
229             var bb=[];
230             
231 //            for(var j=0;j<aa.length;j++)
232 //            {
233 //               var temp;
234 //
235 //               if(j+1==aa.length)
236 //               {
237 //                   break;
238 //               }
239 //               
240 ////               alert(aa[j]);
241 ////               alert(aa[j+1]);
242 //               
243 //               if(Number(aa[j].substring(1))>Number(aa[j+1].substring(1)))
244 //               {
245 //
246 //                   temp=aa[j];
247 //                   aa[j]=aa[j+1];
248 //                   aa[j+1]=temp;
249 //               }
250 //                
251 //
252 //            }
253             
254             //进行排序,因为是从第二个字母开始比较大小的,所以截取字符串长度
255             aa.sort(function(a,b){return Number(a.substring(1))>Number(b.substring(1))?1:-1});
256             //alert(aa);
257           //alert(aa);
258             //alert(aa.sortable());
259             //再次PUSH表头列
260             var indexAll=[];
261             $.each(s[0].DynamicList, function(i,option){
262                 indexAll.push(i);
263             });
264             
265             
266             //alert(aa);
267             //alert(Object.Keys());
268             var z=Object.keys(s[0].DynamicList);
269             var q=Object.keys(s[0].DynamicListQ);
270             
271             //这里的s指的是下标0,1,2,3,m指的是对应的z0,q1,z2,q3等等
272             $(aa).each(function(s,m){
273                 
274                    for(var j=0;j<index.length;j++)
275                    {
276 //                       if(j<z.length)
277 //                       {
278                           if(m==index[j])
279                         {
280                            //alert(index[j]);
281                            var mk=index[j]; 
282                            
283                             //库水位
284                            rz={
285                             title:‘水位‘,
286                             field:"DynamicList"+mk, //切记,这里的field不能相同,每次循环都需要创建一个新的FIELD
287                             formatter:function(value,row,index){
288                                 //alert(row);
289                                 //return value.z1; //因为这是一个对象DynamicList,所以返回对象的值
290                                 //alert(value);
291 
292                                 
293                             var temp=[];
294                             
295                             var count=0;
296                             var final;
297                             $.each(row.DynamicList,function(i,option){
298                                 
299                                     temp[i]=bibao(option);
300                                 
301 
302                                     });
303                             
304                             //alert(temp["z0"]());
305                             return temp[mk]();
306                             //return temp;
307                             }    
308                         }
309                            dynamicItemsEnd.push(rz);
310                         }
311                            if(m==indexQ[j])
312                             {
313                                
314                             
315                            var mk2=indexQ[j];
316                            
317                            //流量(动态值)
318                             rv={
319                                     title:‘流量‘,
320                                     field:"DynamicListQ"+mk2,
321                                     formatter:function(value,row,index)
322                                     {
323                                         var temp2=[];
324                                         $.each(row.DynamicListQ,function(i,option){
325                                                 //alert(option);
326 
327                                             temp2[i]=bibao(option); //闭包法则
328                                                 
329                                             });
330                                         //alert(temp2[mk2]());
331                                         return temp2[mk2]();
332                                     }    
333                             }
334                             dynamicItemsEnd.push(rv);
335                             }
336                           
337                           
338                           
339                           
340                        }
341                 
342             });
343             
344     
345 
346              //库水位(平均)
347            var rzAvg={
348                    title:‘水位‘,
349                    field:"AvgRz"}
350            
351              //流量(平均)
352            var rvAvg={
353                    title:‘流量‘,
354                    field:"AvgQ",
355                    //width:500
356                    formatter:function(value,row,index)
357                    {
358                        if(value=="NaN")
359                        {
360                            return "-";
361                        }
362                        else
363                        {
364                            return value;
365                        }
366                    }
367            }
368            
369             dynamicItemsAfter.push(avg);
370             dynamicItemsEnd.push(rzAvg);
371             dynamicItemsEnd.push(rvAvg);
372             
373         dynamicCols.push(dynamicItems);
374         dynamicCols.push(dynamicItemsAfter);
375         dynamicCols.push(dynamicItemsEnd);
376         
377         //绑定动态列
378         gv.datagrid({
379             columns:dynamicCols,
380     
381         });      
382         
383         //获取动态表头
384         var opts = $(‘#dg‘).datagrid(‘getColumnFields‘);
385         colName_=[]; //全局变量
386         
387         var count=0.5; 
388         var r = /^[-+]?\d*$/; //判断是否为整数
389         
390         for(i=0;i<opts.length;i++)
391         {
392             
393             
394             var col = $(‘#dg‘).datagrid( "getColumnOption" , opts[i] );
395             
396             var title=col.title;
397             
398             if(i>=2)
399             {
400                 //奇数列必须和偶数列的值相同,也就是说水位和库容值相同。比如1月水位,1月库容,2月水位,2月库容。
401                 //如果i的值为奇数的话,那么比如使奇数列的值和上一个偶数列的值相同,也就是减一。
402                 //每次增量改为0.5,也就是2分之一,可以有效避免数字退后。
403                 //因为是从0开始计算的,所以下面的并不是i-3和i-4而是i-2,i-3
404                 
405 
406                 //偶数列
407                 if(r.test(count)==true)
408                 {
409                     if((i-2)%2==0)
410                     {    
411                         
412                     title=col.title+"("+GetDateStrA(i-1-count)+")";
413                     
414                     }
415                     else if((i-2)%2!=0)
416                     {
417                         title=col.title+"("+GetDateStrA(i-2-count)+")";
418                         
419                     }
420                 }
421                 //奇数列
422                 else
423                 {
424                     if((i-2)%2==0)
425                     {    
426                         
427                     title=col.title+"("+GetDateStrA(i-1-count-0.5)+")";
428                     
429                     }
430                     else if((i-2)%2!=0)
431                     {
432                         title=col.title+"("+GetDateStrA(i-2-count-0.5)+")";
433                         
434                     }    
435                     
436                 }
437 
438                 count+=0.5;
439                 //最后一列算作平均值,不参与计算
440                 if(i==opts.length-2||i==opts.length-1)
441                 {
442                     title=col.title+"(平均值)";
443                 }
444                 
445             }
446             
447             colName_.push(title);
448         }
449         
450         gv.datagrid( "dataBind" ,
451                 {
452                     datas      : s,
453                     striped:true,
454                     pagination : true,
455                     pageSize:15
456                     
457                 });
458            
459         
460         
461     });
462     
463     //重置大小,动态重置
464     if(days>11)
465     {
466         var realwidth=1700+125*(days-11)
467         gv.datagrid("resize",{width:realwidth});
468     }
469     else
470     {
471         gv.datagrid("resize",{width:1360});
472     }
473     
474     
475 });
476 
477 //导出excel
478 $("#export").click(function(){
479     
480     var url= colName_;
481     location.href = context.RootPath + context.ControllerPath + "/exportexcel?StartTime="+$("#StartTime").datebox(‘getValue‘)+"&EndTime="+$("#EndTime").datebox(‘getValue‘)+"&Stcd="+$("#stnmCombo").combobox(‘getValue‘)+"&ColName="+encodeURI(encodeURI(url));
482     
483 });
484 
485 
486 //得到测站编码
487 var dataCount=0;
488 formLoader.load("getstnm","",function(data){
489     
490     data.unshift({Stnm : "全部" , Stcd : "" });
491     $("#stnmCombo").combobox({
492         data:data,
493         valueField:"Stcd",
494         textField:"Stnm",
495         editable:false,
496         //panelHeight:"auto",
497         
498         onLoadSuccess:function()
499         {
500             //alert(‘1‘);
501             //alert(data[0].Stcd);
502             $("#stnmCombo").combobox(‘setValue‘,data[0].Stcd);
503             dataCount=data.length;
504         
505         },
506         onShowPanel:function()
507         {
508             if(dataCount.length>10)
509             {
510                 $(this).combobox(‘panel‘).height(251);
511                 
512             }    
513             
514         }
515     });
516 });
517 
518 //闭包效应
519 function bibao(a){
520     return function (){
521         return a;
522     }
523 }
riverdayreport.js

上面的是整个JS代码块,大家看得可能有点头晕,我们下面就来一步一步分析。

先放张效果图吧。

bubuko.com,布布扣

上面的是正确的结果,每一天的值都是不同的。

我们在解决这个值的显示问题的时候还要明白一个隐含的问题:每一天不止有水位,还有库容。

水位和库容在Json对象里面都是按照z0,z1,z2...q0,q1,q2这样的键值对的形式存在的,其中z开头的为水位,q开头的为库容。

我这里拿的是另一个JS跟你们讲解的,其实都一样啦,大家明白原理就行了。

		    //创建一个新的存储MAP中的键的东西(表头Field) -水位
		    var index=[];
		    $.each(s[0].DynamicList, function(i,option){
		    	index.push(i);
		    	
		    });
		  
		    //创建一个新的存储MAP中的键的东西(表头Field) -流量
		    var indexQ=[];
		    $.each(s[0].DynamicListQ, function(i,option){
		    	indexQ.push(i);
		    	
		    });

  上面的代码其实是得到水位或者流量的index,即键值对中的键,然后把这些键存到2个数组里面去。

下面的代码是单独进行表头的拼接,唯一需要注意的是,一个日期跨度为2列,包括了水位和库容。

bubuko.com,布布扣
           //拼凑表头
            $.each(s[0].DynamicList, function(i,option){
                
                
                 //详细数据
                   var k=0; //设定一个值,匹配Z0,Z1,Z2。。。。。
                   
                   var d = new Date($("#StartTime").datebox(‘getValue‘));
                   do{
                       //alert(i.substring(1));
                       d.setDate(d.getDate()+(parseInt(i.substring(1)))/2); //转换成INT类型的
                       
                       var RealDate=d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate(); //动态得到日期值
                       
                       var details2={
                           title:RealDate,
                       //    width:150,
                           colspan:2
                               
                       }
                       
                       dynamicItemsAfter.push(details2);
                      k+=2;
                      break; //这里因为会执行i此结果 ,所以 BREAK掉
                   }while(days>k)

            });
View Code

因为后面要循环PUSH,把水位或者流量给PUSH到数组里面去,然后显示动态列,所以,这里我们合并一下2个动态列

			 //把水位和流量合并成一个对象
		    var extend=function(o,n,override){
		    	   for(var p in n)
		    	   {
		    		   //alert(n[p]);
		    		   
		    		   if(n.hasOwnProperty(p) && (!o.hasOwnProperty(p) || override))
		    		   {
		    			   
		    			   o[p]=n[p]; 
		    		   }
		    			   
		    	   }
		    		   
		    	};
		    extend(s[0].DynamicList,s[0].DynamicListQ);

  这里用到了原生态的EXTEND方法去合并。

现在就变成了z0~zn,q0~qn

这显然不是我们想要的结果,因为正确的顺序其实是z0,q0,z1,q1,那么这里我们就需要进行排序

 aa.sort(function(a,b){return Number(a.substring(1))>Number(b.substring(1))?1:-1});

  排序完了,一半的工作就进行完了。

这里还用到了闭包,就是在EACH外面访问EACH里面的返回值。

具体代码如下:

//闭包效应
function bibao(a){
    return function (){
        return a;
    }
}

  既然排序已经完成了,我们就可以一路下来放心的EACH了。

下面的代码用到了另一种EACH,其中参数m为z0,q0,z1,q1这些键。

唯一需要注意的是,每次的FIELD都是不同的,因为FIELD有唯一性。

在每次formatter里面的值是从row.对象 里面取出来的哦,这点要注意。

bubuko.com,布布扣
//这里的s指的是下标0,1,2,3,m指的是对应的z0,q1,z2,q3等等
            $(aa).each(function(s,m){
                
                   for(var j=0;j<index.length;j++)
                   {
//                       if(j<z.length)
//                       {
                          if(m==index[j])
                        {
                           //alert(index[j]);
                           var mk=index[j]; 
                           
                            //库水位
                           rz={
                            title:‘水位‘,
                            field:"DynamicList"+mk, //切记,这里的field不能相同,每次循环都需要创建一个新的FIELD
                            formatter:function(value,row,index){
                                //alert(row);
                                //return value.z1; //因为这是一个对象DynamicList,所以返回对象的值
                                //alert(value);

                                
                            var temp=[];
                            
                            var count=0;
                            var final;
                            $.each(row.DynamicList,function(i,option){
                                
                                    temp[i]=bibao(option);
                                

                                    });
                            
                            //alert(temp["z0"]());
                            return temp[mk]();
                            //return temp;
                            }    
                        }
                           dynamicItemsEnd.push(rz);
                        }
                           if(m==indexQ[j])
                            {
                               
                            
                           var mk2=indexQ[j];
                           
                           //流量(动态值)
                            rv={
                                    title:‘流量‘,
                                    field:"DynamicListQ"+mk2,
                                    formatter:function(value,row,index)
                                    {
                                        var temp2=[];
                                        $.each(row.DynamicListQ,function(i,option){
                                                //alert(option);

                                            temp2[i]=bibao(option); //闭包法则
                                                
                                            });
                                        //alert(temp2[mk2]());
                                        return temp2[mk2]();
                                    }    
                            }
                            dynamicItemsEnd.push(rv);
                            }
                          
                          
                          
                          
                       }
                
            });
View Code

 

下面再个大家放一个小小的福利,就是如何做多级菜单,我这里只做到了3级,这个多级菜单的话,其实大家并不陌生,关键是我这个多级菜单是专门为公司做的,

也就是说有些方法在网上很难找到答案。

废话不多,开搞。

bubuko.com,布布扣
  1     $.each(model.NavigateData,function(index,value)
  2         {
  3             if( $.trim(value.Text) =="浏阳山洪灾害预警系统")
  4             {
  5                 mainid = value.Value;
  6                 $(‘.main_head_left‘).css(‘background-image‘,‘url( ../interface/view/default/core/public/skin/default/images/core_index_main/logo.jpg)‘);
  7                 $(‘.logo2‘).css(‘left‘,‘660px‘);
  8                 menulist.push(mainid);
  9             }
 10         });
 11         //一级菜单
 12         $.each(model.NavigateData,function(index,value)
 13         {
 14             if( $.trim(value.ParentValue) == mainid)
 15             {
 16                 var vl = value.Value; 
 17                 //mainmenu = mainmenu + "<td><a href=‘#‘ class=‘mymenu‘ id=‘menu"+k+"‘ name=‘"+value.Value+"‘>"+value.Text+"</a>&nbsp;&nbsp;</td>";
 18                 mainmenu = mainmenu + "<li><a href=‘#‘  id=‘menu"+k+"‘ name=‘"+value.Value+"‘>"+value.Text+"</a></li>";
 19                 concatDiv(vl,k);
 20                 k++;
 21                 menulist.push(vl);
 22             }
 23         });
 24         //添加主菜单
 25         $(‘#tbmenu‘).append(mainmenu);
 26         //二级菜单
 27         function concatDiv(vl,k)
 28         {
 29             var count=0;
 30             var divStr = "<div id=‘mm"+k+"‘ style=‘width:140px;‘>";
 31             $.each(model.NavigateData,function(index,value)
 32             {
 33                 var vl2=value.Value;
 34                 if(value.ParentValue == vl)
 35                 {
 36                     //alert(vl);
 37                     //menulist.push(value.Value);
 38                     var link = value.Link;
 39                     divStr = divStr + "<div id=‘"+link+"‘ name=‘"+value.Value+"‘ onclick=‘setUrl(this);‘>"+"<span>"+value.Text+"</span>";
 40                     
 41                     
 42                     
 43                     //添加三级菜单,原理就是先找出对应的二级菜单,然后再进行遍历
 44                     //divStr+="<div>";
 45                     //tempMenu(value.Value,k);
 46                     //把子菜单PUSH到数组里去
 47                     //SAME数组用来存放有三级菜单父级ID的数组。
 48                     var s=[];
 49                     var same=[];
 50                     $.each(model.NavigateData,function(index,value){
 51                         var vl=value.Value;
 52                         var vlparent=value.ParentValue;
 53                         var link =value.Link;
 54                         
 55                         if(vlparent==vl2)
 56                         {
 57                             //alert("parent:"+vlparent+",vl2:"+vl2);
 58                             
 59                             //alert(value.Value);
 60                             
 61                             var div=$("div[name=‘"+vlparent+"‘] .menu-text");
 62                             var divSub=$("div[name=‘"+vl+"‘]");
 63                             //divStr = divStr + "<div id=‘"+link+"‘ name=‘"+value.Value+"‘ onclick=‘setUrl(this);‘>"+"<span>"+value.Text+"</div>";
 64                             s.push("<div id=‘"+link+"‘ name=‘"+value.Value+"‘ onclick=‘setUrl(this);‘>"+"<span>"+value.Text+"</div>");
 65                             same.push(vlparent);
 66                             //divStr+="<div><div>1</div><div>2</div></div>";
 67                             //divStr+=divStrSub;
 68                                                                                     
 69                         }
 70 
 71                         
 72                     });
 73                     
 74                     //去除相同的元素
 75                     
 76                     function unique(array) {
 77                         var ret = [], record = {},it,tmp,obj = "__object__", bak = [],i,len;
 78                         var type ={
 79                             "number": function(n) { return "__number__" + n; },
 80                             "string": function(n) { return "__string__" + n; },
 81                             "boolean": function(n) { return "__boolean__" + n; },
 82                             "undefined": function(n) { return "__undefined__"; },
 83                             "object": function(n) {
 84                                 return n === null ? "__null__" : obj in n ? n[obj] : ( n[obj] = obj + bak.push(n) );
 85                             }
 86                         };
 87                         for (i = 0, len = array.length; i < len; i++) {
 88                             it = array[i]; tmp = type[typeof it](it);
 89                             if (!(tmp in record)) { ret.push(it); record[tmp] = true; }
 90                         }
 91                         for (i = 0, len = bak.length; i < len; delete bak[i++][obj]) { }
 92                         return ret;
 93                     };
 94                     var uniq=unique(same);
 95                     
 96                     //判断是否为3级菜单的元素
 97                     $.each(model.NavigateData,function(index,value){
 98                         var vl=value.Value;
 99                         var vlparent=value.ParentValue;
100                         var link =value.Link;
101                         
102                         if(vlparent==uniq)
103                         {
104                             divStr+="<div>";
105                             divStr+=s.join(‘‘); //把数组里的数据全部加进来
106                             divStr+="</div>";
107                                                                                     
108                         }
109 
110                         
111                     });
112                     
113                     
114                     //alert(s);
115                     //divStr+="</div>";
116                     
117 
118                     
119 //                    
120 //                    if(value.Value=="b15fa5ba-5a73-4792-a65a-5bcf2e8a20ec")
121 //                    {
122 //                        divStr+="<div><div>1</div><div>2</div></div>";
123 //                    }
124                     
125                     divStr+="</div>";
126 
127                     //tempMenu(value.Value);
128                 }
129                 
130                 
131 
132             });
133             divStr = divStr+"</div>";
134             $(‘#main‘).append(divStr);
135         }
136 
137         //添加菜单项
138         for(var i=0;i<k;i++)
139         {
140             $(‘#menu‘+i).menubutton({menu:‘#mm‘+i});
141 
142         }
多级带单.js

大家又头晕了吧?容我慢慢道来,

这种多级菜单并不是通过ul li来实现的,而是通过div来实现的。

easyui有一个方法叫做menubutton,可以添加二级菜单

		//添加菜单项
		for(var i=0;i<k;i++)
		{
			$(‘#menu‘+i).menubutton({menu:‘#mm‘+i});

		}

 其中的model.NavigateData里面存储的是如下JSON

 

bubuko.com,布布扣

 

大家看到了吧?就是所有的菜单项的数据,我们需要的工作是提取有效的东西从里面。

具体怎么实现3级菜单上面都写了,就是在下图箭头所指的地方字符串拼接DIV

bubuko.com,布布扣

 

 

但是这里有一个难点,就是每次拼接出来的都是一个一个的整体,而我每个三级菜单其实是包含在一个大的DIV下面的。如下图

 

bubuko.com,布布扣

大家看到了吧,测试菜单2,3,4其实是在一个大的DIV里面的,而这个大的DIV只循环了一次,小的内容迭代了3次,这个如何实现的呢?

上面代码写了注释,我简单的说一下,其实很简单,就是把里面的三项的DIV都迭代出来放到数组里面去,然后再把他们的父亲节点的ID放入数组,由于迭代次数有多次,所以数组里有多个一样的东西,所以我们需要去掉相同的,然后再迭代判断父亲ID是否等于数组里面的ID,如果相等的话,把里面的数据拼接字符串,是不是很简单呢?

就说到这里了,最后:

祝大家中秋节快乐!!!

如何用easyui+JAVA 实现动态拼凑datagrid表格(续)

标签:style   blog   http   color   os   io   java   ar   strong   

原文地址:http://www.cnblogs.com/kmsfan/p/3960104.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!