【bootstrap-table】在bootstrap-table的表格中合并单元格:含有父类的合并单元格,父类不同时子类相同也不合并

在限定字段内合并单元格

今天遇到一个需求,简单来说就是合并单元格,但我实现时发现,要求其合并时,在国家相同的字段内才允许合并,遇见更复杂的需求,需要的父类可能为多个,所有我就在之前简单的合并单元格的方法基础上进行了部分修改。

/**
     * 在限定字段内合并单元格
     * @param data  原始数据(在服务端完成排序)
     * @param fieldName 合并属性名称
     * @param limitFieldNameList 限制在哪个属性名称内合并,为数组
     * @param colspan   合并列
     */
    function mergeCellsLimit(data, fieldName, limitFieldNameList, colspan) {
        //声明一个map计算相同属性值在data对象出现的次数和
        var sortMap = {};
        for (var i = 0; i < data.length; i++) {
            for (var prop in data[i]) {
                if (prop == fieldName) { // 防止出现乱合并
                    // 部分字段要在某个字段内合并,不同limitFieldName字段的fieldName就算相同也不合并
                    var key = data[i][prop] === "" || data[i][prop] === 0 ? "无值" : data[i][prop];
                    for (var limitFieldNameListIndex = 0; limitFieldNameListIndex < limitFieldNameList.length; limitFieldNameListIndex++) {
                        key = key + data[i][limitFieldNameList[limitFieldNameListIndex]];
                    }
                    if (sortMap.hasOwnProperty(key)) {
                        sortMap[key] = sortMap[key] * 1 + 1;
                    } else {
                        sortMap[key] = 1;
                    }


                    break;
                }
            }
        }
        // for (var prop in sortMap) {
        //     console.log(prop, sortMap[prop])// 打印合并参数
        // }
        var index = 0;
        for (var prop in sortMap) {
            var count = sortMap[prop] * 1;
            $('#bootstrap-table').bootstrapTable('mergeCells', {
                index: index,
                field: fieldName,
                colspan: colspan,
                rowspan: count
            });   // 进行合并单元格
            index += count;
        }
    }

然后在表格设置中调用,方法如下

onLoadSuccess: function (data) {
                var data = $('#bootstrap-table').bootstrapTable('getData', true);
                //合并单元格
                mergeCellsLimit(data, "field",["limitField"], 1, $('#bootstrap-table'));
            },

效果图
在这里插入图片描述

  • 7
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
合并单元格,需要使用 `react-bootstrap-table-next` 的 `rowSpan` 和 `colSpan` 属性。这些属性可以在 `columns` 对象定义,用于指定表格每个单元格应该跨越的行和列的数量。 具体的实现步骤如下: 1. 在 `columns` 对象定义需要合并单元格的列,为其添加 `rowSpan` 和 `colSpan` 属性。 2. 在 `data` 数组为需要合并单元格的行添加相应的属性值,这些属性值将在表格渲染时被引用。 下面是一个例子: ```javascript import BootstrapTable from 'react-bootstrap-table-next'; import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css'; const columns = [ { dataField: 'id', text: 'ID', }, { dataField: 'name', text: 'Name', }, { dataField: 'age', text: 'Age', }, { dataField: 'gender', text: 'Gender', rowSpan: 2, // 跨越两行 }, { dataField: 'location', text: 'Location', colSpan: 2, // 跨越两列 }, { dataField: 'address', text: 'Address', hidden: true, // 隐藏该列 }, { dataField: 'city', text: 'City', }, { dataField: 'state', text: 'State', }, ]; const data = [ { id: 1, name: 'John', age: 30, gender: 'Male', location: 'New York', address: '123 Main St', city: 'New York', state: 'NY', }, { id: 2, name: 'Jane', age: 25, gender: 'Female', location: 'San Francisco', address: '456 Elm St', city: 'San Francisco', state: 'CA', }, ]; <BootstrapTable keyField='id' data={ data } columns={ columns }/> ``` 在上面的例子表格的 `Gender` 列跨越了两行,`Location` 列跨越了两列。注意,在定义了 `colSpan` 属性的列后面应该添加相应数量的列来占据跨度。 希望这可以帮助你实现合并单元格的功能。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值