参考:
http://fly.layui.com/jie/16486/
问题描述:后台管理中使用到了LayUI的Table模块,但是一直显示"返回的数据状态异常"
错误原因:返回的数据格式不正确
修正方式:确保数据格式正确!
附:
数据转化:
public class ConvertListToPageJson {
/**
* 将用户信息转化成前台JSON
*
* @param usersList
* @return String
*/
public static JSONArray UsersInfoToJson(List<Users> usersList, List<Contact> usersContactsList) {
JSONArray jsonArray = new JSONArray();
if (usersList != null && usersList.size() > 0 && usersContactsList != null && usersContactsList.size() > 0) {
for (Users user : usersList) {
JSONObject jsonObject = new JSONObject();
jsonObject.put("id", user.getUser_id().getPerson_id());
jsonObject.put("name", user.getUser_id().getName());
jsonObject.put("sex", user.getGender());
jsonObject.put("age", user.getAge());
jsonObject.put("birtyday", user.getBirtyday().toString());
jsonObject.put("register_date", user.getRegister_date().toString());
for (Contact contact : usersContactsList) {
if (contact.getContact_id().getPerson_id() == user.getUser_id().getPerson_id()) {
jsonObject.put("email", contact.getEmail());
jsonObject.put("telephone", contact.getTelephone());
jsonObject.put("address", contact.getAddress());
}
}
jsonArray.add(jsonObject);
}
}
return jsonArray;
}
}
控制层:
/**
* 获取用户信息数据
*
* @param request
* @return Map<String,Object>
*/
@RequestMapping(value = "/usersinfo")
public @ResponseBody Map<String, Object> getUsersInfo(HttpServletRequest request) {
List<Users> users = usersService.listUsers();
List<Contact> contacts = usersService.listContacts();
JSONArray userdata = ConvertListToPageJson.UsersInfoToJson(users, contacts);
if (userdata != null) {
JSONObject jsonObject = new JSONObject();
jsonObject.put("code", 0);
jsonObject.put("msg", "");
jsonObject.put("count", userdata.size());
jsonObject.put("data", userdata);
return jsonObject;
}
return null;
}
前台:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>用户信息</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link rel="stylesheet" href="static/layui/css/layui.css" />
<link rel="stylesheet" type="text/css"
href="static/font-awesome/css/font-awesome.css">
<script src="static/pages/js/common/jquery-1.7.2.js"></script>
<script src="static/layui/layui.js" type="text/javascript"></script>
<style type="text/css">
.layui-table, .layui-table-view {
margin-top: 0;
}
</style>
</head>
<body>
<table class="layui-hide" id="usersinfo"></table>
<script>
layui.use('table', function() {
var table = layui.table;
table.render({
elem : '#usersinfo',
url : 'admin/usersinfo',
page : true,
cols : [ [
{
field : 'id',
title : 'ID',
width : 50,
sort : true
}
, {
field : 'name',
width : 150,
title : '用户名',
sort : true
}
, {
field : 'sex',
width : 100,
title : '性别',
sort : true
}
, {
field : 'age',
title : '年龄',
width : 100,
sort : true
}
, {
field : 'birtyday',
title : '生日',
minWidth : 150
}
, {
field : 'register_date',
title : '注册时间',
width : 200,
sort : true
}
, {
field : 'email',
width : 200,
title : '电子邮件',
}
, {
field : 'telephone',
width : 150,
title : '联系电话'
}
, {
field : 'address',
title : '联系地址',
width : 400
}
] ]
});
});
</script>
</body>
</html>
备注:该文是我在学习JavaEE时遇到问题的备忘录,只针对我创建的工程遇到的问题!!!