最近在学习layui框架,后端用的是TP5,在使用动态表格的时候走了不少弯路,先将主要存在的问题列举如下:
使用layui动态表格的前端代码为:
<!-- 前端动态表格的位置--->
<table class="layui-hide" id="zclb" lay-filter="zclb"></table>
<!-- 前端动态表格工具栏--->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript">
//前提你要引入layui的js才能使用以下代码
layui.use(['table'], function(){
var table = layui.table;
//动态创建表格
table.render({
//选择表格的id
elem:'#zclb',
//选择表格调用的接口,该接口返回数据类型为json,同时默认向该接口传送分页等信息,详情见后端TP代码
url:"{:url('index/liebiaojson')}",
title:'设备列表',
//此ID用于数据表格重载时使用,比如进行查询需要重载表格数据
id:'testReload',
//表格样式,隔行换色
even:true,
//表头部分
cols:[[
{field:'id', title:'ID', width:40, fixed: 'left', unresize: true, sort: true,align:'center'},
{field:'zcbh', title:'资产编号', width:130,align:'center'},
{field:'zcfl', title:'资产分类', width:200,align:'center'},
{field:'zcmc', title:'资产名称', width:200,align:'center'},
{field:'rzrq', title:'入账日期', width:110,align:'center'},
{field:'jzlx', title:'价值类型', width:110,align:'center'},
{field:'jz', title:'价值', width:110,align:'center'},
{field:'qdfs', title:'取得方式', width:110,align:'center'},
{field:'qdrq', title:'取得日期', width:110,align:'center'},
{field:'syzk', title:'使用状况', width:110,align:'center'},
{field:'sybm', title:'使用部门', width:110,align:'center'},
{field:'syr', title:'使用人', width:110,align:'center'},
{field:'cgxs', title:'采购形式', width:110,align:'center'},
{field:'pp', title:'品牌', width:110,align:'center'},
{field:'ggxh', title:'规格型号', width:110,align:'center'},
{field:'cfdd', title:'存放地点', width:110,align:'center'},
{field:'sccj', title:'生产厂家', width:110,align:'center'},
{field:'htbh', title:'合同编号', width:110,align:'center'},
{fixed:'right',title:'操作', toolbar: '#barDemo', width:180,align:'center'}
]],
//开启分页
page:true,
//默认每页10条数据
limit:10,
height:400
});
//工具栏监听事件
table.on('tool(zclb)', function(obj){
var data = obj.data;
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
}
else if(obj.event === 'edit'){
layer.prompt({
formType: 2
,value: data.email
}, function(value, index){
obj.update({
email: value
});
layer.close(index);
});
}
});
//动态表格重载函数
var $ = layui.$, active = {
reload: function(){
table.reload('testReload', {
page: {
curr: 1
}
,where: {
//这里是查询后表格重载核心问题所在,在查询的时候可以传送多个参数给接口
zcbh:$('#zcbh').val(),
zcfl:$('#zcfl').val(),
zcmc:$('#zcmc').val(),
sybm:$('#sybm').val(),
syr:$('#syr').val(),
st:$('#st').val(),
et:$('#et').val()
}
});
}
};
//监听查询事件
$('.layuiadmin-btn-order').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
TP5后端代码为:
//该方法返回一个json给前端layui
public function liebiaojson(){
//首先接收传送过来的值
$page=input("get.page")?input("get.page"):1;
$page=intval($page);
$limit=input("get.limit")?input("get.limit"):1;
$limit=intval($limit);
$start=$limit*($page-1);
$zcbh=input("get.zcbh")?input("get.zcbh"):'';
$zcfl=input("get.zcfl")?input("get.zcfl"):'';
$zcmc=input("get.zcmc")?input("get.zcmc"):'';
$sybm=input("get.sybm")?input("get.sybm"):'';
$syr=input("get.syr")?input("get.syr"):'';
$st=input("get.st")?input("get.st"):'';
$et=input("get.et")?input("get.et"):'';
//进行数据库查询
$data = Sbgl::where('id','>',0);
//增加查询条件
if($zcbh != '') {
$data = $data -> where('zcbh','like','%'.$zcbh.'%');
}
if($zcfl != '') {
$data = $data -> where('zcfl','like','%'.$zcfl.'%');
}
if($zcmc != '') {
$data = $data -> where('zcmc','like','%'.$zcmc.'%');
}
if($sybm != '') {
$data = $data -> where('sybm','like','%'.$sybm.'%');
}
if($syr != '') {
$data = $data -> where('syr','like','%'.$syr.'%');
}
if($st != '' && $et != '') {
$data = $data -> where('rzrq','between time',[$st,$et]);
}
//获取数据总条数以后查询条件就消失了,目前正在挣扎中,请大神指导,目前该值为常量
//$ccount = getCount($data);
$ccount = 40;
//数据分页处理
$data = $data -> limit($start,$limit) -> select();
//制作$list为layui指定的json 类型
$list["msg"] = "";
$list["code"] = 0;
$list["count"] = $ccount;
$list["data"] = $data;
return json($list);
}
但是目前还有个问题就是页码的问题~可能是自身TP5修行还不够,为什么从数据库查询数据条数以后,就没有了查询条件筛选功能,感觉很奇怪,导致现在$ccount 的值是固定的,求大神解答!