• bootstrap-table 动态合并行和列方法


    $("#table2").bootstrapTable({
                url: "http://...",
                columns: [],
                onLoadSuccess: function (data) {
                    mergeCells(data, "FDepName3", 1, $('#table2'));//行合并
                    mergeColspan(data, ["FDepName3", "FDepName1", "FDepName2"], $('#table2'));//列合并
                },
    })
    /**
         * 合并行
         * @param data  原始数据(在服务端完成排序)
         * @param fieldName 合并属性名称数组
         * @param colspan 列数
         * @param target 目标表格对象
         */
    function mergeCells(data, fieldName, colspan, target) {
                if (data.length == 0) {
                    alert("不能传入空数据");
                    return;
                }
                var numArr = [];
                var value = data[0][fieldName];
                var num = 0;
                for (var i = 0; i < data.length; i++) {
                    if (value != data[i][fieldName]) {
                        numArr.push(num);
                        value = data[i][fieldName];
                        num = 1;
                        continue;
                    }
                    num++;
                }
                var merIndex = 0;
                for (var i = 0; i < numArr.length; i++) {
                    $(target).bootstrapTable('mergeCells', { index: merIndex, field: fieldName, colspan: colspan, rowspan: numArr[i] })
                    merIndex += numArr[i];
                }
    }
    /**
    * 合并列
    * @param data  原始数据(在服务端完成排序)
    * @param fieldName 合并属性数组
    * @param target    目标表格对象
    */
    function mergeColspan(data, fieldNameArr, target) {
                if (data.length == 0) {
                    alert("不能传入空数据");
                    return;
                }
                if (fieldNameArr.length == 0) {
                    alert("请传入属性值");
                    return;
                }
                var num = -1;
                var index = 0;
                for (var i = 0; i < data.length; i++) {
                    num++;
                    for (var v in fieldNameArr) {
                        index = 1;
                        if (data[i][fieldNameArr[v]] != data[i][fieldNameArr[0]]) {
                            index = 0;
                            break;
                        }
                    }
                    if (index == 0) {
                        continue;
                    }
                    $(target).bootstrapTable('mergeCells', { index: num, field: fieldNameArr[0], colspan: fieldNameArr.length, rowspan: 1 });
                }
    }
     
     
     
     
     
    --------------------------
    /**
     * 合并单元格
     * @param data 原始数据(在服务端完成排序)
     * @param fieldName 合并属性名称
     * @param colspan  合并列
     * @param target  目标表格对象
     */
    function mergeCells(data,fieldName,colspan,target){
      //声明一个map计算相同属性值在data对象出现的次数和
      var sortMap = {};
      for(var i = 0 ; i < data.length ; i++){
        for(var prop in data[i]){
          if(prop == fieldName){
            var key = data[i][prop]
            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;
        $(target).bootstrapTable('mergeCells',{index:index, field:fieldName, colspan: colspan, rowspan: count}); 
        index += count;
      }
    }
  • 相关阅读:
    个人总结一些常见的css问题
    工作中的js总结
    js面向对象
    js的一些特性
    js 实现改变字体大小
    将博客搬至CSDN
    最大连续子序列----DP动态规划
    捡石子---贪心算法(huffman)
    素数环问题---深度搜索遍历
    nyoj---12 喷水装置(二)--区间覆盖问题
  • 原文地址:https://www.cnblogs.com/sunzhihua/p/10747040.html
Copyright © 2020-2023  润新知