<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="layui2-6-8/css/layui.css"> <script src="js/jquery-1.9.1.min.js"></script> </head> <body> <div class="layui-main">00</div> <table class="layui-table" id="test01" lay-filter="test01"></table> <script src="layui2-6-8/layui.js"></script> <script> layui.use('table', function(){ var table = layui.table; var data1 = [ { "id": 1, "business_tenant_name": "桂林中滋堂生物科技有限公司", "land": "A7地块", "standard_plant": "苏桥园-A7地块-1#标准厂房北楼-2层-北楼2层厂区+办公区", "contract_begin": "2019-02-01", "contract_end": "2024-12-31", "leased_area": "3239.25", "unit_price": "10.00", "monthly_rent": 32392.5, "months": 71, "amount_receive": 2299867.5, "amount_ready": 0, "amount_un": 2299867.5, "history_arrears": "-", "period": "-", "first_quarter": 97177.5, "first_real": 0, "first_un": 97177.5, "second_quarter": 97177.5, "second_real": 0, "second_un": 97177.5, "third_quarter": 97177.5, "third_real": 0, "third_un": 97177.5, "fourth_quarter": 97177.5, "fourth_real": 0, "fourth_un": 97177.5, "LAY_TABLE_INDEX": 0 }, { "id": 2, "business_tenant_name": "桂林美盈科技有限公司", "land": "A7地块", "standard_plant": "苏桥园-A7地块-1#标准厂房北楼-3层-北楼3层办公区+厂区", "contract_begin": "2020-03-10", "contract_end": "2025-03-09", "leased_area": "3239.25", "unit_price": "7.00", "monthly_rent": 22674.75, "months": 60, "amount_receive": 1360485, "amount_ready": 0, "amount_un": 1360485, "history_arrears": "-", "period": "-", "first_quarter": 68024.25, "first_real": 0, "first_un": 68024.25, "second_quarter": 68024.25, "second_real": 0, "second_un": 68024.25, "third_quarter": 68024.25, "third_real": 0, "third_un": 68024.25, "fourth_quarter": 68024.25, "fourth_real": 0, "fourth_un": 68024.25, "LAY_TABLE_INDEX": 1 }, { "id": 3, "business_tenant_name": "桂林美盈科技有限公司", "land": "A7地块", "standard_plant": "苏桥园-A7地块-1#标准厂房南楼-3层-南楼3层厂区+办公区+辅房", "contract_begin": "2020-03-10", "contract_end": "2025-03-09", "leased_area": "3239.25", "unit_price": "7.00", "monthly_rent": 22674.75, "months": 60, "amount_receive": 1360485, "amount_ready": 0, "amount_un": 1360485, "history_arrears": "-", "period": "-", "first_quarter": 68024.25, "first_real": 0, "first_un": 68024.25, "second_quarter": 68024.25, "second_real": 0, "second_un": 68024.25, "third_quarter": 68024.25, "third_real": 0, "third_un": 68024.25, "fourth_quarter": 68024.25, "fourth_real": 0, "fourth_un": 68024.25, "LAY_TABLE_INDEX": 2 }, { "id": 4, "business_tenant_name": "深圳市明聪光电技术有限公司", "land": "A7地块", "standard_plant": "苏桥园-A7地块-1#标准厂房南楼-2层-南2楼(南辅房)", "contract_begin": "2022-01-01", "contract_end": "2024-12-31", "leased_area": "1039.25", "unit_price": "9.00", "monthly_rent": 9353.25, "months": 36, "amount_receive": 336717, "amount_ready": 0, "amount_un": 336717, "history_arrears": "-", "period": "-", "first_quarter": 28059.75, "first_real": 0, "first_un": 28059.75, "second_quarter": 28059.75, "second_real": 0, "second_un": 28059.75, "third_quarter": 28059.75, "third_real": 0, "third_un": 28059.75, "fourth_quarter": 28059.75, "fourth_real": 0, "fourth_un": 28059.75, "LAY_TABLE_INDEX": 3 }, { "id": 5, "business_tenant_name": "长城电源技术(广西)有限公司永福分公司", "land": "A7地块", "standard_plant": "苏桥园-A7地块-2#标准厂房北楼-2层-北楼2层厂区+办公区+辅房", "contract_begin": "2019-01-01", "contract_end": "2024-12-31", "leased_area": "3319.00", "unit_price": "8.00", "monthly_rent": 26552, "months": 72, "amount_receive": 1911744, "amount_ready": 0, "amount_un": 1911744, "history_arrears": "-", "period": "-", "first_quarter": 79656, "first_real": 0, "first_un": 79656, "second_quarter": 79656, "second_real": 0, "second_un": 79656, "third_quarter": 79656, "third_real": 0, "third_un": 79656, "fourth_quarter": 79656, "fourth_real": 0, "fourth_un": 79656, "LAY_TABLE_INDEX": 4 }, { "id": 6, "business_tenant_name": "长城电源技术(广西)有限公司永福分公司", "land": "A7地块", "standard_plant": "苏桥园-A7地块-2#标准厂房北楼-3层-北楼3层厂区+办公区+辅房", "contract_begin": "2019-01-01", "contract_end": "2024-12-31", "leased_area": "3319.00", "unit_price": "8.00", "monthly_rent": 26552, "months": 72, "amount_receive": 1911744, "amount_ready": 0, "amount_un": 1911744, "history_arrears": "-", "period": "-", "first_quarter": 79656, "first_real": 0, "first_un": 79656, "second_quarter": 79656, "second_real": 0, "second_un": 79656, "third_quarter": 79656, "third_real": 0, "third_un": 79656, "fourth_quarter": 79656, "fourth_real": 0, "fourth_un": 79656, "LAY_TABLE_INDEX": 5 }, { "id": 7, "business_tenant_name": "长城电源技术(广西)有限公司永福分公司", "land": "A7地块", "standard_plant": "苏桥园-A7地块-2#标准厂房北楼-1层-北楼1层厂区+办公区+辅房", "contract_begin": "2019-01-01", "contract_end": "2024-12-31", "leased_area": "3319.00", "unit_price": "8.00", "monthly_rent": 26552, "months": 72, "amount_receive": 1911744, "amount_ready": 0, "amount_un": 1911744, "history_arrears": "-", "period": "-", "first_quarter": 79656, "first_real": 0, "first_un": 79656, "second_quarter": 79656, "second_real": 0, "second_un": 79656, "third_quarter": 79656, "third_real": 0, "third_un": 79656, "fourth_quarter": 79656, "fourth_real": 0, "fourth_un": 79656, "LAY_TABLE_INDEX": 6 }, { "id": 8, "business_tenant_name": "永福县中星呈光学科技有限公司", "land": null, "standard_plant": "--", "contract_begin": "2021-11-30", "contract_end": "2022-10-31", "leased_area": null, "unit_price": "10.00", "monthly_rent": 0, "months": 11, "amount_receive": 0, "amount_ready": 0, "amount_un": 0, "history_arrears": "-", "period": "-", "first_quarter": 0, "first_real": 0, "first_un": 0, "second_quarter": 0, "second_real": 0, "second_un": 0, "third_quarter": 0, "third_real": 0, "third_un": 0, "fourth_quarter": 79656, "fourth_real": 0, "fourth_un": 79656, "LAY_TABLE_INDEX": 7 }, ]; table.render({ elem: '#test01' ,cellMinWidth: 120 ,data: data1 ,cols: [[ {checkbox:true, fixed:'left',rowspan:"2"}, {field:'id', width:60, rowspan:"2",title:'序号'}, {field:'business_tenant_name', rowspan:"2",title:'入驻企业'}, {field:'land',rowspan:"2",title:'地块'}, {field:'standard_plant', rowspan:"2",title:'标准厂房'}, {field:'contract_begin', rowspan:"2",title:'合同起时间'}, {field:'contract_end', rowspan:"2",title:'合同止时间'}, {field:'leased_area', rowspan:"2",title:'租赁面积(㎡)'}, {field:'unit_price', rowspan:"2",title:'单价(元/㎡/月)'}, {field:'monthly_rent', rowspan:"2",title:'月租金(元/月)'}, {field:'months', rowspan:"2",title:'月数(个月)'}, {field:'amount_receive', rowspan:"2",title:'应收金额(元)'}, {field:'amount_ready', rowspan:"2",title:'已收金额(元)'}, {field:'amount_un', rowspan:"2",title:'未收金额(元)'}, {field:'history_arrears', rowspan:"2",title:'历史欠款(元)'}, {field:'period', rowspan:"2",title:'期间'}, {field:'rent_receive_in',colspan:"12",title:'2022年应收租金'} ],[ {field:'first_quarter', width:180,title:'第一季度应收(元)'}, {field:'first_real', width:120,title:'实收(元)'}, {field:'first_un', width:120,title:'未收(元)'}, {field:'second_quarter', width:180,title:'第二季度应收(元)'}, {field:'second_real', width:120,title:'实收(元)'}, {field:'second_un', width:120,title:'未收(元)'}, {field:'third_quarter', width:180,title:'第三季度应收(元)'}, {field:'third_real', width:120,title:'实收(元)'}, {field:'third_un', width:120,title:'未收(元)'}, {field:'fourth_quarter', width:180,title:'第四季度应收(元)'}, {field:'fourth_real',title:'实收(元)'}, {field:'fourth_un', title:'未收(元)'}, ]] ,id: 'testReload' ,done : function(res, curr, count) { merge(res); }, page:true }) }) function merge(res) { var data = res.data; var mergeIndex = 0;//定位需要添加合并属性的行数 var mark = 1; //这里涉及到简单的运算,mark是计算每次需要合并的格子数 var columsName = ['business_tenant_name','land','contract_begin','contract_end','history_arrears','period'];//需要合并的列名称 var columsIndex = [2,3,5,6,14,15];//需要合并的列索引值 for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列 var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行 for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据 var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列 var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列 if (data[i][columsName[0]] === data[i-1][columsName[0]]){ layui.hint().error(i); if (data[i][columsName[k]] === data[i-1][columsName[k]]) { //后一行的值与前一行的值做比较,相同就需要合并 mark += 1; tdPreArr.each(function () {//相同列的第一列增加rowspan属性 $(this).attr("rowspan", mark); }); tdCurArr.each(function () {//当前行隐藏 $(this).css("display", "none"); }); } }else { mergeIndex = i; mark = 1;//一旦前后两行的值不一样了,那么需要合并的格子数mark就需要重新计算 } } mergeIndex = 0; mark = 1; } } </script> </body> </html>
标签:real,表格,title,合并,un,field,layu,fourth,quarter From: https://www.cnblogs.com/moppet/p/16835024.html