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

解决：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。