首页 > 其他分享 >layu数据表格,表格内相同内容进行合并

layu数据表格,表格内相同内容进行合并

时间:2022-10-28 10:44:06浏览次数:59  
标签:real 表格 title 合并 un field layu fourth quarter

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

相关文章