国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

laznrbfe / 2788人閱讀

摘要：需求合并相鄰行內(nèi)容相同的單元格。概念指定單元格縱向跨越的行數(shù)。

1.需求

合并相鄰行內(nèi)容相同的單元格。

2.概念

rowspan指定單元格縱向跨越的行數(shù)。如rowspan被設(shè)為3，這表示該單元格必須跨越三行（本身一行，加上另外兩行）

3.公共方法 
  /**
   * 單元格合并方法,增加rowspan屬性
   * @param data 要處理的數(shù)據(jù)
   * @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) { //判斷是否是最后一個(gè)元素
            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中調(diào)用公共方法 
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"]);

調(diào)用方法后的數(shù)據(jù)處理結(jié)果

5.html中使用 

    

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

注意：此html代碼使用的是ng語(yǔ)法，請(qǐng)根據(jù)自已使用的js框架自行調(diào)整。

6.結(jié)果

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/53661.html

相關(guān)文章

  • javascript動(dòng)態(tài)合并縱向單元格

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

    沈建明 評(píng)論0 收藏0

  • jsu系列之表格組件 ---- jsu.Table

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

    soasme 評(píng)論0 收藏0

  • jsu系列之表格組件 ---- jsu.Table

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

    everfly 評(píng)論0 收藏0

  • jsu系列之表格組件 ---- jsu.Table

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

    張巨偉 評(píng)論0 收藏0

  • HTML之body標(biāo)簽中的相關(guān)標(biāo)簽補(bǔ)充

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

    felix0913 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<