2021-12-23 工作记录--LayUI-单击行内容展示子表（手风琴效果），堪称yyds

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 = '' +
              '\n' +
              ''+(data.detail[i].type == 0 ? '基础薪资': '最低薪资')+'\n' +
              ''+data.detail[i].minleave+'\n' +
              ''+data.detail[i].maxleave+'\n' +
              ''+data.detail[i].percentage+'\n' +
              '' +
                '+data.detail[i].id+')">编辑\n' +
                '+data.detail[i].id+')" class="layui-btn delete_btn layui-btn-xs">删除' +
              '\n' +
              '';
          obj.tr.after(html); // 注意这儿要用after
        }

        // 单击行显示出的表格的表头
        var html = '\n' +
            '      \n' +
            '      薪资类型\n' +
            '      最小值\n' +
            '      最大值\n' +
            '      扣除薪资百分比\n' +
            '      \n' +
            '    ';
        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" /}

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 = '' +
              '\n' +
              ''+(data.detail[i].type == 0 ? '基础薪资': '最低薪资')+'\n' +
              ''+data.detail[i].minleave+'\n' +
              ''+data.detail[i].maxleave+'\n' +
              ''+data.detail[i].percentage+'\n' +
              '' +
                '+data.detail[i].id+')">编辑\n' +
                '+data.detail[i].id+')" class="layui-btn delete_btn layui-btn-xs">删除' +
              '\n' +
              '';
          obj.tr.after(html); // 注意这儿要用after
        }

        // 单击行显示出的表格的表头
        var html = '\n' +
            '      \n' +
            '      薪资类型\n' +
            '      最小值\n' +
            '      最大值\n' +
            '      扣除薪资百分比\n' +
            '      \n' +
            '    ';
        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>