layui table+复杂表头+合并单元格
2024-10-01 03:00:58
效果图：
问题：行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>
最新文章
- Yii2 脚本手动执行可以，计划任务执行不成功
- PHP MVC
- JS之函数表达式
- DELETE和DELETE FROM有什么区别
- java 线程的几种状态
- python中pip的安装
- Spring3.2 + Hibernate4.2
- openstack controller ha测试环境搭建记录（十五）——创建实例
- 简单的shared_ptr实现
- [转]解析多级json数据为list中嵌套一级字典的形式
- 守护模式,互斥锁,IPC通讯,生产者消费者模型
- BS架构和CS架构的区别
- mysql 下的update select from的两种方式比较
- java中synchronized关键字分析
- odoo在底部显示指定字段合计和汇总时显示合计
- 字符串转json格式
- Ng第十二课：支持向量机(Support Vector Machines)（一）
- Qt打包部署程序自动查找依赖DLL工具windeployqt
- tensorflow进阶篇-3
- CentOS 查看系统版本号