后台测试数据初始化：
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",{ 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,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