Layui实现重载，模糊查询

Posted 2021-07-15 彭祥.

博主今天在学习Layui框架时，需要完成一个模糊查询功能，参考了官方文档和百度相关内容后，完成了这一功能，博主在这个地方踩了个坑。哈哈哈哈

说起来，Layui表格的重载并不困难，但博主在使用时由于在开始时将渲染放入了函数中，从而导致在重载是找不到table对象，在此踌躇良久
表格渲染

var goodtable=table.render({  //这是我们要用的table,也可以在里面使用id形式
					elem : '#goods',
					height : 700,
					width : 1400,
					cellMinWidth : 80,
					url : '${basePath}/good/listGood.action' //数据接口
					,
					
					page : { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
						layout : [ 'limit', 'count', 'prev', 'page', 'next',
								'skip' ] //自定义分页布局
						//,curr: 5 //设定初始在第 5 页
						,
						limit : 10 //一页显示多少条
						,
						limits : [ 5, 10, 15 ]//每页条数的选择项
						,
						groups : 2 //只显示 2 个连续页码
						,
						first : "首页" //不显示首页
						,
						last : "尾页" //不显示尾页

					},
					cols : [ [ //表头
					{
						checkbox : true
					}, {
						field : 'id',
						title : 'ID',
						width : 50,
						sort : true
					}, {
						field : 'gname',
						title : '名称',
						width : 200
					}, {
						field : 'price',
						title : '价格/元',
						width : 200,
						sort : true
					}, {
						field : 'typename',
						title : '类别',
						width : 200
					}, {
						field : 'info',
						title : '详情',
						width : 300
					}, {
						field : 'image',
						title : '图片',
						templet : '#pic',
						height : 60
					}, {
						field : 'edit',
						title : '操作',
						templet : '#edit',
						height : 60
					} ] ]
					
				});

点击搜索按钮执行

$('#reload').on('click',function(){
				  var type=$(this).data('type');
				  active[type] ? active[type].call(this) : '';
			  });

//重载操作，其会执行先前table的url

var $=layui.$,active={
					reload:function(){
						  goodtable.reload({
						url:'${basePath}/good/listGood.action',
						  where:{
								 gname:$('#gname').val(),
						  	}
						  });
					  }
			  };

这是在渲染表格中使用id的方法

var $ = layui.$, active = {
                reload: function () {
                    var area = $("#Area");              //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        },
                        where: {
                            Area: area.val(), //重载提交的参数               
                        }
                    });
                }
            };
            $('#btnSelect').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });