layui 表格每列相同行进行合并

table.render({elem: '#'+tableId,id: tableId,height: 300,  //加了这个可以固定表头，并且出现纵向滚动条data: table_data,page: false,limit: Number.MAX_VALUE,cols: [_cols],done: function (res, curr, count) {mergeRows(res)}
})
// 这里是从别人那里拷贝来的代码
function mergeRows(res) {var data = res.data;var mergeIndex = 0;//定位需要添加合并属性的行数var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数var columsName = ['year'];//需要合并的列名称var columsIndex = [0];//需要合并的列索引值for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列var trArr = $('div[lay-id="zlwt3yyfl1_table"] .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;}
}

layui 表格每列相同行进行合并相关推荐

awk之特征相同行的合并 ~转
awk之特征相同行的合并 ~转 awk之特征相同行的合并文本: 1001 hisk01 1001 hisk02 1001 hisk03 1002 hisk04 1002 hisk05 10 ...
html网页表格相同行自动合并,威尼斯人官网-官网首页
1.jar包添加jar包依赖,注意和Jmeter的版本相同: ApacheJMeter_core.jar,ApacheJMeter_java.jar 2.写Java请求先继承 AbstractJa ...
layui表格筛选列不随页面刷新重置
Layui table 自带筛选列的功能,但是这个筛选列会随着页面的刷新重置.用户第二次进入页面或者进行table手工渲染,都会使得筛选项重置. 本例利用layui自带的本地储存进行筛选列的数据保存, ...
layui 表格操作列按钮动态显示变换
在使用Layui的表格组件时有时会用到可变换的操作比如显示或隐藏功能,那么就需要按钮的动态变换实现方法在layui的barDome中加入如下代码 <script type="text ...
excel单元格下拉选项怎么设置_excel同列不同行内容合并到一个单元格怎么办？...
前段时间火了一阵子的<琉璃>让人欲罢不能,借着这个东风,写下了我这个公众号的第一篇小文.希望他可以成长! 言归正传,我这里有一个人物清单表,现在我想把下面每个单元格里的内容合并到一个单元格 ...
layui表格固定列覆盖滚动条导致错位
加一行代码即可 done:function(res){$(".layui-table-fixed .layui-table-body").height($(".layui ...
bootstrap表格某一列值相同时_Bootstrap-table实现动态合并相同行(表格同名合并)
有时候表格的需求就是奇奇怪怪的,最近要做的表格需要实现当紧挨着的记录的某一列的行元素内容相同,就将其合并.要是不是相同的就不合并.如果表格数据的顺序不需要被改变,这个样子是可以很简单就完成的(只需要计 ...
Vue+Element表格动态列+表格分页
LayUI表格动态列及分页LayUI+JavaScript表格动态列+表格分页效果如图: 代码: 引用JQuery,Vue,Element等文件,换成自己的路径 <!DOCTYPE html& ...
Layui表格实现显示空白行数据
在做餐饮的基础资料管理的时候,有些表格需要显示一条空白行,因为增删该三个控件按钮需要加载数据之后菜显示出来,如下所示: 上面表格最右边的控件按钮是用layui表格绑定列工具条实现的,代码如下: ...

layui 表格每列相同行进行合并

layui 表格每列相同行进行合并相关推荐

最新文章

热门文章