摘要:需求合并相邻行内容相同的单元格。概念指定单元格纵向跨越的行数。
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
摘要:需求合并相邻行内容相同的单元格。概念指定单元格纵向跨越的行数。 1.需求 合并相邻行内容相同的单元格。 2.概念 rowspan指定单元格纵向跨越的行数。如rowspan被设为3,这表示该单元格必须跨越三行(本身一行,加上另外两行) 3.公共方法 /** * 单元格合并方法,增加rowspan属性 * @param data 要处理的数据 * @param nam...
摘要:作者注是基于扩展的原生表格插件,设计理念来源于的组件该库基于,暂时未找到版本因此在此造轮子。本文将记录系列所有组件开发过程中遇到的问题和解决思路,欢迎讨论和指正。 作者注:jsu.Table是基于jQuery扩展的原生表格插件,设计理念来源于Element.ui的Table组件(该UI库基于vue.js,暂时未找到jQuery版本因此在此造轮子)。本文将记录jsu系列所有组件开发过程...
摘要:作者注是基于扩展的原生表格插件,设计理念来源于的组件该库基于,暂时未找到版本因此在此造轮子。本文将记录系列所有组件开发过程中遇到的问题和解决思路,欢迎讨论和指正。 作者注:jsu.Table是基于jQuery扩展的原生表格插件,设计理念来源于Element.ui的Table组件(该UI库基于vue.js,暂时未找到jQuery版本因此在此造轮子)。本文将记录jsu系列所有组件开发过程...
摘要:作者注是基于扩展的原生表格插件,设计理念来源于的组件该库基于,暂时未找到版本因此在此造轮子。本文将记录系列所有组件开发过程中遇到的问题和解决思路,欢迎讨论和指正。 作者注:jsu.Table是基于jQuery扩展的原生表格插件,设计理念来源于Element.ui的Table组件(该UI库基于vue.js,暂时未找到jQuery版本因此在此造轮子)。本文将记录jsu系列所有组件开发过程...
摘要:一列表标签列表标签分为三种。二表格标签表格标签用表示。单元格和单元格之间的距离外边距,像素为单位。例如表示当前单元格在水平方向上要占据两个单元格的位置。输入标签文本框输入标签文本框用于接收用户输入。一 列表标签 列表标签分为三种。 1、无序列表,无序列表中的每一项是 英文单词解释如下: a.ul:unordered list,无序列表的意思。 b.l...
阅读 959·2023-04-25 14:41
阅读 2406·2021-09-28 09:35
阅读 3575·2019-08-30 15:53
阅读 1901·2019-08-29 15:26
阅读 963·2019-08-28 17:59
阅读 3752·2019-08-26 13:45
阅读 2805·2019-08-26 13:33
阅读 1603·2019-08-26 11:46