解決：layUI數據表格+簡單查詢

• 2021 年 3 月 4 日
• 筆記
• 亂七

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