Layui层级弹框

• 要在后台原有的接口上进行前端改造,后台查询从0开始,默认参数也有给定;
• layui原本的table查询分页接口方法暂时不能满足需求;通过查询,以及搜集资料,更换修改原来的两个js;可满足需求;
  
  功能实现：
  1、js 代码 （点击事件的弹框方法 ）

/**
         * 选择关联弹框 
         */
        function selectGlbb() {
          var layer;
          let form;let layero1

          layui.use(['layer','form'],function () {
            let layer = layui.layer;
            lform = layui.form;
            //在原来的开启弹框的方法上再次打开弹框
            index1 =window.parent.layer.open({
              shade: [0.5, '#000', false],
              type: 2,
              area: ['800px', '500px'],
              fix: false, //不固定
              maxmin: true,
              title: ['关联', false],
              content: '',//打开页面路径
              zIndex: layer.zIndex ,//重点1
              success: function (layero, index) {
           		   layero1 = layero
                // console.warn(layero, index)
              },
              end: function (res) {
              
         		  //这里写回调参数的一些方法

              },
              cancel: function (index, layero) {
              //取消关闭
                // console.warn(layero, index)
                layer.close(index1)
              },

            });
          })

2、 弹出框内绘制table表格，传入参数从0开始查询后台接口，但是页面显示page依旧为1；

  <table id="table1" lay-filter="table1" class="layui-table" lay-even lay-skin="nob" style="display: none">
  </table>

  <script>
        //定义table表格
        var table;
        var pagenum = 1;
        var pagesize = 10;
        layui.use('table', function () {
          table = layui.table;
          //table实例
          table.render({
            elem: '#table1',
            height: 410,
            even: true,
            startByZero: true, //重点: 从0开始传参
            //如果加method post属性,则请求方式变为formdata
            method: 'post',
            url: '${ctx}/..../data', //必填 调用的查询接口
            page: {
              curr: 1,
            }, //开启分页
            limit: pagesize,
            cols: [[ //表头
              { field: 'tName', title: '名称', width: 210, },
              {
                field: 'tType', title: '类型', width: 210,
                templet: function (row) {
                  return row.templateType == 1 ? "展示" : "填报";
                }
              },
              {
                field: 'tClassify', title: '分类', width: 210,
                templet: function (d) {
                  let res = ''
                  if (d.templateClassify == 1) {
                    res = "日"
                  } else if (d.templateClassify == 2) {
                    res = "周"
                  }  
                  return res;
                }
              },
              { field: 'remarks', title: '备注信息', width: 140, },
            ]],
            // 默认拼接参数是?page=1&limit=30 通过request能修改传参变量名
            request: {
              pageName: 'pageIndex', //页码的参数名称，默认：page
              limitName: 'pageSize' //每页数据量的参数名，默认：limit
            },
            // 通过这个修改返回数据
            parseData: function (res) { //res 即为原始返回的数据
              return {
                "code": 0, //解析接口状态
                "msg": '', //解析提示文本
                "count": res.total, //解析数据长度
                "data": res.data //解析数据列表
              };
            }
          });

          //触发行双击事件
          table.on('rowDouble(table1)', function (obj) {
            console.log(obj.data) //得到当前行数据
          
          //获取当前页面,并关闭窗口
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
          });
        });

        /**
         * 查询重载按钮
         */
        function search() {
       
          // 执行重载
          table.reload('table1', {
            //从第一页开始
            page: {
              curr: 1
            },
            where: {
             //查询方法
            }
          });
        }
      </script>

实现效果: 点击分页可切换,参数页面从0开始查询;