javascript動態(tài)合并縱向單元格

laznrbfe 發(fā)布于2019-08-02 14:13 / 2794人閱讀

摘要：需求合并相鄰行內容相同的單元格。概念指定單元格縱向跨越的行數。

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合并單元格列

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/53661.html

javascript動態(tài)合并縱向單元格

摘要：需求合并相鄰行內容相同的單元格。概念指定單元格縱向跨越的行數。 1.需求合并相鄰行內容相同的單元格。 2.概念 rowspan指定單元格縱向跨越的行數。如rowspan被設為3，這表示該單元格必須跨越三行（本身一行，加上另外兩行） 3.公共方法 /** * 單元格合并方法,增加rowspan屬性 * @param data 要處理的數據 * @param nam...

沈建明 2019-08-23 15:10 評論0 收藏0
jsu系列之表格組件 ---- jsu.Table

摘要：作者注是基于擴展的原生表格插件，設計理念來源于的組件該庫基于，暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發(fā)過程中遇到的問題和解決思路，歡迎討論和指正。作者注：jsu.Table是基于jQuery擴展的原生表格插件，設計理念來源于Element.ui的Table組件（該UI庫基于vue.js，暫時未找到jQuery版本因此在此造輪子）。本文將記錄jsu系列所有組件開發(fā)過程...

soasme 2019-08-02 16:07 評論0 收藏0
jsu系列之表格組件 ---- jsu.Table

摘要：作者注是基于擴展的原生表格插件，設計理念來源于的組件該庫基于，暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發(fā)過程中遇到的問題和解決思路，歡迎討論和指正。作者注：jsu.Table是基于jQuery擴展的原生表格插件，設計理念來源于Element.ui的Table組件（該UI庫基于vue.js，暫時未找到jQuery版本因此在此造輪子）。本文將記錄jsu系列所有組件開發(fā)過程...

everfly 2019-08-23 14:05 評論0 收藏0
jsu系列之表格組件 ---- jsu.Table

摘要：作者注是基于擴展的原生表格插件，設計理念來源于的組件該庫基于，暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發(fā)過程中遇到的問題和解決思路，歡迎討論和指正。作者注：jsu.Table是基于jQuery擴展的原生表格插件，設計理念來源于Element.ui的Table組件（該UI庫基于vue.js，暫時未找到jQuery版本因此在此造輪子）。本文將記錄jsu系列所有組件開發(fā)過程...

張巨偉 2019-08-30 15:54 評論0 收藏0
HTML之body標簽中的相關標簽補充

摘要：一列表標簽列表標簽分為三種。二表格標簽表格標簽用表示。單元格和單元格之間的距離外邊距，像素為單位。例如表示當前單元格在水平方向上要占據兩個單元格的位置。輸入標簽文本框輸入標簽文本框用于接收用戶輸入。一列表標簽　　列表標簽分為三種。　　1、無序列表，無序列表中的每一項是　　　　英文單詞解釋如下：　　　　　　a.ul：unordered list，無序列表的意思。　　　　　　b.l...

felix0913 2019-04-23 11:49 評論0 收藏0