layui-table表格拼接显示

本文转载自查看原文 2020-10-20 15:42 942 layui学习之路

1 <table id="tasklook_table" lay-filter="tasklook_table" class="layui-table" style="margin: 0px;">
2     <!-- <thead>
3         <tr id="tasklook_thead">
4         </tr>
5     </thead>
6     <tbody id="tasklook_tbody">
7 
8     </tbody> -->
9 </table>

 1 $('#search').on('click', function(){
 2     var wayCode = $("#wayCode").val();
 3     if("" == wayCode) {
 4         layer.alert("请选择考核方案")
 5     }
 6     var orgIds = $('#orgIds').val();
 7     var orgNames = $('#orgNames').val();
 8     var trgNames = $('#trgNames').val();
 9     var targetCodes = $('#targetCodes').val();
10     var json = {};
11     json.wayCode = wayCode;
12     json.orgIds = orgIds;
13     json.targetCodes = targetCodes;
14     var targetCodesArr = targetCodes.split(',');
15     var trgNamesArr = trgNames.split(',');
16     var colsArr = [[
17           {field: 'ORG_ID', title:'机构编号', rowspan: 2, align:'center'}
18           ,{field: 'ORG_NAME', title:'机构名称', rowspan: 2, align:'center'}
19     ]];
20     for(var i = 0; i < targetCodesArr.length; i++) {
21         colsArr[0].push({field: targetCodesArr[i], title: trgNamesArr[i],rowspan: 2, width:'10%',align:'center'})
22     }
23     table.render({
24         elem: '#tasklook_table',
25         url:setter.host+'/getData',
26         cols: colsArr,
27         method:'POST',
28         where:json,
29         contentType:'application/json; charset=utf-8',
30         even: true,
31         height:'full-150',
32         page: true,
33         limits: [5, 7, 10],
34         limit: 5
35       });
36 })

 1 $('#search').on('click', function(){
 2     var wayCode = $("#wayCode").val();
 3     if("" == wayCode) {
 4         layer.alert("请选择考核方案")
 5     }
 6     var orgIds = $('#orgIds').val();
 7     var orgNames = $('#orgNames').val();
 8     var trgNames = $('#trgNames').val();
 9     var targetCodes = $('#targetCodes').val();
10     var json = {};
11     json.wayCode = wayCode;
12     json.orgIds = orgIds;
13     json.targetCodes = targetCodes;
14     var targetCodesArr = targetCodes.split(',');
15     var trgNamesArr = trgNames.split(',');
16 
17     $.ajax({
18         url: setter.host +'/getData',
19         data:JSON.stringify(json),
20         type:"POST",
21         contentType:'application/json; charset=utf-8',
22         success:function(data){
23             var result = JSON.parse(data);
24             $("#tasklook_thead").empty();
25             $("#tasklook_tbody").empty();
26             $("#tasklook_thead").append('<th>机构编号</th><th>机构名称</th>');
27             for(var i = 0; i < targetCodesArr.length; i++) {
28                 $("#tasklook_thead").append('<th>'+trgNamesArr[i]+'</th>');
29             }
30 
31             if(result.count != 0) {
32                 for(var j = 0; j < result.data.length; j++) {
33                     var str = '<tr><td>'+result.data[j].ORG_ID+'</td><td>'+result.data[j].ORG_NAME+'</td>';
34                     var aProps = Object.getOwnPropertyNames(result.data[j]);
35                     for(var m = 0; m < targetCodesArr.length; m++) {
36                         str += '<td>';
37                         if(aProps.indexOf(targetCodesArr[m]) > -1) {
38                             str += result.data[j][targetCodesArr[m]];
39                         }
40                         str += '</td>';
41                     }
42                     str += '</tr>';
43                     $("#tasklook_tbody").append(str)
44                 }
45             }
46         }
47     });
48     
49 })

two

多级表头：

 1 <table id="tasktrack_table" lay-filter="tasktrack_table" class="layui-table" style="margin: 0px;">
 2     <thead id="tasktrack_thead">
 3         <tr id="tasktrack_tr1">
 4         </tr>
 5         <tr id="tasktrack_tr2">
 6         </tr>
 7     </thead>
 8     <tbody id="tasktrack_tbody">
 9 
10     </tbody>
11 </table>

