layui:数据表格如何合并单元格
layui.use('table', function () {
var table = layui.table; table.render({
elem: '#applyTab'
, url: '${cxt}/yptPreferentialApply/detail_data?id=${detailId}'
, cols: [[
{field: 'goodsName', title: '产品名称'}
, {
field: 'priceType', title: '价格类型', templet: function (d) {
switch (d.priceType) {
case "0":
return "免费";
case "1":
return "按次";
case "2":
return "包天";
case "3":
return "包月";
case "4":
return "包年";
case "5":
return "包时";
}
}
}
, {field: 'price', title: '单价'}
, {field: 'discount', title: '折扣(%)'}
, {field: 'preferentialPrice', title: '优惠价格'}
, {field: 'chargeUnit', title: '计价单位'}
]]
, done: function (res, curr, count) {
merge(res, curr, count);
}
}); }); /**
* 合并单元格
* @param res 表格数据
* @param curr 当前页
* @param count 总数
*/
function merge(res, curr, count) {
var data = res.data;
var mergeIndex = 0;//定位需要添加合并属性的行数
var mark = 1; //这里涉及到简单的运算,mark是计算每次需要合并的格子数
var columsName = ['goodsName'];//需要合并的列名称
var columsIndex = [0];//需要合并的列索引值 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就需要重新计算
}
}
}
}
多列合并:
/**
* 合并单元格
* @param res 表格数据
* @param curr 当前页
* @param count 总数
*/
function merge(res, curr, count) {
var data = res.data;
//alert(JSON.stringify(data));
var mergeIndex = 0;//定位需要添加合并属性的行数
var mark = 1; //这里涉及到简单的运算,mark是计算每次需要合并的格子数
var columsName = ['CusID'];//需要合并的列名称
var columsIndex = [0];//需要合并的列索引值
for (var k = 0; k < columsName.length; k++)//这里循环所有要合并的列
{
mark = 1;
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]]) { //后一行的值与前一行的值做比较,相同就需要合并
// alert(data[i][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; //这里涉及到简单的运算,mark是计算每次需要合并的格子数
columsName = ['CusName'];//需要合并的列名称
columsIndex = [1];//需要合并的列索引值
for (var k = 0; k < columsName.length; k++)//这里循环所有要合并的列
{
mark = 1;
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]]) { //后一行的值与前一行的值做比较,相同就需要合并
// alert(data[i][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就需要重新计算
}
}
}
}
layui:数据表格如何合并单元格的更多相关文章
- layui 动态表格之合并单元格
需求: 下面用excel表格大概模拟下需求,左边是原来的,要改成右边这样的: ①第一步:再生成表格后调用此方法,以合并重复的单元格 done : function(res, curr, count) ...
- layui table+复杂表头+合并单元格
效果图: 问题:行hover效果感觉错乱 所以改为透明色 代码: <!DOCTYPE html> <html lang="en"> <head> ...
- JS动态生成表格后 合并单元格
JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...
- .Net用字符串拼接实现表格数据相同时合并单元格
前言 最近在做项目通过GridView或Repeater绑定数据,如果两行或若干行某列值相同,需要进行合并单元格,但是实现过程中想到了字符串拼接,于是就没用绑定数据控件,而是用了html结合字符串实现 ...
- poi生成表格自动合并单元格
直接复制这个工具类即可使用: /** * 合并单元格 * @author tongyao * @param sheet sheet页 * @param titleColumn 标题占用行 * @par ...
- java使用freemarker模板导出word(带有合并单元格)文档
来自:https://blog.csdn.net/qq_33195578/article/details/73790283 前言:最近要做一个导出word功能,其实网上有很多的例子,但是我需要的是合并 ...
- jquery操作表格 合并单元格
jquery操作table,合并单元格,合并相同的行 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * ...
- Aspose.Cells 首次使用,用到模版填充数据,合并单元格,换行
Aspose.Cells 首次使用,用到模版填充数据,合并单元格,换行 模版格式,图格式是最简单的格式,但实际效果不是这种,实际效果图如图2 图2 ,注意看红色部分,一对一是正常的,但是有一对多的订单 ...
- 议:如何将树形菜单形式的数据转化成HTML的二维表(相同内容需合并单元格)
一般做OA类管理系统,经常涉及到“组织架构”的概念,那么像这种有上下层级关系的数据一般会做成树形菜单的方式显示,底层代码必定会用到递归算法.这篇随笔的目的就是要谈谈除了用树形菜单来显示这种上下层级关系 ...
随机推荐
- mongoDB-Cannot change the size of a document in a capped collection:
简单记录一下: 造成该问题的原因是集合被设置成了 固定集合 .固定集合的数据不能被修改.只能查找-删除-再插入
- Oracle学习DayOne(SQL初步)
一.DML.DDL.DCL SQL语句分为以下三种类型: DML: Data Manipulation Language 数据操纵语言DDL: Data Definition Language 数据定 ...
- console.log()中的运算与打印事件
var p=function() { var i = 0; function b() { console.log(i--);//先打印再减一 //console.log(--i);先减一再打印 } f ...
- python面向对象之静态属性/静态方法/类方法/组合
继续学习,不要松懈 #!/usr/bin/env python # coding:utf-8 class Campus: def __init__(self,name,addr,type): self ...
- MySQL 把两个结果集拼接到一起(两个结果集的列一模一样)
select * from a UNION all ( select * from b)
- 【原创】ACR傻瓜式破解IC芯片卡
1.简介: 智能卡(英语:Smart card 或IC Card),又称智慧卡.聪明卡.集成电路卡及IC卡,是指粘贴或嵌有集成电路芯片的一种便携式卡片塑料.卡片包含了微处理器.I/O接口及存储器,提供 ...
- KUANGBIN带你飞
KUANGBIN带你飞 全专题整理 https://www.cnblogs.com/slzk/articles/7402292.html 专题一 简单搜索 POJ 1321 棋盘问题 //201 ...
- GDB程序调试
GDB使用流程 1.编译生成可执行文件: gcc -g tst.c -o tst2.启动GDB gdb tst3. 在main 函数处设置断点 break main4. 运行程序 run GDB 命令 ...
- PHP 位运算
$a & $b a,b二进制后,取得每对应为都有1的部分,然后再转换为十进制 $a | $b a,b二进制后,取得每对应为只要有1的部分,然后再转换为十进制 $a >&g ...
- SAMTOOLS使用 SAM BAM文件处理
[怪毛匠子 整理] samtools学习及使用范例,以及官方文档详解 #第一步:把sam文件转换成bam文件,我们得到map.bam文件 system"samtools view -bS m ...