<bdo id='1657a'></bdo><ul id='1657a'></ul>

      <small id='1657a'></small><noframes id='1657a'>

    1. <tfoot id='1657a'></tfoot>
      <i id='1657a'><tr id='1657a'><dt id='1657a'><q id='1657a'><span id='1657a'><b id='1657a'><form id='1657a'><ins id='1657a'></ins><ul id='1657a'></ul><sub id='1657a'></sub></form><legend id='1657a'></legend><bdo id='1657a'><pre id='1657a'><center id='1657a'></center></pre></bdo></b><th id='1657a'></th></span></q></dt></tr></i><div id='1657a'><tfoot id='1657a'></tfoot><dl id='1657a'><fieldset id='1657a'></fieldset></dl></div>
      <legend id='1657a'><style id='1657a'><dir id='1657a'><q id='1657a'></q></dir></style></legend>

        可折叠展开layui数据表格中嵌套表格功能实现

        时间:2023-11-06
            <tbody id='YfmG4'></tbody>
            • <small id='YfmG4'></small><noframes id='YfmG4'>

              <legend id='YfmG4'><style id='YfmG4'><dir id='YfmG4'><q id='YfmG4'></q></dir></style></legend>
                <bdo id='YfmG4'></bdo><ul id='YfmG4'></ul>
              • <i id='YfmG4'><tr id='YfmG4'><dt id='YfmG4'><q id='YfmG4'><span id='YfmG4'><b id='YfmG4'><form id='YfmG4'><ins id='YfmG4'></ins><ul id='YfmG4'></ul><sub id='YfmG4'></sub></form><legend id='YfmG4'></legend><bdo id='YfmG4'><pre id='YfmG4'><center id='YfmG4'></center></pre></bdo></b><th id='YfmG4'></th></span></q></dt></tr></i><div id='YfmG4'><tfoot id='YfmG4'></tfoot><dl id='YfmG4'><fieldset id='YfmG4'></fieldset></dl></div>

                  <tfoot id='YfmG4'></tfoot>

                  可折叠展开layui数据表格中嵌套表格功能实现思路:

                  1、最外层的表格先渲染,在done回调中向每个tr后面插入一个用来嵌套子级表格的tr。

                  tr的class和table的id需要用索引 i 关联


                   

                   //向每一行tr后面追加显示子table的tr
                                          let trEles = $(".layui-table-view[lay-id=list] tbody tr");
                                          for (let i = 0; i < trEles.length; i++) {
                                              let childTr = `<tr class="childTR${i+1}">
                                          <td></td>
                                          <td colspan="16" >
                                           <div class="child-table-item">
                                              <table id="childTable${i + 1}"></table>
                                           </div>
                                          </td>
                                          </tr>`;
                                              $(trEles[i]).after(childTr);
                                          }
                  2、插入完成后再渲染所有的子级表格
                  //渲染表格
                                          for (let i = 0; i < trEles.length; i++) {
                                              table.render({
                                                  elem: `#childTable${i + 1}`
                                                  , height: "300"
                                                  , url: "/hkj/Acount/GetSalaryList" //数据接口
                                                  , method: "POST"
                                                  , where: {
                                                      lsh: tabData[i].lsh,
                                                      ListMark: 'jqgrid'
                                                  }
                                                  , even: true
                                                  , page: true //开启分页
                                                  , cols: [[ //表头
                                                      { field: 'NAME', title: '姓名'}
                                                      , { field: 'DeptName', title: '部门' }
                                                      , { field: 'BS', title: '基本工资' }
                                                      , { field: 'PS', title: '岗位工资' }
                                                      , { field: 'PB', title: '绩效工资' }
                                                      , { field: 'SS', title: '工龄工资' }
                                                      , { field: 'PA', title: '通讯补贴' }
                                                      , { field: 'TA', title: '交通补贴' }
                                                      , { field: 'MA', title: '餐费补贴' }
                                                      , { field: 'OA', title: '其他补贴' }
                                                      , { field: 'THP', title: '实发工资' }
                                                  ]]
                                                  , request: {
                                                      pageName: 'pageIndex' //页码的参数名称,默认:page
                                                      , limitName: 'pageSize' //每页数据量的参数名,默认:limit
                                                  }
                                                  , parseData: function (res) { //res 即为原始返回的数据
                                                      return {
                                                          "code": 0, //解析接口状态
                                                          "msg": "加载成功", //解析提示文本
                                                          "count": res.records || 0, //解析数据长度
                                                          "data": res.rows //解析数据列表
                                                      };
                                                  }
                                              })
                                          }
                   3、最后监听箭头显示和隐藏对应的表格
                   //点击箭头隐藏或显示
                                          $(".showOrHide").click(function () {
                                              let classStr = $(this).attr("class");
                                              let index = $(this).data("index");
                                              if (classStr.indexOf("layui-icon-triangle-r") > -1) {
                                                  //显示
                                                  $(this).removeClass("layui-icon-triangle-r");
                                                  $(this).addClass("layui-icon-triangle-d");
                                                  $(`.childTR${index}`).show();
                                              } else {
                                                  //隐藏
                                                  $(this).removeClass("layui-icon-triangle-d");
                                                  $(this).addClass("layui-icon-triangle-r");
                                                  $(`.childTR${index}`).hide();
                                              }
                                              
                                          })
                  完整代码:
                  layui.use('table', function () {
                                  let table = layui.table;
                   
                                  //第一个实例
                                  mainTable = table.render({
                                      elem: '#list'
                                      , height: "full-100"
                                      , url: '/hkj/Acount/GetData' //数据接口
                                      , method: "POST"
                                      , where: {
                                          month: searchMonth,
                                          jybz: jybz,
                                          dataName: "gz",
                                          ListMark: 'jqgrid'
                                      }
                                      ,even:true
                                      , page: true //开启分页
                                      , cols: [[ //表头
                                          {
                                              field: 'id', title: '', width: 30, templet: function (d) {
                                                  return `<i class="layui-icon layui-icon-triangle-d main-color main-cursor showOrHide" data-index=${d.LAY_INDEX}></i>`;
                                              }
                                          }
                                          , { field: 'yfs1', title: '管理费用',minWidth:70 }
                                          , { field: 'yfs2', title: '销售费用', minWidth: 70 }
                                          , { field: 'yfs3', title: '研发费用', minWidth: 70 }
                                          , { field: 'yfs4', title: '生产车间费', minWidth:90 }
                                          , { field: 'yfs6', title: '生产管理费', minWidth: 90 }
                                          , { field: 'sb', title: '代扣社保', minWidth: 70 }
                                          , { field: 'gjj', title: '代扣公积金', minWidth: 90 }
                                          , { field: 'gs', title: '代扣个税', minWidth: 70 }
                                          , { field: 'qt', title: '其他代扣', minWidth: 70 }
                                          , { field: 'sfgz', title: '实发银行', minWidth: 70 }
                                          , { field: 'sfgz_xj', title: '实发现金', minWidth: 70 }
                                          , { field: 'yfs5', title: '办公室', minWidth: 70 }
                                          , { field: 'credenceNum', title: '凭证号', minWidth: 60 }
                                          , {
                                              field: 'bzxx', title: '备注', minWidth: 50, templet: function (d) {
                                                  return `<span style="color:red;">${d.bzxx}</span>`;
                                              }
                                          }
                                          , {
                                              field: 'url', title: 'excel', minWidth: 50, templet: function (d) {
                                                  return `<a target="_blank" href="${d.url}" class="main-color main-hover">查看</a>`;
                                              }
                                          }
                                          , {
                                              field: 'lsh', title: '操作', minWidth: 210, templet: function (rowObiect) {
                                                  let str = '';
                                                  let b = '';
                                                  if (!rowObiect.credenceNum) {
                                                      if (rowObiect.bzxx.indexOf('[') != -1) {
                                                          let a = rowObiect.bzxx.split('[')[1];
                                                          b = a.split(']')[0];
                                                      }
                                                      str += '<a class="layui-btn layui-btn-xs del_public addKM" data-subjkey="' + b + '" data-name="" data-id="' + rowObiect.ID + '"> 添加为科目</a>';
                                                      str += '<a class="layui-btn layui-btn-xs del_public pzPreview" data-id="' + rowObiect.ID + '"> 生成凭证</a>';
                                                  } else {
                                                      str += '<a class="layui-btn layui-btn-xs del_public lookPZ" data-id="' + rowObiect.credenceNum + '"> 查看凭证</a>';
                                                  }
                   
                                                  str += '<a style="color:#fff" class="layui-btn layui-btn-danger layui-btn-xs del_public delete-btn"  data-id="' + rowObiect.lsh + '"> 删除</a>'
                   
                                                  return str
                                              }
                                          }
                                      ]]
                                      , request: {
                                          pageName: 'pageIndex' //页码的参数名称,默认:page
                                          , limitName: 'pageSize' //每页数据量的参数名,默认:limit
                                      }
                                      , parseData: function (res) { //res 即为原始返回的数据
                                          return {
                                              "code": res.Status ? 0 : -1, //解析接口状态
                                              "msg": res.Message, //解析提示文本
                                              "count": res.Data.records || 0, //解析数据长度
                                              "data": res.Data.rows //解析数据列表
                                          };
                                      }
                                      , done: function (res, curr, count) {
                                          let tabData = res.data || [];
                                          //向每一行tr后面追加显示子table的tr
                                          let trEles = $(".layui-table-view[lay-id=list] tbody tr");
                                          for (let i = 0; i < trEles.length; i++) {
                                              let childTr = `<tr class="childTR${i+1}">
                                          <td></td>
                                          <td colspan="16" >
                                           <div class="child-table-item">
                                              <table id="childTable${i + 1}"></table>
                                           </div>
                                          </td>
                                          </tr>`;
                                              $(trEles[i]).after(childTr);
                                          }
                   
                                          //渲染表格
                                          for (let i = 0; i < trEles.length; i++) {
                                              table.render({
                                                  elem: `#childTable${i + 1}`
                                                  , height: "300"
                                                  , url: "/hkj/Acount/GetSalaryList" //数据接口
                                                  , method: "POST"
                                                  , where: {
                                                      lsh: tabData[i].lsh,
                                                      ListMark: 'jqgrid'
                                                  }
                                                  , even: true
                                                  , page: true //开启分页
                                                  , cols: [[ //表头
                                                      { field: 'NAME', title: '姓名'}
                                                      , { field: 'DeptName', title: '部门' }
                                                      , { field: 'BS', title: '基本工资' }
                                                      , { field: 'PS', title: '岗位工资' }
                                                      , { field: 'PB', title: '绩效工资' }
                                                      , { field: 'SS', title: '工龄工资' }
                                                      , { field: 'PA', title: '通讯补贴' }
                                                      , { field: 'TA', title: '交通补贴' }
                                                      , { field: 'MA', title: '餐费补贴' }
                                                      , { field: 'OA', title: '其他补贴' }
                                                      , { field: 'THP', title: '实发工资' }
                                                  ]]
                                                  , request: {
                                                      pageName: 'pageIndex' //页码的参数名称,默认:page
                                                      , limitName: 'pageSize' //每页数据量的参数名,默认:limit
                                                  }
                                                  , parseData: function (res) { //res 即为原始返回的数据
                                                      return {
                                                          "code": 0, //解析接口状态
                                                          "msg": "加载成功", //解析提示文本
                                                          "count": res.records || 0, //解析数据长度
                                                          "data": res.rows //解析数据列表
                                                      };
                                                  }
                                              })
                                          }
                                          
                                          //点击箭头隐藏或显示
                                          $(".showOrHide").click(function () {
                                              let classStr = $(this).attr("class");
                                              let index = $(this).data("index");
                                              if (classStr.indexOf("layui-icon-triangle-r") > -1) {
                                                  //显示
                                                  $(this).removeClass("layui-icon-triangle-r");
                                                  $(this).addClass("layui-icon-triangle-d");
                                                  $(`.childTR${index}`).show();
                                              } else {
                                                  //隐藏
                                                  $(this).removeClass("layui-icon-triangle-d");
                                                  $(this).addClass("layui-icon-triangle-r");
                                                  $(`.childTR${index}`).hide();
                                              }
                                              
                                          })
                                      }
                                  });
                   
                              });
                  上一篇:layui框架treetable扩展使用方法 下一篇:没有了

                  相关文章

                  • <bdo id='CUlHA'></bdo><ul id='CUlHA'></ul>
                  <legend id='CUlHA'><style id='CUlHA'><dir id='CUlHA'><q id='CUlHA'></q></dir></style></legend>

                    1. <i id='CUlHA'><tr id='CUlHA'><dt id='CUlHA'><q id='CUlHA'><span id='CUlHA'><b id='CUlHA'><form id='CUlHA'><ins id='CUlHA'></ins><ul id='CUlHA'></ul><sub id='CUlHA'></sub></form><legend id='CUlHA'></legend><bdo id='CUlHA'><pre id='CUlHA'><center id='CUlHA'></center></pre></bdo></b><th id='CUlHA'></th></span></q></dt></tr></i><div id='CUlHA'><tfoot id='CUlHA'></tfoot><dl id='CUlHA'><fieldset id='CUlHA'></fieldset></dl></div>

                    2. <tfoot id='CUlHA'></tfoot>

                      <small id='CUlHA'></small><noframes id='CUlHA'>