本文介绍如何在LayUI框架中实现单击行内容展示子表的手风琴效果，包括具体的CSS样式设置和JavaScript代码实现。
LayUI-单击行内容展示子表（手风琴效果）
【百度了好多办法，都不能达到这种效果，所以记录一下(●’◡’●)】
最开始使用layui-soul-table，但是它不能实现单击行内容展示子表，而是单击行最左列展示子表，所以与项目不符，则放弃了，但是感兴趣的小萝卜儿们可以去瞧瞧哟~，万一对你们的项目有帮助呢🤭
那就来看看最后的实现方式吧~
一、效果图
1、动图
2、细节图
二、单针对子表的代码
CSS：
/*子表的样式*/
.thead {background-color: rgba(255, 175, 16,0.2);text-align: center;}
.tbody {background-color: rgba(255, 175, 16, 0.1);text-align: center;}
JS：
// 下面两个全局变量均是为了提高用户的体验满意度滴(●'◡'●)
var flag = true; // 判断是否实现手风琴效果
// var isHaveChild = true; // 判断是否展示子表。实现 当点击父表中的添加详情按钮，不能展示子表
layui.use('table', function(){
var table = layui.table;
// 单击父表表格中的某一行
table.on('row(test)',function (obj) {
// console.log(obj.tr) //得到当前行元素对象
// 修改父表当前行的样式
obj.tr.css({'background':'rgba(0,150,136,0.1)'}).siblings().removeAttr('style')
var data = obj.data; //得到当前行元素数据
if(flag) {
// 实现手风琴效果
$('.thead').remove();
$('.tbody').remove();
}
// 展示子表数据（子表有数据的情况）
// if(data.detail.length > 0 && isHaveChild) {
if(data.detail.length > 0) {
// 单击行显示出的表格的表体
for(var i = data.detail.length-1;i >=0;i--) {
var html = '<tr class="tbody">' +
'<td></td>\n' +
'<td>'+(data.detail[i].type == 0 ? '基础薪资': '最低薪资')+'</td>\n' +
'<td>'+data.detail[i].minleave+'</td>\n' +
'<td>'+data.detail[i].maxleave+'</td>\n' +
'<td>'+data.detail[i].percentage+'</td>\n' +
'<td>' +
'<a class="layui-btn layui-btn-xs" οnclick="edit_childData('+data.detail[i].id+')">编辑</a>\n' +
'<a οnclick="del_childData('+data.detail[i].id+')" class="layui-btn delete_btn layui-btn-xs">删除</a>' +
'</td>\n' +
'</tr>';
obj.tr.after(html); // 注意这儿要用after
}
// 单击行显示出的表格的表头
var html = '<tr class="thead">\n' +
' <td></td>\n' +
' <td>薪资类型</td>\n' +
' <td>最小值</td>\n' +
' <td>最大值</td>\n' +
' <td>扣除薪资百分比</td>\n' +
' <td></td>\n' +
' </tr>';
obj.tr.after(html); // 注意这儿要用after
}
});
});
// 点击子表对应行的编辑按钮【注意：不要放在layui.use('table',function() {});里面，不然会没有效果滴】
function edit_childData(id) {
flag = false; // 不开启手风琴效果，不然当点击子表的编辑按钮后，子表会消失
layer.open({
type: 2, // iframe层
shadeClose:true, // 点击遮罩层部分，弹窗可以关闭
title:'编辑',
area:['500px','360px'], // 宽高
// area:['1200px','1200px'], // 宽高
content: "{:url('attendance.leave/editLeaveDetail')}?id="+id, // 需要弹出的页面地址
end: function () { // 层彻底销毁后的回调函数
flag = true; // 子表的编辑弹窗消失后，开启手风琴效果
}
})
}
// 点击子表对应行的删除按钮【注意：不要放在layui.use('table',function() {});里面，不然会没有效果滴】
function del_childData(id) {
flag = false; // 不开启手风琴效果，不然当点击子表的删除按钮后，子表会消失
$.ajax({
url: "{:url('attendance.leave/delLeaveDetail')}",
data: {id:id},
type: 'post',
dataType: 'json',
success: function (res) {
if(res.sta == 2000) {
layer.msg(res.msg,{icon:1},function () {
// 调用函数-重载表格数据
reload();
})
} else {
layer.msg(res.msg,{icon:2})
}
}
})
}
三、项目全代码
上面代码是针对子表的，对于父表的代码未进行给出，全部代码见下面(●’◡’●)
CSS：
{include file="system@block/layui" /}
<style>
.z{width: 100%;margin: auto;padding-top: 20px;}
.detail_btn {background-color: #ffaf10;}
/*删除按钮的样式*/
.delete_btn {background-color: #E9221B;}
/*子表的样式*/
.thead {background-color: rgba(255, 175, 16,0.2);text-align: center;}
.tbody {background-color: rgba(255, 175, 16, 0.1);text-align: center;}
</style>
HTML：
<!--表格-->
<table class="layui-hide" id="test" lay-filter="test"></table>
<!--头工具栏事件-->
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="addNews" >添加类型</button>
</div>
</script>
<!--行工具事件-->
<script type="text/html" id="barDemo">
<a onclick="godedit('{{d.id}}')" class="layui-btn layui-btn-xs">编辑</a>
<a class="layui-btn layui-btn-xs detail_btn" onclick="add_detail('{{d.id}}')">添加详情</a>
</script>
JS：
<script>
// 下面两个全局变量均是为了提高用户的体验满意度滴(●'◡'●)
var flag = true; // 判断是否实现手风琴效果
var isHaveChild = true; // 判断是否展示子表。实现 当点击父表中的添加详情按钮，不能展示子表
layui.use('table', function(){
var table = layui.table;
// 表格数据渲染
table.render({
elem: '#test'
,url:"{:url('leaveindex')}"
,toolbar: '#toolbarDemo'
,title: '请假类型数据表'
,limit:20
,id: 'testReload'
,cols: [[
{field: 'id', align:'center',title: 'ID'}
,{field: 'title', align:'center',title: '名称'}
,{field: 'day', align:'center',title: '金额免除天数（天）'}
,{field: 'bonus_day', align:'center',title: '全勤免除天数（天）'}
,{field: 'date',align:'center', title: '写入时间'}
,{field: 'action',align:'center', title: '操作',templet:'#barDemo'}
]]
,done: function () {
}
,page: true
});
// 封装函数reload-表格重载数据【里面的testReload对应table.render里面的id值】
window.reload = function() {
//执行重载
table.reload('testReload', {
page: {
curr: 1 //重新从第 1 页开始
}
}, 'data');
flag = true; // 当点击删除按钮，父表重载数据后，可以打开手风琴效果
}
// 头工具栏事件-添加类型按钮
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'addNews':
layer.open({
type: 2, // iframe层
shadeClose:true, // 点击遮罩层部分，弹窗可以关闭
move: false, // 弹窗不可拖曳
title:'添加类型',
area:openD().area, // 宽高
offset:openD().offset,
content:"{:url('addleave')}" // 需要弹出的页面地址
})
break;
};
});
// 单击父表表格中的某一行
table.on('row(test)',function (obj) {
// console.log(obj.tr) //得到当前行元素对象
// 修改父表当前行的样式
obj.tr.css({'background':'rgba(0,150,136,0.1)'}).siblings().removeAttr('style')
var data = obj.data; //得到当前行元素数据
if(flag) {
// 实现手风琴效果
$('.thead').remove();
$('.tbody').remove();
}
// 展示子表数据（子表有数据的情况）
if(data.detail.length > 0 && isHaveChild) {
// 单击行显示出的表格的表体
for(var i = data.detail.length-1;i >=0;i--) {
var html = '<tr class="tbody">' +
'<td></td>\n' +
'<td>'+(data.detail[i].type == 0 ? '基础薪资': '最低薪资')+'</td>\n' +
'<td>'+data.detail[i].minleave+'</td>\n' +
'<td>'+data.detail[i].maxleave+'</td>\n' +
'<td>'+data.detail[i].percentage+'</td>\n' +
'<td>' +
'<a class="layui-btn layui-btn-xs" οnclick="edit_childData('+data.detail[i].id+')">编辑</a>\n' +
'<a οnclick="del_childData('+data.detail[i].id+')" class="layui-btn delete_btn layui-btn-xs">删除</a>' +
'</td>\n' +
'</tr>';
obj.tr.after(html); // 注意这儿要用after
}
// 单击行显示出的表格的表头
var html = '<tr class="thead">\n' +
' <td></td>\n' +
' <td>薪资类型</td>\n' +
' <td>最小值</td>\n' +
' <td>最大值</td>\n' +
' <td>扣除薪资百分比</td>\n' +
' <td></td>\n' +
' </tr>';
obj.tr.after(html); // 注意这儿要用after
}
});
});
// 点击子表对应行的编辑按钮【注意：不要放在layui.use('table',function() {});里面，不然会没有效果滴】
function edit_childData(id) {
flag = false; // 不开启手风琴效果，不然当点击子表的编辑按钮后，子表会消失
layer.open({
type: 2, // iframe层
shadeClose:true, // 点击遮罩层部分，弹窗可以关闭
title:'编辑',
area:['500px','360px'], // 宽高
// area:['1200px','1200px'], // 宽高
content: "{:url('attendance.leave/editLeaveDetail')}?id="+id, // 需要弹出的页面地址
end: function () { // 层彻底销毁后的回调函数
flag = true; // 子表的编辑弹窗消失后，开启手风琴效果
}
})
}
// 点击子表对应行的删除按钮【注意：不要放在layui.use('table',function() {});里面，不然会没有效果滴】
function del_childData(id) {
flag = false; // 不开启手风琴效果，不然当点击子表的删除按钮后，子表会消失
$.ajax({
url: "{:url('attendance.leave/delLeaveDetail')}",
data: {id:id},
type: 'post',
dataType: 'json',
success: function (res) {
if(res.sta == 2000) {
layer.msg(res.msg,{icon:1},function () {
// 调用函数-重载表格数据
reload();
})
} else {
layer.msg(res.msg,{icon:2})
}
}
})
}
// 点击父表对应行的添加详情按钮【注意：不要放在layui.use('table',function() {});里面，不然会没有效果滴】
function add_detail(id) {
isHaveChild = false; // 当点击父表的添加详情按钮后，让子表会消失
layer.open({
type: 2, // iframe层
shadeClose:true, // 点击遮罩层部分，弹窗可以关闭
title:'添加详情',
area:['500px','360px'], // 宽高
// area:['1200px','1200px'], // 宽高
content: "{:url('attendance.leave/addLeaveDetail')}?id="+id, // 需要弹出的页面地址
end: function () { // 层彻底销毁后的回调函数
isHaveChild = true; // 父表的添加详情弹窗消失后，开启手风琴效果
}
})
}
// 点击父表对应行的编辑按钮【注意：不要放在layui.use('table',function() {});里面，不然会没有效果滴】
function godedit(id) {
isHaveChild = false; // 当点击父表的编辑按钮后，让子表会消失
layer.open({
type: 2, // iframe层
shadeClose:true, // 点击遮罩层部分，弹窗可以关闭
move: false, // 弹窗不可拖曳
title:'编辑',
area:openD().area, // 宽高
offset:openD().offset,
content:"{:url('editleave')}?id="+id, // 需要弹出的页面地址
end: function () { // 层彻底销毁后的回调函数
isHaveChild = true; // 父表的编辑详情弹窗消失后，开启手风琴效果
}
})
}
// 判断打开的弹窗的宽度、高度和定位
function openD() {
var switchBody = $('#switchBody');
var w = switchBody.width();
var h = $(window).height();
var l = $('#switchNav').width();
var datas = {
area : [w + 'px',h + 'px'],
offset: ['0px' , l + 'px'],
}
return datas;
}
</script>
扫一扫
383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
