如何用easyui+JAVA 實現動態拼湊datagrid表格(續)

前面一段時間寫了一篇文章：

如何用easyui+JAVA 實現動態拼湊datagrid表格

這篇文章的話，效果是能夠實現，可是通過我反覆試驗，仍是存在一些問題的。

今天這篇文章就是向你們介紹下如何避免和解決這些問題。

問題以下：

這個TEMP值其實就是上面文章提到的z1,z2,z3,z4的值，也就是說，每次進行each循環，都會查出不一樣的值，並返回，可是事實並非這樣的

這個TEMP返回的是EACH循環之後的最後一次的值。

記住，EACH循環自己就是一個封閉的，不會循環一次返回一個值，而是讓前面的值被後面的值覆蓋掉了！，因此查出來的結果都同樣了，怎麼樣避免這種狀況的發生呢？

我先放出整個代碼塊，而後咱們再一步一步分析並解決問題。

  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代碼塊，你們看得可能有點頭暈，咱們下面就來一步一步分析。

先放張效果圖吧。

上面的是正確的結果，每一天的值都是不一樣的。

咱們在解決這個值的顯示問題的時候還要明白一個隱含的問題：每一天不止有水位，還有庫容。

水位和庫容在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列，包括了水位和庫容。

           //拼湊表頭
            $.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.對象 裏面取出來的哦，這點要注意。

//這裏的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級，這個多級菜單的話，其實你們並不陌生，關鍵是我這個多級菜單是專門爲公司作的，

也就是說有些方法在網上很難找到答案。

廢話很少，開搞。

  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

 

 

你們看到了吧？就是全部的菜單項的數據，咱們須要的工做是提取有效的東西從裏面。

具體怎麼實現3級菜單上面都寫了，就是在下圖箭頭所指的地方字符串拼接DIV

 

 

可是這裏有一個難點，就是每次拼接出來的都是一個一個的總體，而我每一個三級菜單實際上是包含在一個大的DIV下面的。以下圖

 

你們看到了吧，測試菜單2,3，4實際上是在一個大的DIV裏面的，而這個大的DIV只循環了一次，小的內容迭代了3次，這個如何實現的呢？

上面代碼寫了註釋，我簡單的說一下，其實很簡單，就是把裏面的三項的DIV都迭代出來放到數組裏面去，而後再把他們的父親節點的ID放入數組，因爲迭代次數有屢次，因此數組裏有多個同樣的東西，因此咱們須要去掉相同的，而後再迭代判斷父親ID是否等於數組裏面的ID，若是相等的話，把裏面的數據拼接字符串，是否是很簡單呢？

就說到這裏了，最後：

祝你們中秋節快樂！！！