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;
}
}
4 效果
输入邮箱地址,可以筛选出对应的一行表格数据。
5 总结
我对表格重载的理解就是类似函数名重载,同样的表格名,但是执行的代码内容不同,因此显示的表格内容也不同。另外,这里我的多条件联合查询语句没有写的特别完善,后面会把多条件查询的功能加进去。欢迎交流 :p