解决：layUI数据表格+简单查询

ctf99525 2021-03-04 原文

解决：layUI数据表格+简单查询

最近在用layui写项目，在做到用户查询时，发现在layui框架里只有数据表格，不能增加查询。于是自己摸索了一下，写个笔记记录一下。

我想要的效果：

1.定义查询栏

<div class="layui-form-item">
	<div class="layui-input-inline">
		<input type="text" id="userName" name="userName" class="layui-input" placeholder="请输入要查询的用户名" autocomplete="off"> 
	</div>
	<button class="layui-btn layui-btn-md layui-btn-normal" lay-submit lay-filter="queryUser">查询</button>
</div>

2.定义监听事件

form.on('submit(queryUser)', function(data){
    //var field = data.field;   //得到搜索栏的所有的值
    
    var userName=$("#userName").val(); //得到搜索栏的值

    //执行重载
    table.reload('contenttable', {
     	where: {userName:userName}     //传给后台数据并重载
    });
});

这里只是简单查询，只有一个值，所以是直接用$("#userName").val(); 得到的值，如果是复杂查询，有多个值就可以用上面注释掉的data.field来得到所有值。contenttable：是table.render函数里面的id。

3.Controller层接收代码

@RequestMapping(value = "/allUser",produces = "application/json;charset=utf-8")
@ResponseBody
public String AllUser(@RequestParam(defaultValue="1",value="page")Integer page,@RequestParam(defaultValue="10",value="limit")Integer limit,@RequestParam(defaultValue="")String userName) throws JsonProcessingException {
	//创建一个jackson的对象映射器，用来解析数据
	ObjectMapper mapper = new ObjectMapper();
	//创建一个对象
	UserVo<User> user = adminService.queryAllUser(page,limit,userName);
	//将我们的对象解析成为json格式
	String str = mapper.writeValueAsString(user);
	System.out.println(user);
	//由于@ResponseBody注解，这里会将str转成json格式返回；十分方便
	return str;
}

前端传入什么值，后端就接什么值就行了。这里我前端就只传了一个userName，所以后面就只接收了一个userName。