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 * */ @ ...
随机推荐
- request获取路径
1.request.getRequestURL() 返回的是完整的url,包括Http协议,端口号,servlet名字和映射路径,但它不包含请求参数. 2.request.getRequestURI( ...
- luogu P3183 [HAOI2016]食物链 |记忆化搜索
如图所示为某生态系统的食物网示意图,据图回答第1小题现在给你n个物种和m条能量流动关系,求其中的食物链条数.物种的名称为从1到n编号M条能量流动关系形如a1 b1a2 b2a3 b3......am- ...
- idea建立项目关联到git仓库操作步骤
eg:创建一个名为demo的git项目 创建git远程项目,命名为[/demo] 在[D:\workspace\gf]创建本地项目[demo] 在idea里选择[VCS]->[Checkout ...
- Sring+mybatis模拟银行转账
实体类: package com.bjsxt.pojo; import java.io.Serializable; public class Account implements Serializab ...
- 笔记||Python3之字符串
字符串是Python中最常用的数据类型.我们可以使用引号('或''或''')来创建字符串. 三引号特点:可以多行,也可以多行注释. a = 'hello world' a = "hello ...
- Spring、SpringMVC、SpringBoot、SpringCloud的区别与联系
前言 Spring是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架.Spring使你能够编写更干净.更可管理.并且更易于测试的代码. Spring MVC是Spring的一个模块,一个w ...
- python爬虫--模拟12306登录
模拟12306登录 超级鹰: #!/usr/bin/env python # coding:utf-8 import requests from hashlib import md5 class Ch ...
- angular6路由参数的传递与获取
1.访问路由链接:/test/id 路由配置: {path: 'test/:id', component: TestComponent} html传参: <a href="javasc ...
- Windows10 中的字母映射表
有很多朋友为寻找特殊字符串而感到烦恼, windows10中的字符映射表有所有字体 包含的特殊符号 windows键 + R键 输入 charmap 点击确定 即可出现 字母映射表 可在字符的下拉按钮 ...
- SSM（Spring+SpringMVC+Mybatis）框架整合
1.数据准备 SET FOREIGN_KEY_CHECKS=0; -- ---------------------------- -- Table structure for `admin` -- - ...