解決: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
。