Spring mvc+easyui做列表展示及分页

Spring mvc有一个注解@ResponseBody可以自己将返回数据解析成json,不用在response.getWriter(),设置response的编码之类的。

1、首先在spring-mvc.xml中配置如下

<bean id="mappingJacksonHttpMessageConverter"
        class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">
        <property name="supportedMediaTypes">
            <list>
                <value>application/json;charset=UTF-8</value>
            </list>
        </property>
    </bean>
    <bean
        class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping" />
    <bean
        class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
        <property name="messageConverters">
            <list>
                <bean id="utf8StringHttpMessageConverter"
                    class="com.liyi.test.common.UTF8StringHttpMessageConverter" />
                    <ref bean="mappingJacksonHttpMessageConverter" />
            </list>
        </property>
    </bean>

别忘了,在下面还有一个UTF8StringHttpMessageConcerter类需要引入

package com.liyi.test.common;

import java.io.IOException;
import java.io.OutputStreamWriter;
import java.nio.charset.Charset;
import java.util.Arrays;
import java.util.List;

import org.springframework.http.HttpOutputMessage;
import org.springframework.http.MediaType;
import org.springframework.http.converter.StringHttpMessageConverter;
import org.springframework.util.FileCopyUtils;

public class UTF8StringHttpMessageConverter extends StringHttpMessageConverter {
    private static final MediaType utf8 = new MediaType("text", "plain", Charset.forName("UTF-8"));
    private boolean writeAcceptCharset = true;
    @Override
    protected MediaType getDefaultContentType(String dumy) {
        return utf8;
    }

    protected List<Charset> getAcceptedCharsets() {
        return Arrays.asList(utf8.getCharSet());
    }

    protected void writeInternal(String s, HttpOutputMessage outputMessage)    throws IOException {
        if (this.writeAcceptCharset) {
            outputMessage.getHeaders().setAcceptCharset(getAcceptedCharsets());
        }
        Charset charset = utf8.getCharSet();
        FileCopyUtils.copy(s, new OutputStreamWriter(outputMessage.getBody(), charset));
    }

    public boolean isWriteAcceptCharset() {
        return writeAcceptCharset;
    }

    public void setWriteAcceptCharset(boolean writeAcceptCharset) {
        this.writeAcceptCharset = writeAcceptCharset;
    }

}

2、配置好了,就可以写展示列表的后台代码了,以下,有两个方法,一个是做页面跳转用的,一个是用于ajax请求数据的。

    @RequestMapping("/toUserList")
    public String redirctUserList(){
        return "user/new_user_list";
        
    }
    
    @ResponseBody
    @RequestMapping("/userList")
    public String userList(@RequestParam Map<String,Object> conds){
        //默认每页10条
        int pageSize = 10;
        //默认第一页 计算开始条数
        int currentPage = 1;
        //获取页面传来每页显示条数
        String row = (String) conds.get("rows");
        //获取页面传来当前页码
        String page = (String) conds.get("page");
        if(null!=row&&!"".equals(row)){
            pageSize=Integer.valueOf(row);
        }
        if(null!=page&&!"".equals(page)){
            currentPage= Integer.valueOf(page);
        }
        Map<String,Object> map = new HashMap<String,Object>();
        //计算一共有多少条
        int count = userService.getTotalPage();
        map.put("pageCount",pageSize);
        //计算从第几条开始
        map.put("currentPage",new PageUtil().getCurrent(currentPage,pageSize));
        List<UserPO> list = userService.findAll(map);
        Map<String,Object> map1 = new HashMap<String,Object>();
        map1.put("total", count);
        map1.put("rows",list);
        String json = JSON.toJSONString(map1, true);
        System.out.println(json);
        return json;
    }

只需要把你需要返回的数据,用fastjson将对象转成json串传入到页面,页面直接就可以取到。其中要注意,easyui展示列表的json如下:

[
    {
        "total": 13,
        "rows": [
            {
                "createTime": 1438678875000,
                "id": 1,
                "mobile": "123456",
                "name": "liyi",
                "pwd": "123456"
            },
            {
                "createTime": 1438679219000,
                "id": 2,
                "mobile": "123456",
                "name": "scc",
                "pwd": "123456"
            },
            {
                "createTime": 1438679264000,
                "id": 3,
                "mobile": "123456",
                "name": "diudiu",
                "pwd": "123456"
            },
            {
                "createTime": 1438679338000,
                "id": 4,
                "mobile": "123456",
                "name": "xiaopaigu",
                "pwd": "123456"
            },
            {
                "createTime": 1438680558000,
                "id": 5,
                "mobile": "123456",
                "name": "iphone",
                "pwd": "123456"
            },
            {
                "createTime": 1438682344000,
                "id": 6,
                "mobile": "123456",
                "name": "iphone1",
                "pwd": "123456"
            },
            {
                "createTime": 1438754235000,
                "id": 7,
                "mobile": "123456",
                "name": "abc",
                "pwd": "123456"
            },
            {
                "createTime": 1438852983000,
                "id": 8,
                "mobile": "11",
                "name": "11",
                "pwd": "11"
            },
            {
                "createTime": 1438914359000,
                "id": 9,
                "mobile": "123456",
                "name": "123456",
                "pwd": "456789"
            },
            {
                "createTime": 1439530418000,
                "id": 10,
                "mobile": "123",
                "name": "123",
                "pwd": "123"
            }
        ]
    }
]

3、jsp页面首先引入easyui的js 以及css

<link rel="stylesheet" type="text/css" href="static/jquery-easyui-1.3.2/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="static/jquery-easyui-1.3.2/themes/icon.css">   
<script type="text/javascript" src="static/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="static/jquery-easyui-1.3.2/jquery.easyui.min.js"></script> 
<script type="text/javascript">
    $(function(){
        $(‘#dg‘).datagrid({    
            url:‘${app}/userController/userList.do‘,    
            columns:[[    
                {field:‘name‘,title:‘姓名‘,width:100 },    
                {field:‘mobile‘,title:‘手机号‘,width:100},    
                {field:‘_operate‘,width:80,align:‘center‘,formatter:function(value,rec){
                                                               return "<a href=‘‘ >编辑</a>";
                                                         },title:‘操作‘}    
            ]],
           toolbar: [{
                iconCls: ‘icon-add‘,
                handler: function(){alert(‘编辑按钮‘)}
            },‘-‘,{
                iconCls: ‘icon-help‘,
                handler: function(){alert(‘帮助按钮‘)}
            }],
            fitColumns:true,
            striped:true,
            pagination:true,
            rownumbers:true,
            pageNumber:1,
            pageSize:10,
            pageList:[10,20,30,40,50]

              
        }); 
    })
    
</script>

<table id="dg"></table>

4、分页你可以用firefox观察一下,他会传入到后台两个参数,一个是当前页page,一个是rows每页的数量,根据我上篇文章的分页工具即可。在找到上面的List展示方法就可以了。

时间: 2024-07-30 04:44:24

Spring mvc+easyui做列表展示及分页的相关文章

关于我使用spring mvc框架做文件上传时遇到的问题

非常感谢作者 原文:https://blog.csdn.net/lingirl/article/details/1714806 昨天尝试着用spring mvc框架做文件上传,犯了挺多不该犯的毛病问题1:org.springframework.web.util.NestedServletException: Request processing failed; nested exception is java.lang.ClassCastException: org.apache.catalin

Spring Data Jpa 实现分页(Spring MVC+easyui)

spring data jpa很好的对dao层进行了封装,这篇文章主要来写的是实现easyui datagird数据分页,由于各个UI参数不大一样,所以如果使用的是其他UI,得稍作修改.需要说明的是我的代码是在spring mvc框架下的部分代码,部分结构的代码为给出,只给出关键代码. 首先,easy ui向服务端发送请求时,会自动返回4个参数(page,rows,order,sort),先写一个PageContent类: package module.system.entity; import