ajax请求方法：

 1 $('#search').on('click', function(){
 2     var wayCode = $("#wayCode").val();
 3     if("" == wayCode) {
 4         layer.alert("请选择考核方案")
 5     }
 6     var orgIds = $('#orgIds').val();
 7     var orgNames = $('#orgNames').val();
 8     var trgNames = $('#trgNames').val();
 9     var targetCodes = $('#targetCodes').val();
10     var json = {};
11     json.wayCode = wayCode;
12     json.orgIds = orgIds;
13     json.targetCodes = targetCodes;
14     var targetCodesArr = targetCodes.split(',');
15     var trgNamesArr = trgNames.split(',');
16 
17     $.ajax({
18         url: setter.host +'/check_plantasktrack/getTasktrackSearchBody',
19         data:JSON.stringify(json),
20         type:"POST",
21         contentType:'application/json; charset=utf-8',
22         success:function(data){
23             var result = JSON.parse(data);
24             if(result.count != 0) {
25                 $("#tasktrack_tr1").empty();
26                 $("#tasktrack_tbody").empty();
27                 $("#tasktrack_tr2").empty();
28                 $("#tasktrack_tr1").append('<th rowspan="2">机构编号</th><th rowspan="2">机构名称</th>');
29                 for(var i = 0; i < targetCodesArr.length; i++) {
30                     $("#tasktrack_tr1").append('<th colspan="3">'+trgNamesArr[i]+'</th>');
31 //                        form.render();
32                 }
33                 for(var i = 0; i < targetCodesArr.length; i++) {
34                     $("#tasktrack_tr2").append('<th lay-data="{field:"province", width:120}">任务值</th><th lay-data="{field:"city", width:120}">完成值</th><th lay-data="{field:"zone", width:200}">完成比例(%)</th>')
35                 }
36                 console.log(result);
37                 for(var j = 0; j < result.data.length; j++) {
38                     var str = '<tr><td>'+result.data[j].ORG_ID+'</td><td>'+result.data[j].ORG_NAME+'</td>';
39                     var aProps = Object.getOwnPropertyNames(result.data[j]);
40                     for(var m = 0; m < targetCodesArr.length; m++) {
41                         str += '<td>';
42                         if(aProps.indexOf(targetCodesArr[m]) > -1) {
43                             str += result.data[j][targetCodesArr[m]];
44                         }
45                         str += '</td>';
46                         str += '<td></td><td></td>';
47                     }
48                     str += '</tr>';
49                     $("#tasktrack_tbody").append(str)
50                 }
51             }
52         }
53     });
54     
55 })

layui表格提交：

 1 $('#search').on('click', function(){
 2     var wayCode = $("#wayCode").val();
 3     if("" == wayCode) {
 4         layer.alert("请选择考核方案")
 5     }
 6     var orgIds = $('#orgIds').val();
 7     var orgNames = $('#orgNames').val();
 8     var trgNames = $('#trgNames').val();
 9     var targetCodes = $('#targetCodes').val();
10     var json = {};
11     json.wayCode = wayCode;
12     json.orgIds = orgIds;
13     json.targetCodes = targetCodes;
14     var targetCodesArr = targetCodes.split(',');
15     var trgNamesArr = trgNames.split(',');
16     var colsArr = [[
17           {field: 'ORG_ID', title:'机构编号', rowspan: 2, align:'center'}
18           ,{field: 'ORG_NAME', title:'机构名称', rowspan: 2, align:'center'}
19     ],[]];
20     for(var i = 0; i < targetCodesArr.length; i++) {
21         colsArr[0].push({title: trgNamesArr[i],rowspan: 2, colspan:3, width:'10%',align:'center'})
22         colsArr[1].push({field: targetCodesArr[i], title: '任务值',align:'center'});
23         colsArr[1].push({field: targetCodesArr[i]+'_FS_VALUE', title: '完成值',align:'center'});
24         colsArr[1].push({field: targetCodesArr[i]+'_CALC_SCORE', title: '完成比例',align:'center'});
25     }
26     table.render({
27         elem: '#tasktrack_table',
28         url:setter.host+'/check_plantasktrack/getTasktrackSearchBody',
29         cols: colsArr,
30         method:'POST',
31         where:json,
32         contentType:'application/json; charset=utf-8',
33         even: true,
34         height:'full-150',
35         page: true,
36         limits: [5, 7, 10],
37         limit: 5
38     });
39 })

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 LayUI-Table表格渲染 layui-table 样式 layui-table 表格样式在div中溢出 layui-table的父子表 layui的table表格在同一单元格换行显示2个数据（layui-table） / 解决 layui table 一个单元格显示多行数据，以及操作栏样式错乱问题 layui-table刷新、筛选等操作时，不改变表格的宽度 layui-table 对表格数据进行处理之后的排序问题 layui-table自动换行 layui-table渲染不出来解决layui-table复杂表头数据错位问题