layui学习记录（三）：表格重载（查询）功能

最新推荐文章于 2022-03-04 16:57:32 发布

GGGGuiii -

最新推荐文章于 2022-03-04 16:57:32 发布

阅读量985

点赞数

文章标签： html thinkphp

本文链接：https://blog.csdn.net/GGGGuiii/article/details/106625163

版权

1 前端HTML代码

直接上代码：

<!--    表格重载 搜索-->
        <div id="inquire_form" class="layui-form">
            <div class="layui-inline">
                <label class="layui-form-label">用户名：</label>
                <div class="layui-input-block">
                    <input type="text" id="user" lay-verify="required" placeholder="请输入需查询的用户名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">邮箱：</label>
                <div class="layui-input-block">
                    <input type="text" id="email" lay-verify="required" placeholder="请输入需查询的邮箱" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">邮件类型：</label>
                <div class="layui-input-block">
                    <select id="email_type" lay-verify="required">
                        <option value=""></option>
                        <option value="注册邮件">注册邮件</option>
                        <option value="报名邮件">报名邮件</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">送达状态：</label>
                <div class="layui-input-block">
                    <select id="send_status" lay-verify="required">
                        <option value=""></option>
                        <option value="已送达">已送达</option>
                        <option value="未送达">未送达</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-block">
                    <button id="submit-btn" class="layui-btn layui-btn-radius" data-type="reload">搜索</button>
                    <button id="reset-btn" class="layui-btn layui-btn-radius layui-btn-primary" data-type="reload">清空</button>
                </div>
            </div>
        </div>

效果：
最上面一行就是多条件查询

2 前端JavaScript代码

直接上代码：

      //表格重载 数据查询
      var $ = layui.$, active = {
          reload: function(){
              var user = $('#user').val();
              var email = $('#email').val();
              var email_type = $('#email_type').val();
              var send_status = $('#send_status').val();

              //执行重载
              table.reload('email_form', {
                  // method: 'POST'
                  url:"{:url('/background/EmailManagement/reload_form')}"
                  ,page: {
                      curr: 1 //重新从第 1 页开始
                  }
                  ,where: {
                      user: user,
                      email:email,
                      email_type:email_type,
                      send_status:send_status
                  }
              });
          }
      };
      //按钮绑定事件
      $('#submit-btn').on('click', function(){
          var type = $(this).data('type');
          active[type] ? active[type].call(this) : '';
      });
      $('#reset-btn').click(function () {
          table.reload('email_form', {
              // method: 'POST'
              url:"{:url('/background/EmailManagement/status_show')}"
              ,page: {
                  curr: 1 //重新从第 1 页开始
              }
          });
      })

这部分主要是参考了layui表格重载文档，并且使用的还是方法渲染。
这里要注意以下几点
1、table.reload()的用法，困扰我比较久的还是和后台ThinkPHP交互的问题（每次都是这里问题最多- -。）url就是向服务器的数据库发起请求的地址，where是异步传输的额外参数，在表格重载里是传输查询条件输入框的值。

where: {
             user: user,
             email:email,
             email_type:email_type,
             send_status:send_status
       }

2、查询条件清空。这里我绑定了一个按钮事件，原理就是点击‘清空’按钮的时候，重载一次原始表格。

      $('#reset-btn').click(function () {
           table.reload('email_form', {
               // method: 'POST'
               url:"{:url('/background/EmailManagement/status_show')}"
               ,page: {
                   curr: 1 //重新从第 1 页开始
               }
           });
       })

3 后台

这里和之前学习记录的后台交互一样，用ThinkPHP5的Request类去接收get（get是默认的方法）的参数，并向服务器发起请求去查找数据库，最后将值返回成JSON形式。

  public function reload_form(){
      $request=Request::instance();
      if ($request->isAjax()){
          $pageSize = $request->get('limit')?$request->get('limit'):10;
          $page = $request->get('page')?$request->get('page'):1;
          //接收重载的接口数据
          $data['meeting_register_id']=$request->get('user');
          $data['mail_address']=$request->get('email');
          $data['mail_type']=$request->get('email_type');
          $data['delivery_status']=$request->get('send_status');
          $email_tables=new CollectEmail();
          $res['code'] = 0;
          $res['msg'] = "";
          $res['count'] = $email_tables->reloadFormCount($data);
          $res['data'] =  $email_tables->reloadForm($data,$page,$pageSize);
          $json_data=json_encode($res);
          echo $json_data;
      }
  }