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();
      }
   }