dojo EnhancedGrid的两种实现方式对比，转载自http://blog.csdn.net/earthhour/article/details/17203515

后台测试数据初始化：

[java]  view plain copy

1. static List<User> arrD = new ArrayList< User >();  
2.     static{  
3.         for( int i = 0; i < 51; i ++ ){  
4.             User u = new User();  
5.             u.setId( i );  
6.             u.setName( "test"+i );  
7.             if( i % 2 == 0 ){  
8.                 u.setDesc( "dev admin user" );  
9.                 u.setLoginNum( 10 );  
10.             }else{  
11.                 u.setDesc( "dev oper user" );  
12.                 u.setLoginNum( 20 );  
13.             }  
14.             arrD.add( u );  
15.         }  
16.     }  

后台rest服务：

[java]  view plain copy

1. @GET  
2. @POST  
3. @Path("/getUsers")  
4. //@Consumes(MediaType.APPLICATION_FORM_URLENCODED)  
5. @Produces("application/json")  
6. public List< User > getUsers(@Context HttpServletRequest request,@Context HttpServletResponse response){  
7.   
8.     //items=0-9  
9.     //items=10-19  
10.     // 如果request header中没有Range参数，则返回全部记录  
11.     if( request.getHeader("Range") == null ){  
12.         return arrD;  
13.     }else{  
14.         // store会在request header中添加Range参数，参数值类似这种：items=0-9，表明了查询范围。此处要提取该参数值  
15.         String[] range = request.getHeader("Range").replaceAll("items=", "").split("-");  
16.         // 查询起点  
17.         int from = Integer.parseInt(range[0]);  
18.         // 查询终点  
19.         int to = Integer.parseInt(range[1]);  
20.         // 防止越界  
21.         if( to > arrD.size() ){  
22.             to = arrD.size() - 1;  
23.         }  
24.         // 还要告诉grid记录总数有多少，以及当前查询范围  
25.         String contentRange = String.format("items %d-%d/%d", from,to,arrD.size());  
26.         // response header中添加Content-Range参数，参数值类似这种：items 0-9/51  
27.         response.setHeader("Content-Range", contentRange);  
28.         // 查询结果  
29.         return arrD.subList(from, to+1);  
30.     }  
31.       
32. }  

代码中request.getHeader("Range")是为了取得EnhancedGrid传递过来的查询范围参数，这个参数在request header中，如图

而response.setHeader("Content-Range", contentRange);是传递给EnhancedGrid的参数，该参数要放到response header中，如图

EnhancedGrid根据这一参数计算出记录总数，以及分页。

前台dojo实现方式一：

[javascript]  view plain copy

1. require([  
2.         "dojox/grid/EnhancedGrid",  
3.         "dojox/grid/enhanced/plugins/IndirectSelection" ,  
4.                 "dojox/grid/enhanced/plugins/Pagination",  
5.         "dojo/request/xhr",  
6.         "dojo/store/Memory",  
7.         "dojo/data/ObjectStore",  
8.         "dojo/domReady!"  
9.         ], function(EnhancedGrid,IndirectSelection,Pagination,xhr,Memory,ObjectStore){  
10.     xhr.get("/dojo/rest/getUsers", {  
11.           headers:{ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },  
12.         handleAs: "json"  
13.       }).then(function(data){  
14.             
15.           var mem = new Memory({data:data});  
16.           var dataStore = new ObjectStore({objectStore: mem});  
17.             
18.           grid = new EnhancedGrid({  
19.                 store: dataStore,  
20.                 plugins:{   
21.                     indirectSelection: {headerSelector:true, width:"40px", styles:"text-align: center;"},  
22.                     pagination: true  
23.                 },   
24.                   
25.                 //query: { id: "*" },  
26.                 structure: [  
27.                     { name: "用户名", field: "name", width: "84px" },  
28.                     { name: "用户名描述", field: "desc", width: "84px" },  
29.                     { name: "允许登录数", field: "loginNum", width: "60px" }  
30.                 ]  
31.             }, "userList");  
32.           grid.startup();  
33.             
34.       })  
35. });  

[html]  view plain copy

1. <div id="userList" style="height: 200px;"></div>  

实现方式二：

[html]  view plain copy

1. <div data-dojo-type="dojo/store/JsonRest" data-dojo-id="userData" data-dojo-props='target: "/dojo/rest/getUsers"'></div>  
2. <div data-dojo-type="dojo/data/ObjectStore" data-dojo-id="UserStore" data-dojo-props="objectStore: userData"></div>  
3. <table data-dojo-type="dojox/grid/EnhancedGrid"   
4. data-dojo-props='store: UserStore, autoWidth:true, autoHeight:true, rowSelector: "20px",   
5. plugins:{  
6.     indirectSelection: {headerSelector:true, width:"40px", styles:"text-align: center;"},   
7.     pagination: {description: true,sizeSwitch: true,pageStepper: true,gotoButton: true}  
8. }'   
9. >  
10.     <thead>  
11.         <tr>  
12.             <th field="id" width= "50px" >序号</th>  
13.             <th field="name" width= "200px" >用户名</th>  
14.             <th field="desc" width= "200px" >用户名描述</th>  
15.             <th field="loginNum" width= "200px" >允许登录数</th>  
16.         </tr>  
17.     </thead>  
18. </table>  

这两种方式都能实现EnhancedGrid的翻页功能

但是，第一种方式是一次性加载全部数据，request header中不添加Range；第二种方式是懒惰加载，包含Range，如图

返回结果：

这是第二种方式的返回结果。第一种方式的返回结果左侧为0~50