bootstrap table合并行

本文介绍了如何在Bootstrap Table中实现行合并,通过JavaScript函数`mergeRow`动态处理数据,根据特定字段进行合并。示例代码展示了如何设置表格列和合并条件,以及展示最终的合并效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

   $('#table').bootstrapTable({

      url: "http://localhost:8888/view", //服务器返回数据的网址

        columns: columns,

        pagination: true,

        pageNumber: 1,

        pageSize: 2,

        pageList: [3, 5, 10, 20],

        paginationHAlign: "left",

        paginationDetailHAlign: "right",

        // url: "http://localhost:8888/view", //服务器返回数据的网址

        // method: 'GET',   //数据请求方式   

        onLoadSuccess: function (data) {        

                mergeRow(data, 'version', 'table');      //table表格,合并version列  

        }

    });


 

   //设置需要显示的列

    var columns = [

        {

            checkbox: true

        },

        {

            field: 'version',

            title: '版本',

            sortable: true,

            align: "center",

        },

        {

            field: 'time',

            title: '时间',

            sortable: true,

            align: "center",

        },

        {

            field: 'select',

            title: '下拉框',

            sortable: true,

            align: "center", 

        }

    ];

    function mergeRow(data, fieldName, tableId) {

        if (data.length == 0) {

            return;

        }

        let left = 0;

        for (var i = 1; i < data.length; i++) {

            if (data[left][fieldName] != data[i][fieldName]) {

                $('#' + tableId).bootstrapTable('mergeCells', {

                    index: left,

                    field: fieldName,

                    colspan: 1,

                    rowspan: i - left

                });

                left = i;

            }

            // 如果后两个数相同的情况,上述逻辑会少执行一次$('#'+tableId).bootstrapTable('mergeCells'...,

            if (i == data.length - 1) {

                $('#' + tableId).bootstrapTable('mergeCells', {

                    index: left,

                    field: fieldName,

                    colspan: 1,

                    rowspan: data.length - left

                });

            }

        }

    }

 图片效果:

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值