資訊專欄INFORMATION COLUMN
摘要：需求合并相鄰行內(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) { //判斷是否是最后一個元素
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語法，請根據(jù)自已使用的js框架自行調(diào)整。
6.結(jié)果文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/101614.html
摘要：需求合并相鄰行內(nèi)容相同的單元格。概念指定單元格縱向跨越的行數(shù)。 1.需求 合并相鄰行內(nèi)容相同的單元格。 2.概念 rowspan指定單元格縱向跨越的行數(shù)。如rowspan被設(shè)為3，這表示該單元格必須跨越三行（本身一行，加上另外兩行） 3.公共方法 /** * 單元格合并方法,增加rowspan屬性 * @param data 要處理的數(shù)據(jù) * @param nam...
摘要：作者注是基于擴展的原生表格插件，設(shè)計理念來源于的組件該庫基于，暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發(fā)過程中遇到的問題和解決思路，歡迎討論和指正。 作者注：jsu.Table是基于jQuery擴展的原生表格插件，設(shè)計理念來源于Element.ui的Table組件（該UI庫基于vue.js，暫時未找到j(luò)Query版本因此在此造輪子）。本文將記錄jsu系列所有組件開發(fā)過程...
摘要：作者注是基于擴展的原生表格插件，設(shè)計理念來源于的組件該庫基于，暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發(fā)過程中遇到的問題和解決思路，歡迎討論和指正。 作者注：jsu.Table是基于jQuery擴展的原生表格插件，設(shè)計理念來源于Element.ui的Table組件（該UI庫基于vue.js，暫時未找到j(luò)Query版本因此在此造輪子）。本文將記錄jsu系列所有組件開發(fā)過程...
摘要：作者注是基于擴展的原生表格插件，設(shè)計理念來源于的組件該庫基于，暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發(fā)過程中遇到的問題和解決思路，歡迎討論和指正。 作者注：jsu.Table是基于jQuery擴展的原生表格插件，設(shè)計理念來源于Element.ui的Table組件（該UI庫基于vue.js，暫時未找到j(luò)Query版本因此在此造輪子）。本文將記錄jsu系列所有組件開發(fā)過程...
摘要：一列表標(biāo)簽列表標(biāo)簽分為三種。二表格標(biāo)簽表格標(biāo)簽用表示。單元格和單元格之間的距離外邊距，像素為單位。例如表示當(dāng)前單元格在水平方向上要占據(jù)兩個單元格的位置。輸入標(biāo)簽文本框輸入標(biāo)簽文本框用于接收用戶輸入。一 列表標(biāo)簽 列表標(biāo)簽分為三種。 1、無序列表，無序列表中的每一項是 英文單詞解釋如下： a.ul：unordered list，無序列表的意思。 b.l...
閱讀 1068·2023-04-25 14:41
閱讀 2527·2021-09-28 09:35
閱讀 3685·2019-08-30 15:53
閱讀 2007·2019-08-29 15:26
閱讀 1136·2019-08-28 17:59
閱讀 4415·2019-08-26 13:45
閱讀 2897·2019-08-26 13:33
閱讀 1694·2019-08-26 11:46
