layui結合jfinal增刪改查——列表顯示

一、列表顯示

（1）在後臺獲取json數據，而後綁定到列表，以下所示：

<table class="layui-table" lay-data="{height:313, url:'/user/userJson'}" lay-filter="user">
  <thead>
    <tr>
      <th lay-data="{checkbox:true, fixed: true}"></th>
      <th lay-data="{field:'id', width:80,  fixed: true}">ID</th>
      <th lay-data="{field:'user_name', width:110}">用戶名</th>
      <th lay-data="{field:'email', width:110}">郵箱</th>
      <th lay-data="{field:'telephone', width:110}">手機號</th>
      <th lay-data="{field:'adress', width:110}">地址</th>
      <th lay-data="{field:'sex', width:110}">性別</th>
      <th lay-data="{field:'wealth', width:110}">角色</th>
      <th lay-data="{fixed: 'right', width:160, align:'center', toolbar: '#userBar'}"></th>
    </tr>
  </thead>
</table>

< script type = "text/html" id = "userBar" >
     <a class = "layui-btn layui-btn-primary layui-btn-mini" lay - event = "detail" > 查看 <  / a >
     <a class = "layui-btn layui-btn-mini" lay - event = "edit" > 編輯 <  / a >
     <a class = "layui-btn layui-btn-danger layui-btn-mini" lay - event = "del" > 刪除 <  / a >
     </script >
     < script >
    layui.use('table', function ()
    {
        var table = layui.table;
    });
</script >

這樣就完成了基本的列表數據綁定，效果以下：

（2）列表數據返回格式，注意格式要求，須要在現有接口數據基礎上進行調整，格式以下：

{"code":0 狀態，0表示成功
,"msg":"" 提示，通常非0時會顯示在table中間區
,"count":1000 記錄總數
,"data":[{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"簽名-0","experience":255,"logins":24,"wealth":82830700,"classify":"做家","score":57},...}}

data起頭就是具體的數據了。code msg count data 這些，你能夠根據你後臺接口進行調整，好比code改爲result，在table中定義一下對照就行。

（3）因此在後臺，我建了個Page類，以便規範返回格式。

// 數據列表
	private List<T> data;
	private int code;
	private String msg;
	private int count;
	
	public List<T> getData() {
		return data;
	}
	public void setData(List<T> data) {
		this.data = data;
	}
	public int getCode() {
		return code;
	}
	public void setCode(int code) {
		this.code = code;
	}
	public String getMsg() {
		return msg;
	}
	public void setMsg(String msg) {
		this.msg = msg;
	}
	public int getCount() {
		return count;
	}
	public void setCount(int count) {
		this.count = count;
	}
	public static long getSerialversionuid() {
		return serialVersionUID;
	}
	private static final long serialVersionUID = -7180359178518841827L;
}

（4）jfinal返回列表json數據：

public void userJson(){
		List<User> userList = userService.getUserList();
		Page<User> page = new Page<User>();
		page.setCode(0);
		page.setCount(1000);
		page.setMsg("");
		page.setData(userList);
		renderJson(page);
	}