EasyUI遍历List以及分页

EasyUI接收的遍历格式为：{"total":total, "rows":dataList}， 直接传入List集合，需要写下面的writeJson方法

或者{"total":2,  "rows":[{"username":"张三","password":"123"},{"username":"李四","password":"456"}]}， 通过JSONObject转成json数组

 

转自：http://blog.sina.com.cn/s/blog_86e71e780101i4gs.html

与普通数据遍历比较

1.普通ssh数据列表展示为请求一个action，后台查询出数据列表封装到一个voList中，然后返回跳转界面，跳转的时候将数据传递到jsp页面，jsp通过iterator将数据遍历出来

简而言之：封装数据与跳转界面一步完。

 

2.easyui的做法为：请求后台action直接跳转到界面，这个过程中不传递数据，进入到展示数据的页面，这时候easyui表单有一个table的属性为url ，通过这个属性异步的去后台查询需要展示的数据。后台将数据封装好后传递到jsp（需要满足jason格式），后台封装的数据名称自定义，前台jsp中不需要用到，他会根据url请求的地址自动解析返回来的数据。

简而言之：跳转页面再请求数据分两步完成。

demo详释

1.通过设置table的calss属性将其渲染成easyui格式

<table 
       class="easyui-datagrid"  调用easyUI样式
       rownumbers="true"  是否显示序号
       pagination="true" 是否显示分页插件
       singleSelect="true" 是否选择单行（默认鼠标点击可以选择多行）
       url="userManage!getUserList" 数据请求地址（封装成jason格式）
       fitColumns="true" 表格是否填充满整个父窗格
       style="width:400px;height:250px">
           <thead>  不要忘记写thread哦
              <tr>
                  <th data-options="field:'id',width:80">昵称</th>
                    此处field:'属性值'是固定写法，必须写成field
                  <th data-options="field:'name',width:80">姓名</th>
                  <th data-options="field:'sex',width:80" >性别</th>
                  <th data-options="field:'age',width:80" >年龄</th>
              </tr>
           </thead>
       </table>

2.通过script动态加载将id为dataGird1的table渲染成easyui风格的网格

$(function() {
       $('#dataGrid1').datagrid({
           method:'post',
           url:'userManage!getUserList',
           title:'标题',
           rownumbers:true,//显示序号
           pagination:true,//开启下方分页栏
           pageSize:10,
           pageList:[10,20,30],
           fitColumns:true,//列填充满父窗口
           nowrap:false, //内容自动转行
           border:false,
           idField:'id',//主键标识位
           columns:[[{
              title:'昵称',
              field:'id',
              width:80
           },{
              title:'姓名',
              field:'name',
              width:80,
              sortable:true
           },{
              title:'性别',
              field:'sex',
              width:80
           },{
              title:'年龄',
              field:'age',
              width:80,
              sortable:true
           }]]
       });
       });

分页

easyUI的分页控件默认有五个属性

page 当前页码

rows 每页显示多少行

sort 排序字段名

order 排序方式（asc OR desc）

total 数据总条数

1.ajax请求后台action：

这五个参数可以通过在action中定义相同名称的变量名来获取，通过这些字段获取到数据集后通过返回json集将数据回传给前台。

2.action回传给前台：

返回前台的json中有两个参数需要封装进去，第一个是total（总条数），第二个是结果集，结果集的key必须为rows（注意：这个地方的rows与从前台传递过来的rows不一样，前台传过来的为每页显示的行数，这个地方是结果集）。

1.action回传json方法

public void getUserList(){
      voList=service.findVolist(page,rows,sort,order);
      total=service.getTotal();
      Map map = new HashMap();
      map.put("total", total);//封装总记录条数
      map.put("rows", voList);//封装结果集
      writeJson(map);
   }

2.json封装方法

需要引入包jackson-all-1.7.6.jar

  public String getJsonString(Object o){
      ObjectMapper om = new ObjectMapper();
      StringWriter sw = new StringWriter();
      try{
        JsonGenerator jg = new JsonFactory().createJsonGenerator(sw);
        om.writeValue(jg,o);
        jg.close();
      }catch(IOException e){
        e.printStackTrace();
      }
      return sw.toString();
   }
  
   public void writeJson(Object o){
      String json = getJsonString(o);
      try {
         ServletActionContext.getResponse().getWriter().write(json);
      } catch (IOException e) {
        e.printStackTrace();
      }
   }