<!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>