javascript动态合并纵向单元格

laznrbfe 发布于2019-08-02 14:13 / 2760人阅读

摘要：需求合并相邻行内容相同的单元格。概念指定单元格纵向跨越的行数。

1.需求

合并相邻行内容相同的单元格。

2.概念

rowspan指定单元格纵向跨越的行数。如rowspan被设为3，这表示该单元格必须跨越三行（本身一行，加上另外两行）

3.公共方法

  /**
   * 单元格合并方法,增加rowspan属性
   * @param data 要处理的数据
   * @param nameList 合并的字段list
   */
function rowspanFun(data, nameList) {
    for (var i = 0; i < nameList.length; i++) {
      var name = nameList[i];
      var startRow = 0;
      var endRow = data.length;
      var mergeNum = 1;
      if (endRow != 1) {
        for (var j = startRow; j < endRow; j++) {
          if (j == endRow - 1) { //判断是否是最后一个元素
            if (startRow == endRow - 1) {
              data[j][name + "Rowspan"] = 1;
            }
          } else {
            if (data[startRow][name] == data[j + 1][name]) {
              data[j + 1][name + "Rowspan"] = 0;
              mergeNum = mergeNum + 1;
              data[startRow][name + "Rowspan"] =mergeNum;
            } else {
              startRow = j + 1;
              if (mergeNum > 1) {
                data[startRow][name + "Rowspan"] = 1;
              } else {
                data[j][name + "Rowspan"] = 1;
              }
              mergeNum = 1;
            }
          }
        }
      } else {
        data[0][name + "Rowspan"] = 1;
      }
    }
    return data;
  }

4.js中调用公共方法

var data =  [
      {name: "dwj", sex: "女", age: 20},
      {name: "dwj", sex: "男", age: 20},
      {name: "dwq", sex: "女", age: 20},
      {name: "other", sex: "女", age: 20}
    ];
rowspanFun(data, ["name", "sex"]);

调用方法后的数据处理结果

5.html中使用


    
      {{item.name}}
      {{item.sex}}
      {{item.age}}

注意：此html代码使用的是ng语法，请根据自已使用的js框架自行调整。

6.结果

云服务器 GPU云服务器 html的合并单元格合并单元格单元格合并asp table单元格选中合并 html合并单元格列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53661.html

javascript动态合并纵向单元格

摘要：需求合并相邻行内容相同的单元格。概念指定单元格纵向跨越的行数。 1.需求合并相邻行内容相同的单元格。 2.概念 rowspan指定单元格纵向跨越的行数。如rowspan被设为3，这表示该单元格必须跨越三行（本身一行，加上另外两行） 3.公共方法 /** * 单元格合并方法,增加rowspan属性 * @param data 要处理的数据 * @param nam...

沈建明 2019-08-23 15:10 评论0 收藏0
jsu系列之表格组件 ---- jsu.Table

摘要：作者注是基于扩展的原生表格插件，设计理念来源于的组件该库基于，暂时未找到版本因此在此造轮子。本文将记录系列所有组件开发过程中遇到的问题和解决思路，欢迎讨论和指正。作者注：jsu.Table是基于jQuery扩展的原生表格插件，设计理念来源于Element.ui的Table组件（该UI库基于vue.js，暂时未找到jQuery版本因此在此造轮子）。本文将记录jsu系列所有组件开发过程...

soasme 2019-08-02 16:07 评论0 收藏0
jsu系列之表格组件 ---- jsu.Table

摘要：作者注是基于扩展的原生表格插件，设计理念来源于的组件该库基于，暂时未找到版本因此在此造轮子。本文将记录系列所有组件开发过程中遇到的问题和解决思路，欢迎讨论和指正。作者注：jsu.Table是基于jQuery扩展的原生表格插件，设计理念来源于Element.ui的Table组件（该UI库基于vue.js，暂时未找到jQuery版本因此在此造轮子）。本文将记录jsu系列所有组件开发过程...

everfly 2019-08-23 14:05 评论0 收藏0
jsu系列之表格组件 ---- jsu.Table

摘要：作者注是基于扩展的原生表格插件，设计理念来源于的组件该库基于，暂时未找到版本因此在此造轮子。本文将记录系列所有组件开发过程中遇到的问题和解决思路，欢迎讨论和指正。作者注：jsu.Table是基于jQuery扩展的原生表格插件，设计理念来源于Element.ui的Table组件（该UI库基于vue.js，暂时未找到jQuery版本因此在此造轮子）。本文将记录jsu系列所有组件开发过程...

张巨伟 2019-08-30 15:54 评论0 收藏0
HTML之body标签中的相关标签补充

摘要：一列表标签列表标签分为三种。二表格标签表格标签用表示。单元格和单元格之间的距离外边距，像素为单位。例如表示当前单元格在水平方向上要占据两个单元格的位置。输入标签文本框输入标签文本框用于接收用户输入。一列表标签　　列表标签分为三种。　　1、无序列表，无序列表中的每一项是　　　　英文单词解释如下：　　　　　　a.ul：unordered list，无序列表的意思。　　　　　　b.l...

felix0913 2019-04-23 11:49 评论0 收藏0