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