博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
layui 动态表格之合并单元格
阅读量:5274 次
发布时间:2019-06-14

本文共 1539 字,大约阅读时间需要 5 分钟。

 需求:

下面用excel表格大概模拟下需求,左边是原来的,要改成右边这样的:

 

①第一步:再生成表格后调用此方法,以合并重复的单元格

done : function(res, curr, count) {        merge(res); }

 

②第二步:编写这个方法:

function merge(res) {                    var data = res.data;        var mergeIndex = 0;//定位需要添加合并属性的行数        var mark = 1; //这里涉及到简单的运算,mark是计算每次需要合并的格子数        var columsName = ['id','name'];//需要合并的列名称        var columsIndex = [0,1];//需要合并的列索引值            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; } }

 

转载于:https://www.cnblogs.com/Kingram/p/9781682.html

你可能感兴趣的文章
语音识别中的MFCC的提取原理和MATLAB实现
查看>>
0320-学习进度条
查看>>
MetaWeblog API Test
查看>>
移动、尺寸改变
查看>>
c# 文件笔记
查看>>
类和结构
查看>>
typeset shell 用法
查看>>
python 之 循环语句
查看>>
心得25--JDK新特性9-泛型1-加深介绍
查看>>
[转]ceph网络通信模块_以monitor模块为例
查看>>
HDOJ 1754 I Hate It(线段树基本操作)
查看>>
latex tree
查看>>
安装NVIDIA驱动时禁用自带nouveau驱动
查看>>
HDU-1255 覆盖的面积 (扫描线)
查看>>
【USACO】 奶牛会展
查看>>
继承和多态
查看>>
Dijkstra+计算几何 POJ 2502 Subway
查看>>
修复IE不能执行JS的方法
查看>>
程序员究竟该如何提高效率zt
查看>>
希尔排序法(缩小增量法)
查看>>