SpringMVC与JQuery EasyUI DataGrid传递JSON数据

来源：互联网发布：阿里云学生优惠编辑：程序博客网时间：2024/06/15 07:56

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

Jar包

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

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

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

Spring MVC 结果转换jar包：

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

配置文件

<beans xmlns="http://www.springframework.org/schema/beans"       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc"  xmlns:context="http://www.springframework.org/schema/context"     xmlns:aop="http://www.springframework.org/schema/aop"       xsi:schemaLocation="http://www.springframework.org/schema/beans        http://www.springframework.org/schema/beans/spring-beans-3.1.xsd        http://www.springframework.org/schema/mvc        http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd        http://www.springframework.org/schema/context        http://www.springframework.org/schema/context/spring-context-3.1.xsd        http://www.springframework.org/schema/aop        http://www.springframework.org/schema/aop/spring-aop-3.1.xsd        http://www.springframework.org/schema/tx">    <!-- 组件扫描 只扫描action -->    <context:component-scan base-package="cn.caipengbo.action" />    <!--注解映射器 -->     <bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping" />    <!--注解适配器 -->    <bean  class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">    <property name="messageConverters">        <!-- 添加对JSON的支持-->        <list>            <bean                  class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter" />        </list>    </property>    </bean>    <!-- 视图解析器 解析jsp视图-->    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">        <!-- 逻辑视图名 -->        <!-- 视图的前缀, 路径的前缀 -->        <property name="prefix" value="/WEB-INF/pages/" />        <!-- 视图的后缀 -->        <property name="suffix" value=".jsp" />    </bean></beans>

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>

测试结果

这里写图片描述

相关代码您也可以去我的GitHub上下载，如有其它疑问，欢迎留言！！

0 0