文档章节

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

薄暮凉年
 薄暮凉年
发布于 2015/08/14 17:01
字数 850
阅读 3144
收藏 10

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展示方法就可以了。

© 著作权归作者所有

薄暮凉年
粉丝 32
博文 29
码字总数 15951
作品 0
朝阳
私信 提问
JAVAEE——ssm综合练习:CRM系统(包含ssm整合)

1 CRM项目外观 1. 开发环境 IDE: Eclipse Mars2 Jdk: 1.7 数据库: MySQL 2. 创建数据库 数据库sql文件位置如下图: 创建crm数据库,执行sql 效果如下图: 3. 工程搭建 使用的Bootstrap前端框...

kent鹏
2018/07/11
0
0
# Mybatis分页插件-PageHepler的使用

Mybatis分页插件-PageHepler的使用 使用方法 1. 引入分页插件 引入分页插件一共有下面2种方式,推荐使用Maven方式,这种方式方便更新。 1). 引入Jar包 如果你想使用本项目的jar包而不是直接引...

潘天涯
2018/06/15
0
0
jquery分页插件:jquery.twbsPagination的问题

springmvc返回json数据,问题是,通过ajax动态调用数据到前段展示后,利用jquery插件进行分页时当我点击分页插件的按钮下一页时,直接返回了json数据到页面,而不是把数据展示到页面...

开源中国首席逆风
2015/12/05
1K
2
基于MVC4+EasyUI的Web开发框架形成之旅--总体介绍

最近花了很多时间在重构和进一步提炼Winform开发框架的工作上,加上时不时有一些项目的开发工作,我博客里面介绍Web开发框架的文章比较少,其实以前在单位工作,80%的时间是做Web开发的,很早...

walb呀
2017/12/04
0
0
刚进入大三,求一个j2ee的兼职

暑假呆学校实践了一个月(第一次开发一个展示平台),感觉实践机会还是很少,想在找一份能呆在学校宿舍就能做的兼职,本人课后时间比较多; 目前接触到的有: 1:web基础(html+css+js) 2:c, java,ser...

呆丫丫424
2012/09/02
387
5

没有更多内容

加载失败,请刷新页面

加载更多

未初始化指针问题

《C和指针》书上说 int *a ... *a = 12 这样写声明一个变量,但未对指针初始化 如果指针是函数的形参,比如 void func(int *a) { (* a) = 12;//这样操作有无问题? } ======================...

天王盖地虎626
31分钟前
7
0
Python的一些细节 II

1. isinstance() 与 type() 区别 class type(name, bases, dict) name -- 类的名称。 bases -- 基类的元组。 dict -- 字典,类内定义的命名空间变量。 返回值:一个参数,返回对象的类型;三...

Eappo_Geng
42分钟前
4
0
笔试题-武汉珞珈德毅笔试题

1.写出Java语言的基本数据类型。 2.简述cookie和session区别。 1、cookie数据存放在客户的浏览器上,session数据放在服务器上。 2、cookie不是很安全,别人可以分析存放在本地的COOKIE并进行...

QuasimodoALei
53分钟前
7
0
IDEA Maven project: 'xxx/pom.xml' already exists in VFS

Failed to create a Maven project: ‘xxx/pom.xml‘ already exists in VFS idea创建项目后,发现项目有问题,删除后重新创建,提示错误如下。 解决办法 1.通过idea打开任意一个项目 2.File...

国产大熊猫
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部