Spring mvc+Easyui遇到的几个问题

简单的一个数据表的增删查改的总体界面的展示效果例如以下图: 1.datagrid数据载入问题 datagrid通过url请求后台数据,总记录数和数据行的属性是固定死的.数据行是rows,总记录数为total List<Map<String,Object>> maplist = configMgrService.listAllAccessIps(pb); JsonConfig config = new JsonConfig(); config.registerJsonValuePro

利用 spring mvc ResponseEntity 做文件下载

 controller代码: @RequestMapping(value = "/cmpSts/{cmpId}", method = RequestMethod.GET) public ResponseEntity<byte[]> cmpSts(@PathVariable int cmpId, HttpServletRequest request, HttpServletResponse response) throws Exception { Locale local

EasyUI + Spring MVC + hibernate实现增删改查导入导出

(这是一个故事……) 前言 作为一个JAVA开发工程师,我觉得最基本是需要懂前端.后台以及数据库. 练习的内容很基础,包括:基本增删改查.模糊查询.分页查询.树菜单.上传下载.tab页 主管发我一个已经搭建好的框架平台,在平台上进行编码,不限制技术. 虽然说不限制技术,但还是得根据已经搭建的框架平台进行编码. 所以首先第一步,分析框架平台结构组成. 入手:看目录.看配置.看jar包.看js库.看数据库... 不难发现项目是基于:Spring + Hibernate + Spring MVC +

Spring MVC 实践 - Base

Spring MVC 实践 标签 : Java与Web Spring Web MVC Spring-Web-MVC是一种基于请求驱动的轻量级Web-MVC设计模式框架, Spring MVC使用MVC架构思想, 对Web层进行职责解耦,使用请求-响应模型将数据.业务与视图进行分离, 简化开发. MVC MVC(模型-视图-控制器)是一个以设计界面应用程序为基础的架构模式,通过分离模型-视图-控制器在应用中的角色将业务逻辑从界面中解耦: 模型负责封装应用数据和业务逻辑; 视图仅负责展示数据; 控制

动态多条件查询分页以及排序(一)--MVC与Entity Framework版url分页版

一.前言 多条件查询分页以及排序  每个系统里都会有这个的代码 做好这块 可以大大提高开发效率  所以博主分享下自己的6个版本的 多条件查询分页以及排序 二.目前状况 不论是ado.net 还是EF 在做多条件搜索时 都有这类似的代码 这样有几个不好的地方 1.当增加查询条件,需要改代码,对应去写相应的代码. 2.对多表查询以及or的支持 不是很好.而我们很常见的需求不可能是一个表的查询 3. 这样写表示层直接出现 了SQL语句 或者 linq 的拉姆达表达式  这是很不好的 表示层不应该知道数

Spring MVC 简述:从MVC框架普遍关注的问题说起

任何一个完备的MVC框架都需要解决Web开发过程中的一些共性的问题,比如请求的收集与分发.数据前后台流转与转换,当前最流行的SpringMVC和Struts2也不例外.本文首先概述MVC模式的分层思想与MVC框架普遍关注的问题,并以此为契机结合SpringMVC的入门级案例简要地从原理.架构角度介绍了它对这些问题的处理,包括请求处理流程.消息转换机制和数据绑定机制等核心问题.最后,本文对目前最为流行的两个MVC框架SpringMVC 和 一. MVC 模式与框架 1.MVC 模式 Java We

基于spring mvc的注解DEMO完整例子

弃用了struts,用spring mvc框架做了几个项目,感觉都不错,而且使用了注解方式,可以省掉一大堆配置文件.本文主要介绍使用注解方式配置的spring mvc,之前写的spring3.0 mvc和rest小例子没有介绍到数据层的内容,现在这一篇补上.下面开始贴代码. 文中用的框架版本:spring 3,hibernate 3,没有的,自己上网下. web.xml配置: <?xml version="1.0" encoding="UTF-8"?>