用JsonLib实现EXT里的分页

效果图：

以前做分页一般都是在后台中拼接json格式的字符串，然后返回到前台进行解析，能实现。。但是效率不大高。。

现在拿专门解析json格式的JsonLib，它所需要的jar文件如下 ：

 

前台页面代码：

Ext.onReady(function(){
         var store = new Ext.data.JsonStore({                     //定义JsonStore = HttpProxy + JsonReader + Store
                   url:"<%=basePath%>pageServlet",                   //定义HttpProxy所需要参数
                   totalProperty:"totalProperty",                           //定义总条数和数据
                   root:"root",
                   fields:["id","name","sex","birthday","address","mark"]   //定义JsonReader所需要参数
         });
  
        store.load({params:{start:0,limit:6}});          //第一次加载的时候传递起始条数和每页的大小
  
        var cm = new Ext.grid.ColumnModel([                      //定义列模型
                {header:"编号",width:40,dataIndex:"id"},
                {header:"姓名",width:80,dataIndex:"name"},
                {header:"性别",width:80,dataIndex:"sex"},
                {header:"出生日期",width:80,dataIndex:"birthday"},
                {header:"家庭住址",width:80,dataIndex:"address"},
                {header:"备注",width:80,dataIndex:"mark"}
        ]);
  
       var bbar = new Ext.PagingToolbar({               //定义GridPanel中的工具栏
               store:store,
               pageSize:6,
               displayInfo:true,
               displayMsg:"本页显示第{0}条到第{1}条的记录，一共{2}条记录",
               emptyMsg:"没有记录"
       });
  
      var grid = new Ext.grid.GridPanel({             //创建GridPanel
               title:"中国公民",
              width:650,
              autoHeight:true,
              cm:cm,
              store:store,
              bbar:bbar,
              renderTo:Ext.getBody()
        });
  });

 

 在前台页面中其它还是以前的知识，并没有和以前有多大的不同，重点在后台代码。。后台代码：

           response.setContentType("text/html;charset=UTF-8");
           PrintWriter out = response.getWriter();
           int start = Integer.parseInt(request.getParameter("start"));  //得到起始条数和每页和条数
           int limit = Integer.parseInt(request.getParameter("limit"));
           int end = start + limit;
           int totalProperty = 86;        //总数据条数
 
          if(end>totalProperty){         //如果是数据库，这行不需要
                 end = totalProperty;
           }
 
          List<Human> humanList = new ArrayList<Human>();
          for(int i=start; i<end; i++){
                 humanList.add(new Human("000"+ i,"杰克"+ i,"男",new Date(),"石家庄","没什么兴趣"));   －－－－重点1
          }
 
          PageBean pageBean = new PageBean(totalProperty,humanList);   //把数据整合到pojo类中  －－－－重点2
          

          利用    JsonLib来解析json
          JSONObject jObject = JSONObject.fromObject(pageBean,JsonUtil.configJson("yyyy-MM-dd"));    －－重点3

          out.print(jObject.toString());
          out.flush();
          out.close();

既然是用Json来解析字符串，那就不用去考虑什么字符串拼接的问题，但是，json字符串中的键也就是name:"张三"中的name我们还是要

知道的，那么，我们定义了一个Human类来存放这些字段的信息

看重点1：

public class Human {
           private String address;
           private Date birthday;
           private String id;
           private String mark;
           private String name;
……

注意要生成get和set方法，还要生成相应的构造方法

       Human(String id, String name, String sex, Date birthday, String address, String mark)

看重点2：

public class PageBean {
         private List root;
         private int totalProperty;

……

注意要生成get和set方法，也要生成相应的构造方法，它是封装totalProperty和root的类

public PageBean(int totalProperty, List root)

  如何用JsonLib 来实现EXT中的分页？ 收藏
先来看下最后我们要实现的结果是什么样？

 

先说说我们传统上的做法！！！

我们一般会在后台中拼接json格式的字符串，然后返回到前台进行解析，那样虽然能达到目的，但效率上肯定会大打折扣

而今天我们介绍的是专门用来解析json格式的JsonLib，它所需要的jar文件如下 ：

 

如果有需要的，在我的资源文件中可以进行下载……

行，废话不多说了，上代码，首先来看前台页面：

Ext.onReady(function(){
         var store = new Ext.data.JsonStore({                     //定义JsonStore = HttpProxy + JsonReader + Store
                   url:"<%=basePath%>pageServlet",                   //定义HttpProxy所需要参数
                   totalProperty:"totalProperty",                           //定义总条数和数据
                   root:"root",
                   fields:["id","name","sex","birthday","address","mark"]   //定义JsonReader所需要参数
         });
  
        store.load({params:{start:0,limit:6}});          //第一次加载的时候传递起始条数和每页的大小
  
        var cm = new Ext.grid.ColumnModel([                      //定义列模型
                {header:"编号",width:40,dataIndex:"id"},
                {header:"姓名",width:80,dataIndex:"name"},
                {header:"性别",width:80,dataIndex:"sex"},
                {header:"出生日期",width:80,dataIndex:"birthday"},
                {header:"家庭住址",width:80,dataIndex:"address"},
                {header:"备注",width:80,dataIndex:"mark"}
        ]);
  
       var bbar = new Ext.PagingToolbar({               //定义GridPanel中的工具栏
               store:store,
               pageSize:6,
               displayInfo:true,
               displayMsg:"本页显示第{0}条到第{1}条的记录，一共{2}条记录",
               emptyMsg:"没有记录"
       });
  
      var grid = new Ext.grid.GridPanel({             //创建GridPanel
               title:"中国公民",
              width:650,
              autoHeight:true,
              cm:cm,
              store:store,
              bbar:bbar,
              renderTo:Ext.getBody()
        });
  });

 

