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 * */ @ ...
随机推荐
- HC大会，华为联合合作伙伴发布一站式物联网IoT开发工具小熊派BearPi
传统的物联网产品开发步骤复杂,涉及硬件开发.软件开发.云端开发等众多流程.而且产品的开发周期长.开发成本高.产品稳定性不佳.维护成本高.而物联网设备本身市场竞争激烈,价格低,设备更新迭代快,所以在保证 ...
- 索引很难么？带你从头到尾捋一遍MySQL索引结构，不信你学不会！
前言 Hello我又来了,快年底了,作为一个有抱负的码农,我想给自己攒一个年终总结.自上上篇写了手动搭建Redis集群和MySQL主从同步(非Docker)和上篇写了动手实现MySQL读写分离and故 ...
- Python-TCP客户端程序开发
TCP客户端,需要与服务端建立连接,连接建立成功后才可以进行数据的传输. # 1.导入模块 import socket if __name__ == '__main__': # 2.创建套接字对象 t ...
- Python常用转义字符
\ 在行尾时是 续行符 \\ 反斜杠符号 \' 单引号 \" 双引号 \a 响铃 \b 退格 \e 转义 \000 空 \n 换行 \v 纵向制表符 \t ...
- python中for循环删除不全的问题
以前遇到过一次,删除列表中符合条件的元素,for循环挨个判断是否符合条件,符合就删除,删完结果发现有一个符合条件的没有删掉. 那么如果想删除某些列表中的元素,比如有一个a列表,a=[11,22,33, ...
- [TimLinux] Python 迭代器(iterator)和生成器(generator)
1. 可迭代对象 from collection import Iterable class Iterable(metaclass=ABCMeta): ... def __iter__(self): ...
- acm模板总结
模板链接 字符串模板 KMP EXKMP Trie 可持久化Trie树+DFS序 01Trie Manacher 字符串哈希 2019上海网络赛G题 17 SA(后缀数组) 最大不重叠相似子串 求两 ...
- Coderfocers-551C
Professor GukiZ is concerned about making his way to school, because massive piles of boxes are bloc ...
- python光标图片获取
# -*- coding:utf-8 -*- import win32api import win32gui,win32ui import time while True : time.sleep(1 ...
- linux需要了解的网络基础知识
第1章 网络命令 1.1 用户模式下的命令 1.1.1 enable切换到特权模式 Router>enable Router# 特权模式 Router# Router# 1.2 特权模式下的命令 ...