重载 表格带参数 TP5 layui.table 数组表格
实现：开始是正常的列表，当加了条件后重载表格，显示记录集是查询条件后的数据
正常数据：
点击“查看全部已经分配的用户”按钮时，只返回已经分配用户的数据，
1、模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>优惠券</title>
<link rel="stylesheet" href="__STATIC__/layui/css/layui.css" media="all">
<script src="__STATIC__/layui/layui.js"></script>
<link rel="stylesheet" href="__ADMIN__/css/index.css" media="all">
<script type="text/javascript" src="__STATIC__/jquery/1.8.3/jquery.min.js"></script>
</head>
<body style="background-color: #FFFFFF;">
<!-- 你的HTML代码 -->
<!-- 表格 -->
<div class="layui-fluid" >
<div class="demoTable" style="margin:20px 0">
<div class="layui-inline">
<input class="layui-input" name="limit" id="limit" style="width: 50px;" placeholder="行数" value="{empty name="limit"}10{else /}{$limit}{/empty}" >
</div>
<div class="layui-inline layui-form">
<select name="sotype" id="sotype" lay-search>
<option value="">请选择搜索类型</option>
<option value="title" {if $sotype == "title" }selected {/if}>标题</option>
</select>
</div>
<div class="layui-inline">
<input class="layui-input" name="sotitle" id="sotitle" value="{$sotitle}">
</div>
<button class="layui-btn" id="sear" data-type="reload" type="button">搜索</button>
</div>
<div class="layui-btn-group demoTable" style="margin-top: 10px;">
<button class="layui-btn layui-btn-normal" id="lookuser" data-id=''><i class="layui-icon"></i>查看已分配用户</button>
<button class="layui-btn" data-type="delAll">批量分配</button>
<table class="layui-hide" id="demo" lay-filter="demo"></table>
<script type="text/html" id="checkboxTpl">
<!-- 分配优惠券 -->
<input type="checkbox" name="lock" value="{{d.id}}" title="分配" lay-filter="lockDemo" {{ d.lock == 1 ? 'checked' : '' }}>
</script>
</div>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="distributionuser">分配</a>
</script>
</div>
<!-- 表格end -->
<script>
layui.use(['layer', 'form','jquery','table'], function(){
var layer = layui.layer
,form = layui.form
,$= layui.$
,table=layui.table;
table.render({
elem: '#demo'
,url: '{:url('index')}'
,limit:10
,where: {action:'usertable',number:{$number}}
,cellMinWidth: 80
,cols: [[
{type:'numbers'}
,{type: 'checkbox'}
,{field:'id', title:'ID', width:70, unresize: true}
,{field:'name', title:'用户名', width:370, templet: '#usernameTpl'}
,{field:'time', title:'创建时间', width:170}
,{field:'lock', title:'是否分配', width:110, templet: '#checkboxTpl', unresize: true}
]]
,page: true
});
//监听性别操作
form.on('switch(sexDemo)', function(obj){
layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
});
//分配优惠券 监听锁定操作
form.on('checkbox(lockDemo)', function(obj){
//layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
$.ajax({
type: "post",
url: 'distribution',
data: {id:this.value,name:this.name,number:{$number},action:'ajax_distribution_update'},
success: function(data){
layer.msg(data['msg']);
// setTimeout(function(){
// self.location='{:url('distribution')}?id={$id}&number={$number}';
// },1000)
},
error: function(){
layer.msg('更新失败!');
}
});
});
//排序
table.on('sort(demo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
//尽管我们的 table 自带排序功能，但并没有请求服务端。
//有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，如：
table.reload('demo', {
initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
,where: { //请求参数
field: obj.field //排序字段
,order: obj.type //排序方式
}
});
});
//监听工具条
table.on('tool(demo)', function(obj){
var data = obj.data;
if(obj.event === 'distributionuser'){
//发放优惠券
layer.ready(function(){
layer.open({
type: 2,
title: '发放优惠券',
maxmin: false,
area: ['80%', '90%'],
content: '{:url('distribution')}?id='+data.id+'&number='+data.number,
});
});
}
});
var $ = layui.$, active = {
delAll: function(){ //批量分配
var checkStatus = table.checkStatus('demo')
var dataall='';
data = checkStatus.data;
//循环把所有要删除的ID整成12,13,545
for(var i=0;i<checkStatus.data.length;i++){
dataall += data[i].id+",";
}
dataall=dataall.substring(0,dataall.length-1)
//layer.alert(dataall);
layer.confirm('真的全部分配?', function(index){
//obj.del();
//id= data.id;
layer.close(index);
$.ajax({
url:'{:url('distribution')}',
type:"post",
data:{id:dataall,number:{$number},action:'ajax_distribution_update'},
async:true,
success: function(data){
layer.msg(data['msg']);
setTimeout(function(){
self.location='{:url('distribution')}?id={$id}&number={$number}';
},1000)
},
error:function(){
layer.msg('失败！');
}
});
});
}
,getCheckData: function(){ //获取选中数据
var checkStatus = table.checkStatus('demo')
,data = checkStatus.data;
layer.alert(JSON.stringify(data));
}
,getCheckLength: function(){ //获取选中数目
var checkStatus = table.checkStatus('demo')
,data = checkStatus.data;
layer.msg('选中了：'+ data.length + ' 个');
}
,isAll: function(){ //验证是否全选
var checkStatus = table.checkStatus('demo');
layer.msg(checkStatus.isAll ? '全选': '未全选')
},
//搜索
reload: function(){
var demoReload = $('#sotitle').val();
table.reload('demo', {
where: {
sotype: $("#sotype").val()
,limit: $('#limit').val()
,sotitle: $('#sotitle').val()
,starttime: $('#starttime').val()/*创建 开始时间*/
,enttime: $('#enttime').val()/*创建 结束时间*/
}
});
}
};
$('.demoTable .layui-btn').on('click', function(){
//$(document).on('click','#sear',function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
//按enter键进行查询
$(document).keyup(function(event){
if(event.keyCode==13){
var type = $("#sear").data('type');
active[type] ? active[type].call(this) : '';
}
});
//查看已分配用户
$('#lookuser').on('click', function(){
table.render({
elem: '#demo'
,url: '{:url('index')}'
,limit:10
,where: {action:'usertable',number:{$number},u_tpye:1}
,cellMinWidth: 80
,cols: [[
{type:'numbers'}
,{type: 'checkbox'}
,{field:'id', title:'ID', width:70, unresize: true}
,{field:'name', title:'用户名', width:370, templet: '#usernameTpl'}
,{field:'time', title:'创建时间', width:170}
,{field:'lock', title:'是否分配', width:110, templet: '#checkboxTpl', unresize: true}
]]
,page: true
});
});
});
</script>
</body>
</html> //查看已分配用户
$('#lookuser').on('click', function(){
table.render({
elem: '#demo'
,url: '{:url('index')}'
,limit:10
,where: {action:'usertable',number:{$number},u_tpye:1}
,cellMinWidth: 80
,cols: [[
{type:'numbers'}
,{type: 'checkbox'}
,{field:'id', title:'ID', width:70, unresize: true}
,{field:'name', title:'用户名', width:370, templet: '#usernameTpl'}
,{field:'time', title:'创建时间', width:170}
,{field:'lock', title:'是否分配', width:110, templet: '#checkboxTpl', unresize: true}
]]
,page: true
});
});2、控制器代码
/**
* 列表
*/
public function index(){
$action=input('action');
$number=input('number');
$sotitle=input('sotitle');
$sotype=input('sotype');
$limit=input('limit');
$limit=$limit?$limit:10;
$this->assign('number',$number);
$this->assign('sotype',$sotype);
$this->assign('sotitle',$sotitle);
$this->assign('limit',$limit);
$where = new Where;
//查看用户 分配优惠券
if($action=="usertable"){
$page=input('page');//页数
$u_tpye=input('u_tpye');//=1 查看已分配用户
$starttime=input('starttime');//创建开始时间
$enttime=input('enttime');//创建结束时间
$field=input('field');//字段
$order=input('order');//排序方式
if($sotitle){
//模糊查询
if($sotype=="title" || $sotype==""){
$where['name'] = ['like', "%".$sotitle."%"];
}else{
$where[$sotype] = $sotitle;
}
}
//排序
if($field){
$od=$field." ".$order;
}else{
$od="id desc";
}
//查看全部已经分配的用户
if($u_tpye && $number){
//列出对应编号优惠券的用户
$rsu11=Db::name('coupon_user')->field('user_id')->where('number',$number)->select();
foreach($rsu11 as $rs_u11){
$user_id_all .= $rs_u11['user_id'].",";
}
$user_id_all = substr($user_id_all,0,strlen($user_id_all)-1);
$where['id'] = ['in', $user_id_all];
//dump($user_id_all);die;
}
//$where['id'] = ['in', '51,50'];
$where['deleted'] = 0;//状态 0正常 1回收站
$rsu=Db::name('user')->field('id,name,time')->where($where)->order($od)->limit($limit)->page($page)->select();
$rsu1=Db::name('user')->where($where)->select();
//重新组合 遍历数据集
$k=0;
foreach($rsu as $rs_u){
//判断用户是否已经分配
$rs8=Db::name('coupon_user')->where('user_id',$rs_u[id])->where('number',$number)->find();
if(count($rs8)>0){//有数据
$lock=1;
}else{
$lock=0;
}
$data_user[$k]['id'] = $rs_u['id'];
$data_user[$k]['time'] = $rs_u['time'];
$data_user[$k]['name'] = $rs_u['name'];
$data_user[$k]['lock'] = $lock;
$k++;
}
$count = count($rsu1);//取得记录集总条数
json(0,'数据返回成功',$count,$data_user);
return $data;
}
$category=input('category');
if($category){
$category_select="'".$category."'";
}
$this->assign('category_select',$category_select);
if($sotitle){
//模糊查询
if($sotype=="title" || $sotype==""){
$where['title'] = ['like', "%".$sotitle."%"];
}else{
$where[$sotype] = $sotitle;
}
}
if($category){
$where[] = ['exp',Db::raw("FIND_IN_SET('$category',category)")];
}else{
$where['deleted'] = 0;//显示正常数据，不显示回收站数据
}
$rs=Db::name('coupon')->where($where)->where('deleted',0)->order(['id'=>'desc'])->paginate($limit,false,['query' => request()->param()]);
$page = $rs->render();
$this->assign('page', $page);
$this->assign('rs',$rs);
return $this->fetch();
}