 在前台页面中其它还是以前的知识，并没有和以前有多大的不同，重点在后台代码中，下面看后台代码：

           response.setContentType("text/html;charset=UTF-8");
           PrintWriter out = response.getWriter();
           int start = Integer.parseInt(request.getParameter("start"));  //得到起始条数和每页和条数
           int limit = Integer.parseInt(request.getParameter("limit"));
           int end = start + limit;
           int totalProperty = 86;        //总数据条数
 
          if(end>totalProperty){         //如果是数据库，这行不需要
                 end = totalProperty;
           }
 
          List<Human> humanList = new ArrayList<Human>();
          for(int i=start; i<end; i++){
                 humanList.add(new Human("000"+ i,"杰克"+ i,"男",new Date(),"石家庄","没什么兴趣"));   －－－－重点1
          }
 
          PageBean pageBean = new PageBean(totalProperty,humanList);   //把数据整合到pojo类中  －－－－重点2
          

          利用    JsonLib来解析json
          JSONObject jObject = JSONObject.fromObject(pageBean,JsonUtil.configJson("yyyy-MM-dd"));    －－重点3

          out.print(jObject.toString());
          out.flush();
          out.close();

既然是用Json来解析字符串，那就不用去考虑什么字符串拼接的问题，但是，json字符串中的键也就是name:"张三"中的name我们还是要

知道的，那么，我们定义了一个Human类来存放这些字段的信息

看重点1：

public class Human {
           private String address;
           private Date birthday;
           private String id;
           private String mark;
           private String name;
……

注意要生成get和set方法，还要生成相应的构造方法

       Human(String id, String name, String sex, Date birthday, String address, String mark)

看重点2：

public class PageBean {
         private List root;
         private int totalProperty;

……

注意要生成get和set方法，也要生成相应的构造方法，它是封装totalProperty和root的类

public PageBean(int totalProperty, List root)

看重点3：

 

我们这里用到的是：

          JSONObject.fromObject(pageBean,JsonUtil.configJson("yyyy-MM-dd"));

从上面的API中，我们可以看出这方法是将javaBean转换成json对象的方法，但不知道你注意到没，这里有一个日期处理的方法：

注意，默认情况下jsonlib不会对日期进行处理，所以，我们还需要写一个类来专门来处理日期：

生成JsonUtil类：

public class JsonUtil {
        public static JsonConfig configJson(String datePattern) {
                 JsonConfig jsonConfig = new JsonConfig();
                 jsonConfig.setExcludes(new String[] { "" });
                 jsonConfig.setIgnoreDefaultExcludes(false);
                 jsonConfig.setCycleDetectionStrategy(CycleDetectionStrategy.LENIENT);
                 jsonConfig.registerJsonValueProcessor(Date.class, new JsonDateValueProcessor(datePattern));

                 return jsonConfig;
        }
}

 

还需要一个JsonDateValueProcessor类：注意，要添加对应的构造方法(有参和无参)和get、set方法

public class JsonDateValueProcessor implements JsonValueProcessor {
           private String format = "yyyy-MM-dd HH:mm:ss";

           public Object processArrayValue(Object value, JsonConfig jsonConfig) {
                  String[] obj = {};
                  if (value instanceof Date[]) {
                           SimpleDateFormat sf = new SimpleDateFormat(format);
                           Date[] dates = (Date[]) value;
                           obj = new String[dates.length];
                           for (int i = 0; i < dates.length; i++) {
                                  obj[i] = sf.format(dates[i]);
                            }
                  }
                 return obj;
           }

          public Object processObjectValue(String key, Object value, JsonConfig jsonConfig) {
                  if (value instanceof Date) {
                          String str = new SimpleDateFormat(format).format((Date) value);
                           return str;
                 }
                 return value == null ? null : value.toString();
          }

}

 至此，我们完成了以前我们拼接字符串的复杂操作，省去了我们要进行手动拼接所带来的麻烦：

和之前惯用的代码进行一下比较吧：

               String fmt = " {did: %d, dname: '%s'}";
               StringBuffer s = new StringBuffer("{totalProperty:");
               s.append(totalProperty).append(", root:[");
               int end = start + limit;

              
               if(end>totalProperty){         //如果是数据库，这行不需要
                 end = totalProperty;
              }

               for(int i = start; i < end; i ++){
                    s.append(String.format(fmt, i, "部门" + i));
                    if(i < end - 1){
                         s.append(",");//各json 对象用“,”隔开，最后一个不要
                    }
               }
               s.append("]}"); 
               out.println(s.toString());

当然会选择高端用法。。。哈哈。。