SpringMVC与JQuery EasyUI DataGrid传递JSON数据

2019-11-06 07:47:00

字体：大中小

来源：转载

供稿：网友

本文默认您会使用EasyUI, 仅仅讲解如何通过SPRingMVC与EasyUI DataGrid传递数据。思路是：Handler Method返回JSONObject对象，SpringMVC对此对象进行转换。

Jar包

以下所有Jar包，均可以在我的CSDN资源里下载

首先是java操作json的类的相关jar包：

commons-beanutils-1.9.2.jarcommons-collections-3.2.1.jarcommons-lang-2.4.jarcommons-logging-1.1.3.jar’ezmorph-1.0.6.jarjson-lib-2.3-jdk15.jar

Spring MVC 结果转换jar包：

jackson-annotations-2.8.0jackson-core-2.8.1jackson-databind-2.8.7

配置文件

POJO

package cn.caipengbo.domain;/** * Created by Myth on 3/3/2017. */public class Student { private String name; private int age; public Student(String name,int age) {this.name = name; this.age = age;} public String getName() { return name; } public void setName(String name) { this.name = name; } public int getAge() { return age; } public void setAge(int age) { this.age = age; }}

控制器类

@Controllerpublic class Json { @RequestMapping("/outputJson") @ResponseBody public Object outputJson() { Student user1 = new Student("test1",10); Student user2 = new Student("test2",20); List<Student> users = new ArrayList<Student>(); Map<String,Object> jsonMap = new HashMap<String,Object>(); users.add(user1); users.add(user2); jsonMap.put("rows",users); jsonMap.put("total",users.size()); JSONObject jsonObject = JSONObject.fromObject(jsonMap); System.out.println(jsonObject); return jsonObject; }}

Web前端

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>测试JSON</title> <link rel="stylesheet" type="text/CSS" href="${pageContext.request.contextPath }/style/easyui.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/style/icon.css"> <script type="text/Javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.easyui.min.js"></script></head><body><table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px" url="${pageContext.request.contextPath }/outputJson.action" rownumbers="true" fitColumns="true" singleSelect="true"> <thead> <tr> <th field="name" width="50">Name</th> <th field="age" width="50">Age</th> </tr> </thead></table></html>