Layui 多表合并记录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
$.post("@Url.Action("SelectIndex")", function (data) {
           var nList = [];
           if (data.code == "1") {
               var res = data.data[0];
               var res2 = data.data[1];
               layer.msg(data.msg);
               let arr = res;
               for (var i = 0; i < arr.length; i++) {
                   if (nList.length == 0) {
                       nList.push({
                           FirstLeveLIndicatorsID: arr[i].FirstLeveLIndicatorsID,
                           data: [arr[i]]
                       })
                   } else {
                       var index = nList.findIndex(item => item.FirstLeveLIndicatorsID == arr[i].FirstLeveLIndicatorsID);
                       if (index >= 0) {
                           nList[index].data.push(arr[i])
                       } else {
                           nList.push({
                               FirstLeveLIndicatorsID: arr[i].FirstLeveLIndicatorsID,
                               data: [arr[i]]
                           })
                       }
                   }
               }
               LoadTableHeader(res2, nList);
               LoadTable(res,res2, nList);
           } else {
               layer.msg(data.msg);
           }
       }, "json");
 
       function LoadTableHeader(res, list2) {
           $("#tab-title").append(`<li class='layui-this'>全部</li>`);
           for (var i = 0; i < res.length; i++) {
               for (var j = 0; j < list2.length; j++) {
                   if (res[i].FirstLeveLIndicatorsID == list2[j].FirstLeveLIndicatorsID) {
                       var value = res[i].FirstLeveLIndicators;
                       $("#tab-title").append(`<li>${value}</li>`);
                       break;
                   }
               }
           }
           layer.close(index);
       }
 
       function LoadTable(res,res2,list2)
       {
           ToTable(res, 0);
           for (var i = 0; i < res2.length; i++)
           {
               for (var j = 0; j < list2.length; j++)
               {
                   if (res2[i].FirstLeveLIndicatorsID == list2[j].FirstLeveLIndicatorsID)
                   {    
                       ToTable(list2[j].data, i+1);//i+1 记录到第二个<br>               break;
                   }
               }
           }  
       }
 
       function ToTable(data,i)
       {
           var isshow = 'layui-show';
           i != 0 ? isshow = "" : isshow;
           $("#tab-content").append(`<div class="layui-tab-item ${isshow}"><table id ="table${i}" lay-filter="table${i}" data-name="table${i}" ></table></div>`);
           table.render({
               elem: `#table${i}`,
               data: data,
               page: true,
               limit: 100,
               limits: [50, 100, 150, 200, 500],
               toolbar: true,
               defaultToolbar: ['filter', 'print'],
               cols: cols
               , response: {
                   statusName: 'code' //规定数据状态的字段名称,默认:code
                   , statusCode: 1 //规定成功的状态码,默认:0
                   , msgName: 'msg' //规定状态信息的字段名称,默认:msg
                   , dataName: 'data' //规定数据列表的字段名称,默认:data
               },
               done: function (data) {
                   merge(data, i)
               }
           });
       }

  

1
2
3
4
5
6
7
8
9
10
11
<div class="layui-card-body">
                     <div class="layui-tab layui-tab-card">
                         <ul class="layui-tab-title" id="tab-title">
               
                         </ul>
 
                         <div class="layui-tab-content" id="tab-content">
 
                         </div>
                     </div>
                 </div>

  

 

 

 

posted @   孤海飞雁  阅读(106)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期(2025年3.1-3.9)
点击右上角即可分享
微信分享提示