ThinkPHP5.0(TP5)+Layui实现接口调用动态表格

最近在学习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 的值是固定的,求大神解答!

  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Layui是一个前端UI框架,它能够帮助我们更快速、更简单地构建美观、实用的Web界面。而ThinkPHP是一个PHP开发框架,它能够帮助我们更高效、更简洁地开发PHP应用程序。 要实现LayuiThinkPHP6的后台登录功能,可以按照以下几个步骤进行: 1. 配置Layui的登录页面:在HTML中引入Layui的相关资源文件,包括CSS和JS,并设置一个表单,用于用户输入账号和密码等信息。 2. 创建登录接口:在ThinkPHP6的项目中创建一个用于登录验证的接口,通常是一个处理登录请求的方法。在这个方法中,需要获取用户输入的账号和密码,并与数据库中存储的账号密码进行比对。 3. 使用验证码:为了增加登录安全性,可以在登录页面中添加验证码功能。可以使用Layui的扩展组件laycode,结合后台开发语言生成验证码的图片。在提交登录请求时,需要对用户输入的验证码和生成的验证码进行比对。 4. 实现验证码刷新:当用户觉得当前验证码难以辨认时,可以提供一个刷新按钮,用户可以点击该按钮刷新验证码。刷新验证码实际上是重新生成一张验证码图片,并替换到当前验证码图片的地方。 以上就是在LayuiThinkPHP6中实现后台登录以及验证码刷新的大致步骤。当然,具体实现还需要结合具体的代码和业务逻辑进行调整。希望这些信息能够对你有所帮助!
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值