Layui Table 后台向向前台转数据

原创 2018年04月16日 21:32:30

问题描述:后台管理中使用到了LayUITable模块,但是一直显示"返回的数据状态异常"

错误原因:返回的数据格式不正确

修正方式:确保数据格式正确!


附:

    数据转化:

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>


参考:

       http://fly.layui.com/jie/16486/ 


备注:该文是我在学习JavaEE时遇到问题的备忘录,只针对我创建的工程遇到的问题!!!


在layer层,加Hash验证。

想在org.cleversafe.layer.iscsi.PrototypeiSCSITarget中改。org.cleversafe.layer.iscsi.PrototypeiSCSITarget中...
  • anycom
  • anycom
  • 2011-04-06 05:15:00
  • 485

layui-table使用总结

最近公司新组成了一个全部由实习生组成开发的项目,界面做得超级丑,teamleader让我过去帮几天,该项目用的前端UI框架是layui,对于用惯了bootstrap的我来说,刚开始接触layui的时候...
  • sinat_36146776
  • sinat_36146776
  • 2018-04-04 15:43:03
  • 61

Layui Table 后台向向前台转数据

问题描述:后台管理中使用到了LayUI的Table模块,但是一直显示&quot;返回的数据状态异常&quot;错误原因:返回的数据格式不正确修正方式:确保数据格式正确!附:    数据转化:publi...
  • LQingGang
  • LQingGang
  • 2018-04-16 21:32:30
  • 58

使用LayUI操作数据表格

接着 上一篇 继续完善我们的demo,这次我们加一个搜索按钮 搜索   在table标签的上方,加入这样一组html   div class="demoTable"> ...
  • qq_25543685
  • qq_25543685
  • 2018-01-15 10:35:38
  • 1840

Layui前后台交互数据获取java

Layui简介Layui是一款适用于后台程序员的UI框架,学习成本低。Json数据格式交互前后台,并且也相当适用单页面开发。有兴趣的朋友可以看看layui官网。Layui前后台数据交互layui有自己...
  • qq_26118603
  • qq_26118603
  • 2018-01-01 09:32:27
  • 4752

springMVC前台向后台传值三种方法

1、通过@RequestParam注解绑定参数 public String viewCourse(@RequestParam("courseId") Integer courseId, Map ...
  • fp693829021
  • fp693829021
  • 2015-11-30 13:40:59
  • 2202

table模块/数据表格 - layui.table

简单实现了数据加载table模块用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右,支持拖拽改变列宽度,支持排序,支持多级表头,支持单元...
  • hua1017177499
  • hua1017177499
  • 2017-12-22 16:03:14
  • 310

php+layui创建表格使用实例

table模块快速使用 获取选中行数据 获取选中数目 验证是否全选 ID 用户名 性别 城市 ...
  • hai7425
  • hai7425
  • 2017-08-28 20:14:12
  • 1868

layui.table中数据的准备

table模块一直在layui中占有重要的位置,在 layui 2.0 的版本中全新推出,更是 layui 最核心的组成之一!详细的问介绍可以参考官网的文档说明地址奉上:http://www.layu...
  • yangjiabei_0301
  • yangjiabei_0301
  • 2017-10-13 09:33:55
  • 3399

Spring MVC前台向后台传递一个List

@RequestMapping(value = "/saveRoleRight",method = RequestMethod.POST) @ResponseBody public Message...
  • sjkmuninj
  • sjkmuninj
  • 2014-09-18 16:07:39
  • 2082
收藏助手
不良信息举报
您举报文章:Layui Table 后台向向前台转数据
举报原因:
原因补充:

(最多只允许输入30个字)