dojo EnhancedGrid的两种实现方式对比

后台测试数据初始化：

static List<User> arrD = new ArrayList< User >();
	static{
		for( int i = 0; i < 51; i ++ ){
			User u = new User();
			u.setId( i );
			u.setName( "test"+i );
			if( i % 2 == 0 ){
				u.setDesc( "dev admin user" );
				u.setLoginNum( 10 );
			}else{
				u.setDesc( "dev oper user" );
				u.setLoginNum( 20 );
			}
			arrD.add( u );
		}
	}

后台rest服务：

	@GET
	@POST
	@Path("/getUsers")
	//@Consumes(MediaType.APPLICATION_FORM_URLENCODED)
	@Produces("application/json")
	public List< User > getUsers(@Context HttpServletRequest request,@Context HttpServletResponse response){

		//items=0-9
		//items=10-19
		// 如果request header中没有Range参数，则返回全部记录
		if( request.getHeader("Range") == null ){
			return arrD;
		}else{
			// store会在request header中添加Range参数，参数值类似这种：items=0-9，表明了查询范围。此处要提取该参数值
			String[] range = request.getHeader("Range").replaceAll("items=", "").split("-");
			// 查询起点
			int from = Integer.parseInt(range[0]);
			// 查询终点
			int to = Integer.parseInt(range[1]);
			// 防止越界
			if( to > arrD.size() ){
				to = arrD.size() - 1;
			}
			// 还要告诉grid记录总数有多少，以及当前查询范围
			String contentRange = String.format("items %d-%d/%d", from,to,arrD.size());
			// response header中添加Content-Range参数，参数值类似这种：items 0-9/51
			response.setHeader("Content-Range", contentRange);
			// 查询结果
			return arrD.subList(from, to+1);
		}
		
	}

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

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

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

前台dojo实现方式一：

		require([
		 		"dojox/grid/EnhancedGrid",
		 		"dojox/grid/enhanced/plugins/IndirectSelection" ,
		                "dojox/grid/enhanced/plugins/Pagination",
		 		"dojo/request/xhr",
		 		"dojo/store/Memory",
		 		"dojo/data/ObjectStore",
		 		"dojo/domReady!"
		 		], function(EnhancedGrid,IndirectSelection,Pagination,xhr,Memory,ObjectStore){
			xhr.get("/dojo/rest/getUsers", {
				  headers:{ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
			    handleAs: "json"
			  }).then(function(data){
				  
				  var mem = new Memory({data:data});
				  var dataStore = new ObjectStore({objectStore: mem});
				  
				  grid = new EnhancedGrid({
						store: dataStore,
						plugins:{ 
							indirectSelection: {headerSelector:true, width:"40px", styles:"text-align: center;"},
							pagination: true
						}, 
						
						//query: { id: "*" },
						structure: [
							{ name: "用户名", field: "name", width: "84px" },
							{ name: "用户名描述", field: "desc", width: "84px" },
							{ name: "允许登录数", field: "loginNum", width: "60px" }
						]
					}, "userList");
				  grid.startup();
				  
			  })
		});

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

实现方式二：

	<div data-dojo-type="dojo/store/JsonRest" data-dojo-id="userData" data-dojo-props='target: "/dojo/rest/getUsers"'></div>
	<div data-dojo-type="dojo/data/ObjectStore" data-dojo-id="UserStore" data-dojo-props="objectStore: userData"></div>
	<table data-dojo-type="dojox/grid/EnhancedGrid" 
	data-dojo-props='store: UserStore, autoWidth:true, autoHeight:true, rowSelector: "20px", 
	plugins:{
		indirectSelection: {headerSelector:true, width:"40px", styles:"text-align: center;"}, 
		pagination: {description: true,sizeSwitch: true,pageStepper: true,gotoButton: true}
	}' 
	>
		<thead>
		    <tr>
			    <th field="id" width= "50px" >序号</th>
			    <th field="name" width= "200px" >用户名</th>
			    <th field="desc" width= "200px" >用户名描述</th>
			    <th field="loginNum" width= "200px" >允许登录数</th>
		    </tr>
		</thead>
	</table>

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

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

返回结果：

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