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);
	}