layui table+复杂表头+合并单元格
效果图：
问题：行hover效果感觉错乱 所以改为透明色
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复杂表头+select下拉框默认值+单元格合并</title>
<script src="../../../static/lib/layui/layui.js" charset="utf-8"></script>
<style>
/*select下拉框显示*/
td[data-field="qualityStatus"]>div {
overflow: inherit;
}
/*去除行点击、hover背景色*/
.layui-table tbody tr:hover , .layui-table-hover , .layui-table-click{
background-color: rgba(255,255,255,0);
}
</style>
</head>
<body>
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-body">
<table class="layui-hide" id="qua_standard_table" lay-filter="qua_standard_table"></table>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
layui.use(['element','upload','laydate','table','form'], function(){
var element = layui.element
,table = layui.table,
laypage = layui.laypage,
form = layui.form,
upload = layui.upload,
laydate = layui.laydate;
//模拟数据
var selectdata = [
{
amountOfMoney: 5000,
basicMeasurement: "kg",
certificateNumber: "内容15",
concession: null,
contentId: null,
disqualification: null,
explains: "内容67",
files: null,
id: 2,
inspectContent: "内容22",
inspectContentNumber: "内容0000",
inspector: null,
inspectorDate: null,
inspectorDescription: null,
isNumber: null,
main: null,
manufacturer: "内容44",
materialId: 14,
materialName: "内容4",
materialNo: "内容一",
materialSize: "2*3",
meId: null,
orderAmount: 100,
orderId: 1,
orderPrice: 20,
orderedInAmount: 0,
projectName: "其他",
purchaseMeasurement: "kg",
qualified: null,
qualityStatus: null,
qualityTestedInAmount: 9,
standard: "内容11",
undetectedCount: 91,
},
{
amountOfMoney: 5000,
basicMeasurement: "kg",
certificateNumber: "内容14",
concession: null,
contentId: null,
disqualification: null,
explains: "内容66",
files: null,
id: 2,
inspectContent: "内容33",
inspectContentNumber: "内容1111",
inspector: null,
inspectorDate: null,
inspectorDescription: null,
isNumber: null,
main: null,
manufacturer: "内容44",
materialId: 14,
materialName: "内容4",
materialNo: "内容一",
materialSize: "2*3",
meId: null,
orderAmount: 100,
orderId: 1,
orderPrice: 20,
orderedInAmount: 0,
projectName: "其他",
purchaseMeasurement: "kg",
qualified: null,
qualityStatus: null,
qualityTestedInAmount: 9,
standard: "内容001",
undetectedCount: 91,
},
{
amountOfMoney: 5000,
basicMeasurement: "kg",
certificateNumber: "内容15",
concession: null,
contentId: null,
disqualification: null,
explains: "内容67",
files: null,
id: 1,
inspectContent: "内容22",
inspectContentNumber: "内容0000",
inspector: null,
inspectorDate: null,
inspectorDescription: null,
isNumber: null,
main: null,
manufacturer: "内容45",
materialId: 13,
materialName: "内容3",
materialNo: "内容二",
materialSize: "2*3",
meId: null,
orderAmount: 100,
orderId: 1,
orderPrice: 20,
orderedInAmount: 0,
projectName: "其他",
purchaseMeasurement: "kg",
qualified: null,
qualityStatus: null,
qualityTestedInAmount: 12,
standard: "内容11",
undetectedCount: 88,
},
{
amountOfMoney: 5000,
basicMeasurement: "kg",
certificateNumber: "内容14",
concession: null,
contentId: null,
disqualification: null,
explains: "内容66",
files: null,
id: 1,
inspectContent: "内容33",
inspectContentNumber: "内容1111",
inspector: null,
inspectorDate: null,
inspectorDescription: null,
isNumber: null,
main: null,
manufacturer: "内容45",
materialId: 13,
materialName: "内容3",
materialNo: "内容二",
materialSize: "2*3",
meId: null,
orderAmount: 100,
orderId: 1,
orderPrice: 20,
orderedInAmount: 0,
projectName: "其他",
purchaseMeasurement: "kg",
qualified: null,
qualityStatus: null,
qualityTestedInAmount: 12,
standard: "内容001",
undetectedCount: 88,
}
] //主页面数据
table.render({
elem: '#qua_standard_table',
id:'qua_standard_table',
//url:'',
data:selectdata,
method:'POST',
title: '数据表',
height: 'full-60',
cellMinWidth: 120,
size: 'lg',
cols:[[
{align:'center',rowspan:2, title:'序号',width:100,type:'numbers',field: 'num',fixed:'left'},
{align:'center',rowspan:2,field: 'id', title: 'ID',hide:true},//隐藏列
{align:'center',rowspan:2,field:'materialNo', title:'表头',width:100},
{align:'center',rowspan:2,field:'materialName', title:'表头'},
{align:'center',rowspan:2,field:'projectName', title:'表头'},
{align:'center',rowspan:2,field:'purchaseMeasurement', title:'表头'},
{align:'center',rowspan:2,field:'inspectContentNumber', title:'表头'},
{align:'center',rowspan:2,field:'inspectContent', title:'表头'},
{align:'center',rowspan:2,field:'standard', title:'表头'},
{align:'center',rowspan:2,field:'explains', title:'表头'},
{align:'center',rowspan:2,field:'qualityStatus', title:'结果',templet: function (d) {
if(d.qualityStatus == null){
return '<select name="qualityStatus" lay-filter="testSelect" lay-verify="required" >' +
' <option value="0" selected>合格</option>' +
' <option value="1">不合格</option>' +
' </select>';
} }},
{align:'center',rowspan:2,field:'certificateNumber', title:'表头',templet: function (d) {
if(d.certificateNumber==null || d.certificateNumber==''){
return '无'
}else{
return d.certificateNumber
}
}},
{align:'center',rowspan:2,field:'undetectedCount', title:'表头'},
{align:'center',field:'resultNum', title:'表头',colspan:3},
{align:'center',rowspan:2,field:'qualityTestedInAmount', title:'表头'},
{align:'center',rowspan:2,field:'manufacturer', title:'表头'},
{align:'center',rowspan:2,field:'certificate', title:'表头', templet: function (d) {
return '<span class="layui-breadcrumb" lay-separator="|">' +
'<a href="javascript:;" lay-event="qua_standard_edit">添加附件</a>' +
'</span>';
},fixed:'right'},
{align:'center',rowspan:2,width:100,field: 'operation', title: '操作', templet: function (d) {
return '<span class="layui-breadcrumb" lay-separator="|">' +
'<a href="javascript:;" lay-event="qua_standard_del">删除</a>' +
'</span>';
},fixed:'right'}
],
[
{align:'center',field:'qualified', title:'表头', edit: 'number'},
{align:'center',field:'disqualification', title:'表头', edit: 'number'},
{align:'center',field:'concession', title:'表头', edit: 'number'},
]
],
done: function (res, curr, count) {
element.init();
$('#qua_standard_table').siblings('div').find('dl').find('.layui-this').click();//模拟点击 初始化数据
merge(res);//合并单元格
}
}); $('#receiptForm1').on('keyup','.layui-table-edit',function () {
this.value=this.value.replace(/^(0+)|[^\d]+/g,'')//TODO
}); //行事件
table.on('tool(qua_standard_table)', function(obj){ if(obj.event === 'qua_standard_edit'){
layer.msg('添加')
}else if(obj.event === 'qua_standard_del'){
layer.msg('删除')
}
}); });
//layui 结束 //合并开始
function merge(res) {
var data = res.data;
var mergeIndex = 0;//定位需要添加合并属性的行数
var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
var _number = 1;//保持序号列数字递增
var columsName = ['num','number','typeName','projectName','unit','suppliedNum','qualified','disqualification','concession','sum','manufacturer','certificate','operation'];//需要合并的列名称
var columsIndex = [0,2,3,4,5,12,13,14,15,16,17,18,19];//需要合并的列索引值
var mergeCondition = 'id';//需要合并的 首要条件 在这个前提下进行内容相同的合并
var tdArrL = $('.layui-table-fixed-l > .layui-table-body').find("tr");//序号列左定位产生的table tr
var tdArrR = $('.layui-table-fixed-r > .layui-table-body').find("tr");//操作列定右位产生的table tr for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
var trArr = $(".layui-table-main>.layui-table").find("tr");//所有行
for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据 if (data[i][mergeCondition] === data[i-1][mergeCondition]) {
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就需要重新计算
}
} else {
mergeIndex = i;
mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
} }
mergeIndex = 0;
mark = 1;
} //操作左右定位列的表格
$.each($("#qua_standard_table").siblings('.layui-table-view').find('.layui-table-main>.layui-table').find("tr"),function (i,v) {
if ($(v).find('td').eq(2).css('display') === 'none') {
tdArrL.eq(i).find('td').css('display','none');
tdArrR.eq(i).find('td').css('display','none');
} else {
tdArrL.eq(i).find('td').find('.laytable-cell-numbers').html(_number++);
tdArrL.eq(i).find('td').css('height',$(v).find('td').eq(2)[0].clientHeight);
tdArrR.eq(i).find('td').css('height',$(v).find('td').eq(2)[0].clientHeight); }
}) }
//合并结束
</script>
</html>
layui table+复杂表头+合并单元格的更多相关文章
- Datatables js 复杂表头 合并单元格
x →Datatables官网← x 项目中用到的Table都是用Datatables插件来搞得: 以前都是生成一般性的table: 近期要生成一些复杂表头,合并单元格之类的: 研究了一下. x 去官 ...
- 带复杂表头合并单元格的HtmlTable转换成DataTable并导出Excel
步骤: 一.前台JS取HtmlTable数据,根据设定的分隔符把数据拼接起来 <!--导出Excel--> <script type="text/javascript&qu ...
- layui 动态表格之合并单元格
需求: 下面用excel表格大概模拟下需求,左边是原来的,要改成右边这样的: ①第一步:再生成表格后调用此方法,以合并重复的单元格 done : function(res, curr, count) ...
- layui：数据表格如何合并单元格
layui.use('table', function () { var table = layui.table; table.render({ elem: '#applyTab' , url: '$ ...
- vue中 表头th 合并单元格，且表格列数不定的动态渲染方法
吐槽 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头的单元格,且合并单元格的那列还是动态数据,也就是说你不知道会有多少组要合并起来,哎,我也有点说不清楚,废话不多说了,看代码把: 代码示例 da ...
- Qt实现表格控件-支持多级列表头、多级行表头、单元格合并、字体设置等
目录 一.概述 二.效果展示 三.定制表头 1.重写数据源 2.重写QHeaderView 四.设置属性 五.相关文章 原文链接:Qt实现表格控件-支持多级列表头.多级行表头.单元格合并.字体设置等 ...
- vue中 表头 th 合并单元格，且表格列数不定的动态渲染方法
吐槽 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是不知道会有多少个表头列,而这几个表头列还分了好几个子表头. 这个需求在js里用Ju ...
- NPOI操作EXCEL（五）——含合并单元格复杂表头的EXCEL解析
我们在第三篇文章中谈到了那些非常反人类的excel模板,博主为了养家糊口,也玩命做出了相应的解析方法... 我们先来看看第一类复杂表头: ...... 博主称这类excel模板为略复杂表头模板(蓝色部 ...
- poi导出Excel报表多表头双层表头、合并单元格
效果图: controller层方法: /** * * 导出Excel报表 * @param request * @return * */ @ ...
随机推荐
- ios 10 更新 新体验
1.使用手机登录开发者网站https://developer.apple.com/download/ 2.下载描述文件 3.安装描述文件,按照提示步骤操作 4.更新ios系统 下面的方法是连接电脑直接 ...
- Java修炼——异常的概念以及处理方式（捕获异常）
异常概念分类 异常( Exception 也称例外)就是在程序的运行过程中 所发生的不正常的事件,它会中断正在运行的程序 所需文件找不到 网络连接不通或中断 算术运算错 (被零除-) ...
- LightOj-1030 Discovering Gold (期望DP)
You are in a cave, a long cave! The cave can be represented by a 1 x N grid. Each cell of the cave c ...
- linux 安装jmeter
一 下载jdk sudo apt install oracle-java8-installer 二 网站下载 jmeter 三 对jmeter文件夹 赋权 我都是777 chmod -R 777 ap ...
- Python爬虫技术：爬虫时如何知道是否代理ip伪装成功？
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. python爬虫时如何知道是否代理ip伪装成功: 有时候我们的爬虫程序添加了 ...
- F#周报2019年第50期
新闻 Azure Functions 3.0系统上线 GC性能架构--第1部分 ConfigureAwait问题解答 介绍System.Threading.Channels Windows Serve ...
- 使用iCamera 测试MT9F002 1400w高分辨率摄像头小结 之！！看清细节！！！
使用iCamera 测试MT9F002 1400w高分辨率摄像头小结 之!!看清细节!!! 本方案测试两种种分辨率输出(其他更多分辨率设置,可以参考手册配置) 4608*3288=1515万像素 11 ...
- redis第一讲【redis的描述，linux和docker下的安装使用】
Redis(REmote DIctionary Server):是什么 redis(远程字典服务器),是完全开源免费的,高性能的k/v分布式内存数据,热门的Nosql数据库 Redis可以干什么: 内 ...
- 350. 两个数组的交集 II
给定两个数组,编写一个函数来计算它们的交集. 示例 1: 输入: nums1 = [1,2,2,1], nums2 = [2,2] 输出: [2,2] 示例 2: 输入: nums1 = [4,9,5 ...
- 联合查询和数据库设计e-r图
联合查询: 联合查询的关键字是: union 基本含义 联合查询就是将两个select语句的查询结果“层叠”到一起成为一个“大结果”. 两个查询结果的能够进行“联合”的先觉条件是:结果字段数相等. 就 ...