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