解決：layUI資料表格+簡單查詢

這行程式碼沒Bug發表於2021-03-04
UI

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

相關文章