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



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM