Spring Mvc+easyui To do the list display and pagination

Source: Internet
Author: User

Spring MVC has an annotation @responsebody can parse the return data itself into JSON, without response.getwriter (), setting the response encoding, and so on.

1, first in the Spring-mvc.xml configured as follows

<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>

  Don't forget, there's another utf8stringhttpmessageconcerter class that needs to be introduced

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;   &nbsP;}     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, CONFIGURED, you can write the background code of the display list, the following, there are two methods, one is to do the page jump switch, one is used for AJAX request data.

     @RequestMapping ("/touserlist")     public String  Redirctuserlist () {        return  "User/new_user_list";             }          @ResponseBody      @RequestMapping ("/userlist")     public  String userlist (@RequestParam  map<string,object> conds) {         //default per page 10 article         int pageSize = 10;         //Default first page   count start bar          int currentpage = 1;        //Fetch page number of pages displayed per page          String row =  (String)  conds.get ("Rows");         //get page Current page         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> ();         //calculate how many strips are there         int count  = userservice.gettotalpage ();         map.put ("PageCount", pageSize);         //calculation starts from the first         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;    }

  Just take the data you need to return, and use Fastjson to turn the object into a JSON string and the page can be taken directly. Note that the JSON for the Easyui display list is as follows:

[    {         "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" &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;},             {                  "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" &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;},             {                  "Createtime": 1438852983000,                  "id": 8,                  "mobile":  ", "                 "Name":  "11",                  "pwd":  " "            },             {                 " Createtime ": 1438914359000,                  "id": 9,                  "mobile":  "123456",                  "name":  "123456",                  "pwd":  "456789"              },            {                  "Createtime":  1439530418000,                 "id": 10,                  "mobile":  "123" ,                 "Name":  "123",                 "pwd":   "123"             }         ]    }]

3, JSP page first introduced Easyui JS and 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: ' Name ',width:100 },                     {field: ' Mobile ', title: ' Mobile phone number ',width:100},                     {field: ' _operate ', width:80,align: ' Center ', formatter:function (VALUE,REC) {                                                                   return  "<a href="  > edit </a> ";                                                            },title: ' Operation '}                 ]],            toolbar: [{                 iconCls:  ' Icon-add ',                 handler: function () {alert (' Edit button ')}             }, '-',{                 iconCls:  ' Icon-help ',                 handler: function () {alert (' Help button ')}         &nbsP;   }],            fitcolumns:true ,            striped:true,             pagination:true,             rownumbers:true,             pagenumber:1,            pagesize:10,             pageList:[10,20,30,40,50]                        });      })     </script><table id= "DG" ></table>

4, pagination you can use Firefox to observe, he will be passed to the background two parameters, one is the current page pages, one is the number of rows per page, according to my previous article of the paging tool. Find out how to display the list above.

Spring Mvc+easyui To do the list display and pagination

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.