前台渲染代码:
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#emp'
,url:'/getAllEmployeeInformation'
,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
,parseData: function(data){ //将原始数据解析成 table 组件所规定的数据
return {
"code": 0, //解析接口状态
"msg": "", //解析提示文本
"count": 1000, //解析数据长度
"data": data//解析数据列表
};
}
,cols: [
[
{field:'id', title: 'ID'}
,{field:'emp_Id', title: '员工ID'}
,{field:'emp_Name', title: '员工姓名'}
,{field:'emp_PassWord', title: '密码'}
,{field:'emp_DeptId', title: '部门ID'}
,{field:'emp_DeptName', title: '部门名称'}
,{field:'emp_CreateTime', title: '创建时间'}
]
]
});
});
后台代码:
@RequestMapping("/getAllEmployeeInformation")
@ResponseBody
public JSONObject getAllEmployeeInformation(){
List<Employee> list = employeeService.getAllEmployee();
JSONArray jsonArray= JSONArray.parseArray(JSON.toJSONString(list));
JSONObject json = new JSONObject();
json.put("data", jsonArray);
return json;
}
前台html是这样响应的:
可以看到是有数据返回的,而且也是json格式的,但他就是不加载。
解决问题:
把前台渲染代码改成:
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#emp'
,url:'/getAllEmployeeInformation'
,cols: [
[
{field:'id', title: 'ID'}
,{field:'emp_Id', title: '员工ID'}
,{field:'emp_Name', title: '员工姓名'}
,{field:'emp_PassWord', title: '员工密码'}
,{field:'emp_DeptId', title: '部门ID'}
,{field:'emp_DeptName', title: '部门名称'}
,{field:'emp_CreateTime', title: '创建时间'}
]
]
});
});
后台代码改成:
@RequestMapping("/getAllEmployeeInformation")
@ResponseBody
public JSONObject getAllEmployeeInformation(){
List<Employee> list = employeeService.getAllEmployee();
JSONArray jsonArray= JSONArray.parseArray(JSON.toJSONString(list));
JSONObject json = new JSONObject();
json.put("code", 0);
json.put("msg", "success");
json.put("count", 1000);
json.put("data", jsonArray);
return json;
}
重启项目看下效果:
可以看到数据已经加载了 。
版权声明:本文为shunyache3481原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。