Layui Table 后台向向前台转数据

参考：

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>

Layui Table 后台向向前台转数据

猜你喜欢