layui结合jfinal增删改查——列表显示

发布时间:2018年10月25日 阅读:382 次

1、列表显示

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


Tag:
相关文章

发表评论: