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 * */ @ ...
随机推荐
- 一文读懂Python web框架和web服务器之间的关系
我们都知道 Python 作为一门强大的语言,能够适应快速原型和较大项目的制作,因此被广泛用于 web 应用程序的开发中. 在面试的过程中,大家或多或少都被问到过这样一个问题:一个请求从浏览器发出到数 ...
- springcloud+kafka集群
上节说了kafka在linux环境下怎么搭建集群.这节写一下怎么在springcloud中以stream流方式去做kafka集群对接. 1.yml配置 #spring Cloud kafka -- s ...
- c获取shell中的参数
问题背景 在Linux中我们会使用到shell,来完成输入参数的获取,就如同下面的形式,这种形式在进行多语言编程和调用有着非常重要的作用 一.传递的过程 1.1 原理模型如下: 1.1.1 可执行sh ...
- Python超简单的爬取网站中图片
1.首先导入相关库 import requests import bs4 import threading #用于多线程爬虫,爬取速度快,可以完成多页爬取 import os 2.使用bs4获取htm ...
- 使用Carthage集成Alamofire
Carthage相较于Cocoapods有着使用灵活,对目标工程改动小的优势,使得它越来越受欢迎.今天就对我使用Carthage集成FBSDK做一个记录. 1.首先https://github.com ...
- APP Distribution Guide 苹果官网
https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/Introduct ...
- React-Native——html/css
做前端开发,熟悉了HTML+CSS+JS的开发模式,如果不看RN原理,直接用老一套的逻辑思维上手RN,可能会大跌眼镜.高效开发的前提,需要学习并理解RN的原理.本文主要记录内容是,关于RN开发的HTM ...
- CoderForces Round54 (A~E)
ProblemA Minimizing the String 题目链接 题解:这一题读完题就写了吧.就是让你删除一个字母,使得剩下的字符组成的字符串的字典序最小:我们只要第一个当前位置的字符比下一个字 ...
- 如何妙用Spring 数据绑定机制？
前言 在剖析完 「Spring Boot 统一数据格式是怎么实现的? 」文章之后,一直觉得有必要说明一下 Spring's Data Binding Mechanism 「Spring 数据绑定机制」 ...
- Qt5教程: (9) Qt多线程
目录 0. 创建工程 1. QThread 源码一览 2. QThread相关方法介绍 2.1 启动线程 2.2 关闭线程 2.3 阻塞线程 2.4线程状态判断 2.5 设置优先级 2.6 信号 3. ...