资讯专栏INFORMATION COLUMN

javascript动态合并纵向单元格

沈建明 / 1426人阅读

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

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.结果

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

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

相关文章

  • javascript动态合并纵向单元

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

    laznrbfe 评论0 收藏0
  • jsu系列之表组件 ---- jsu.Table

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

    soasme 评论0 收藏0
  • jsu系列之表组件 ---- jsu.Table

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

    everfly 评论0 收藏0
  • jsu系列之表组件 ---- jsu.Table

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

    张巨伟 评论0 收藏0
  • HTML之body标签中的相关标签补充

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

    felix0913 评论0 收藏0

发表评论

0条评论

沈建明

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<