bootstrapTable根据数据计算单元格 的合并问题

关于boostrapTable单元格合并问题:
group By 列
max,sum列

插件自带使用方式:
//$(target).bootstrapTable(‘mergeCells’, { index: index, field: 字段名, colspan: colspan, rowspan: count });
(把多格合并为一格),所需的参数如下:
- index:所要合并的格所在行的索引(index)
- field:所在列的字段名
- rowspan:合并的行总数目
- colspan:合并的列总数目
api说明:https://blog.csdn.net/liushuiziyouliu/article/details/80988458

以下为个人封装:

 //调用自自己写的合并函数
     var arr = ["地市"];//组合键盘 , "区县"
     var cols = ["合计(地市)"];//受影响列,非groupBy分组字段
     var data = $('#table').bootstrapTable('getData', true);
 
 mergeCellsLLJ(data, arr, cols, 1, $('#table'));
/**
		 * 合并列
		 * @param data            原始数据(在服务端完成排序)
		 * @param fieldName      groupBy字段
		 * @param cols                受影响列
		 * @param colspan=1     合并列总数     
		 * @param target    
**/
function mergeCellsLLJ(data, fieldName, cols,colspan, target) {
    //声明一个map计算相同属性值在data对象出现的次数和
    //根据组合键,判断Rowspan的值
    var parList = data[0];
    var count = 0;
    var arrRows = [];
    for (var i = 0; i < data.length; i++) 
    {
        var nowRow = data[i];
        //if (Object.getOwnPropertyNames(parList).length==0)
        //fieldName  parList={},所以循环无效
       
        var sflag = true;
        for (rowindex in fieldName)
         {
            var skey = fieldName[rowindex];
            if (nowRow[skey] != parList[skey])  sflag = false;
        }
		
		//计算和并行数RowSpan
        if (sflag)   count ++;
        else
        {
            parList = {}; 
            for (var j = 0; j < fieldName.length; j++) {
                //组件键  key-->value
                parList[fieldName[j]] = nowRow[fieldName[j]];
            }
            arrRows.push(count); //在赋值之前,先把上次的值存储起来...
            count = 1;
        }
       
        //console.log(i.toString() + "  " + count + "  " + nowRow["xx"] + "  " + nowRow["xx2"]);
        if (i+1== data.length) 
        {
            arrRows.push(count);
        } //最后一行时候就添加大数组中  //data.length这里写成了fieldName.length
    }
    
    console.log(arrRows);
    for (var procol in fieldName) {
        var index = 0;
        for (var rI in arrRows) {
            var count = arrRows[rI];
            console.log(count);
            $(target).bootstrapTable('mergeCells', { index: index, field: fieldName[procol], colspan: colspan, rowspan: count 		   });
            index += count;
        }
    }

    for (var procol in cols)
    {
        var index = 0;
        for (var rI in arrRows)
        {
            var count = arrRows[rI];

            $(target).bootstrapTable('mergeCells', { index: index, field: cols[procol], colspan: colspan, rowspan: count });

            index += count;
        }
    }

}


 //调用自自己写的合并函数
     var arr = ["地市"];//组合键盘 , "区县"
     var cols = ["合计(地市)"];//受影响列,非groupBy分组字段
     var data = $('#table').bootstrapTable('getData', true);   

  mergeCellsLLJPage(data, arr, cols, 1, $('#table'), (MergeIndex - 1) * 15);

onLoadSuccess***: function () {
             	//调用,如果后端分页,就这里调用就可以;
            },
            maintainSelected: true,
            ***onPageChange***: function (number, size) {
      			点击页码事件
                MergeIndex = number;
          },
          ***onPostBody***: function (data) {
          		//如果是客户端分页,就这里调用
                if (data && data.length > 0) {
                     	//调用
                }
              },
//这种可以解决前端***客户端时***分页  的合并问题
/**
		 * 合并列
		 * @param data            原始数据(在服务端完成排序)
		 * @param fieldName      groupBy字段
		 * @param cols                受影响列
		 * @param colspan=1     合并列总数     
		 * @param target    
		 * @param sindex  合并开始行索引  
**/
        function mergeCellsLLJPage(data, fieldName, cols, colspan, target, sindex) {
            //声明一个map计算相同属性值在data对象出现的次数和
            //根据组合键,判断Rowspan的值
            var parList = data[sindex];
            var count = 0;
            var arrRows = [];
            var erowI = sindex + 15 > data.length ? data.length : sindex + 15;
            for (var i = sindex; i < erowI; i++) {
                var nowRow = data[i];
                //if (Object.getOwnPropertyNames(parList).length==0)
                //fieldName  parList={},所以循环无效
                var sflag = true;
                for (rowindex in fieldName) {
                    var skey = fieldName[rowindex];
                    if (nowRow[skey] != parList[skey]) {
                        sflag = false;
                    }
                }
                if (sflag) {
                    count++
                }
                else {
                    parList = {};
                    for (var j = 0; j < fieldName.length; j++) {
                        //组件键  key-->value
                        parList[fieldName[j]] = nowRow[fieldName[j]];
                    }
                    arrRows.push(count); //在赋值之前,先把上次的值存储起来...
                    count = 1;
                }
                if (i + 1 == erowI) {
                    arrRows.push(count);
                } //最后一行时候就添加大数组中  //data.length这里写成了fieldName.length
            }
            var index = 0;
            for (var rI in arrRows) {
                var count = arrRows[rI];
                //Max列1:
                for (var procol in cols) {
                    $(target).bootstrapTable('mergeCells', { index: index, field: cols[procol], colspan: colspan, rowspan: count });
                }
                //groupBy列1:
                for (var procol in fieldName) {
                    $(target).bootstrapTable('mergeCells', { index: index, field: fieldName[procol], colspan: colspan, rowspan: count });
                }
                index += count;
            }
        }
要实现动态合并居中单元格,可以使用 Bootstrap Table 的自定义列插件。具体步骤如下: 1. 定义自定义列插件,实现合并单元格和居中文本的功能。示例代码如下: ```javascript $.fn.bootstrapTable.columnDefaults.mergeCells = true; $.fn.bootstrapTable.cellStyles.alignCenter = function (field, row, index, value) { return { classes: 'text-center' }; }; $.fn.bootstrapTable.columnDefaults.cellStyle = $.fn.bootstrapTable.cellStyles.alignCenter; $.extend($.fn.bootstrapTable.defaults, { onPostBody: function () { $(this).bootstrapTable('mergeCells', { field: 'fieldName', rowspan: 2, index: 0 }); } }); ``` 2. 在表格中使用自定义列插件。示例代码如下: ```html <table id="table" data-toggle="table" data-url="your/data/url" data-columns="your/data/columns"> <thead> <tr> <th data-field="fieldName" data-align="center" data-halign="center">Field Name</th> <th data-field="field1" data-align="center" data-halign="center">Field 1</th> <th data-field="field2" data-align="center" data-halign="center">Field 2</th> </tr> </thead> </table> ``` 其中,`data-field` 属性指定列的字段名,`data-align` 和 `data-halign` 属性指定水平对齐方式,`data-toggle="table"` 和 `data-url` 属性指定使用 Bootstrap Table 插件和数据源的 URL,`data-columns` 属性指定列的定义。在列定义中,可以使用自定义的插件,如 `mergeCells`。 需要注意的是,这里的 `fieldName` 需要替换为实际的字段名。另外,`rowspan` 属性可以指定合并单元格的行数,`index` 属性可以指定开始合并的行号。 希望这个回答能够帮到你。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值