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

原文：http://my.oschina.net/u/1998885/blog/492498