Layui实现重载，模糊查询

╰+攻爆jí腚メ 2022-10-10 13:59 277阅读 0赞

博主今天在学习Layui框架时，需要完成一个模糊查询功能，参考了官方文档和百度相关内容后，完成了这一功能，博主在这个地方踩了个坑。哈哈哈哈  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70]  
说起来，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的方法

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70]: /images/20221005/7e3cd102c76c4d21a14107d69d5cc159.png