layui学习记录（四）：表格头工具栏搜索+一键发送功能

好久没写学习记录了，只要有空就会慢慢补回来。这次主要是实现layui数据表格头部工具栏的搜索功能，并将搜索的信息进行一键发送邮件。这次的功能涉及到（三）的重载功能还有一个新的头部工具栏。

搜索功能和一键发送功能 - 前端

前端是数据表格头部工具栏有一个搜索框，对是否支付进行搜索。另外还包含一个“搜索”按钮和“一键发送”按钮。

• Html代 码

<script type="text/html" id="toolbarDemo">
    <div class="layui-form">
        <div class="layui-inline">
            <label class="layui-form-label">查询：</label>
            <div class="layui-input-block">
                <select id="pay_status" lay-verify="required">
                    <option value="">请选择</option>
                    <option value="1">已支付</option>
                    <option value="0">未支付</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-block">
                <button id="submit-btn" class="layui-btn layui-btn-sm" data-type="reload">搜&nbsp;&nbsp;索</button>
                <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="send_key">一键发送</button>
            </div>
        </div>
    </div>
</script>

• 效果
  

搜索功能- JS部分

这部分代码的实现类似我之前写的学习记录（三）并且参照layui文档即可。

  var $ = layui.$, active = {
      reload: function(){
          var demoReload = $('#pay_status');
          console.log(demoReload.val());
          //执行重载
          table.reload('register', {
              url:"{:url('/background/EmailManagement/pay_reload')}"
              ,page: {
                  curr: 1 //重新从第 1 页开始
              }
              ,where: {
                      status: demoReload.val() //发送搜索条件的值
              }
          });
      }
  };
//这里绑定的是搜索按钮
  $('#submit-btn').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
  });

搜索功能-后端

这部分就是实现接受请求参数（搜索条件、page和limit主要用于分页）。
这里最想记录的就是return $res。之前都是用echo 打印出来一个JSON字符串，不知道为啥一直echo就不会报错，如果return一个字符串则需要JSON.parse（）将字符串解析成数组后用layui的parseData去解析成标准格式。这里我直接return一个JSON的关联数组也没问题。

 public function pay_reload()
 {
     $request=Request::instance();
     if($request->isAjax()){
         $page=$_GET['page'];
         $limit=$_GET['limit'];
         $start=($page-1)*$limit;
         $status=$request->get('status');
         $user=new MeetingRegister();
         $res['code'] = 0;
         $res['msg'] = "";
         $res['count'] = $user->getResearchCount($status);
         $res['data'] =  $user->getResearch($status,$page,$start);
         return $res;
     }
 }

一键发送功能-JS部分

  // 监听头部工具栏
  table.on('toolbar(demo)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id);//获取表格唯一id值
      switch(obj.event){
          case 'send_key':
              var data = checkStatus.data;
              for(var i=0;i<data.length;i++){ 
                  console.log(data);
                  $.ajax({
                      url:"{:url('EmailManagement/send_key')}",
                      method: "POST",
                      data:{
                          email_address:data[i].email,
                          name:data[i].name,
                          pay_state:data[i].if_pay
                      },
                      success:function (msg) {
                          console.log(msg);
                          if(msg=='success'){
                              layer.closeAll('loading');
                              layer.load(2);
                              layer.msg('邮件发送成功！',{
                                  icon:6
                              });
                              setTimeout(function () {
                                  layer.closeAll();//关闭所有的弹出层
                              }, 1000);
                          }else{
                              layer.msg('邮件发送失败',{icon:5});
                          }
                      }
                  })
              }
              break;

          //自定义头工具栏右侧图标 - 提示
          case 'LAYTABLE_TIPS':
              layer.alert('这是工具栏右侧自定义的一个图标按钮');
              break;
      };

  });

var data = checkStatus.data;是复选框选中行组成的数组，data.length是复选框选中行组成的数组的长度。for循环是按照左侧复选框的选定的个数进行一键发送。一键发送实际上就是循环的过程。

总结

这篇记录的重点就是利用头工具栏监听复选框所在行，对选定的内容进行一键发送。