layui复杂表格-行合并

最新推荐文章于 2024-01-12 16:39:21 发布

原创最新推荐文章于 2024-01-12 16:39:21 发布 · 4.1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#js

layui 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了一种利用JavaScript和layui框架实现表格数据合并的方法，通过循环比较每一行的特定列值，当值相同时使用rowspan进行单元格合并，并隐藏重复数据，提升表格展示效果。

var renderTable = function (respData) {
			table.render({
				elem: '#table_name',
				// 分页
				page: false,
				limit: 999999,
				data: respData,
				toolbar: '#tableListToolbar',
				// 通过多个数组, 并对每行根据需求设置不同的rowspan和colspan实现表头合并
				cols: [[],[]],
				done: function (res, curr, count) {
					var params = {
						'params'
					}
					'url';


					merge(res);

				}
			});
		};

		function merge(res) {

			var data = res.data;
			var mergeIndex = 0;//定位需要添加合并属性的行数
			var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
			var columsName = ['farmId', 'farmNmame', 'breed','indate4','sex'];//需要合并的列名称
			var columsIndex = [0, 1, 2,3,4];//需要合并的列索引值

			for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
				var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
				for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
					var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
					var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列

					if (data[i][columsName[k]] === data[i - 1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
						mark += 1;
						tdPreArr.each(function () {//相同列的第一列增加rowspan属性
							$(this).attr("rowspan", mark);
						});
						tdCurArr.each(function () {//当前行隐藏
							$(this).css("display", "none");
						});
					} else {
						mergeIndex = i;
						mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
					}
				}
				mergeIndex = 0;
				mark = 1;
			}
		}

具体思路就是, 通过循环判断每一行的每一列的返回值与上一行的相同列是否相同, 如果相同就进行行合并 rowspan: mark, 然后把当前行的当前列进行隐藏, 如果不相同就就记下当前行的行号, 并把标记mark重置为1