好久没写学习记录了,只要有空就会慢慢补回来。这次主要是实现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">搜 索</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循环是按照左侧复选框的选定的个数进行一键发送。一键发送实际上就是循环的过程。
总结
这篇记录的重点就是利用头工具栏监听复选框所在行,对选定的内容进行一键发送。