|
后台测试数据初始化：
- staticList<User>arrD=newArrayList<User>();
- static{
- for(inti=0;i<51;i++){
- Useru=newUser();
- u.setId(i);
- u.setName("test"+i);
- if(i%2==0){
- u.setDesc("devadminuser");
- u.setLoginNum(10);
- }else{
- u.setDesc("devoperuser");
- u.setLoginNum(20);
- }
- arrD.add(u);
- }
后台rest服务：
@GET
- @POST
- @Path("/getUsers")
-
- @Produces("application/json")
- publicList<User>getUsers(@ContextHttpServletRequestrequest,@ContextHttpServletResponseresponse){
-
- //items=0-9
-
- //如果requestheader中没有Range参数，则返回全部记录
- if(request.getHeader("Range")==null){
- returnarrD;
- }else{
- //store会在requestheader中添加Range参数，参数值类似这种：items=0-9，表明了查询范围。此处要提取该参数值
- String[]range=request.getHeader("Range").replaceAll("items=","").split("-");
- //查询起点
- intfrom=Integer.parseInt(range[0]);
- //查询终点
- intto=Integer.parseInt(range[1]);
- //防止越界
- if(to>arrD.size()){
- to=arrD.size()-1;
- //还要告诉grid记录总数有多少，以及当前查询范围
- StringcontentRange=String.format("items%d-%d/%d",from,to,arrD.size());
- //responseheader中添加Content-Range参数，参数值类似这种：items0-9/51
- response.setHeader("Content-Range",contentRange);
- //查询结果
- returnarrD.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",108); list-style:decimal-leading-zero outside; color:inherit; line-height:20px; margin:0px!important; padding:0px 3px 0px 10px!important"> "dojo/request/xhr",248)"> "dojo/store/Memory",108); list-style:decimal-leading-zero outside; color:inherit; line-height:20px; margin:0px!important; padding:0px 3px 0px 10px!important"> "dojo/data/ObjectStore",248)"> "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'},248)"> handleAs:"json"
- }).then(function(data){
-
- varmem=newMemory({data:data});
- vardataStore=newObjectStore({objectStore:mem});
- grid=newEnhancedGrid({
- store:dataStore,
- plugins:{
- indirectSelection:{headerSelector:true,width:"40px",styles:"text-align:center;"},248)"> pagination:true
- },0); background-color:inherit">//query:{id:"*"},
- structure:[
- {name:"用户名",field:"name",width:"84px"},248)"> {name:"用户名描述",field:"desc",108); list-style:decimal-leading-zero outside; color:inherit; line-height:20px; margin:0px!important; padding:0px 3px 0px 10px!important"> {name:"允许登录数",field:"loginNum",width:"60px"}
- ]
- "userList");
- grid.startup();
- })
- });
<divid="userList"style="height:200px;"></div>
实现方式二：
divdata-dojo-type="dojo/store/JsonRest"data-dojo-id="userData"data-dojo-props='target:"/dojo/rest/getUsers"'>
- divdata-dojo-type="dojo/data/ObjectStore"data-dojo-id="UserStore"data-dojo-props="objectStore:userData">
- tabledata-dojo-type="dojox/grid/EnhancedGrid"
- data-dojo-props='store:UserStore,autoWidth:true,autoHeight:true,rowSelector:"20px",108); list-style:decimal-leading-zero outside; color:inherit; line-height:20px; margin:0px!important; padding:0px 3px 0px 10px!important"> plugins:{
- indirectSelection:{headerSelector:true,width:"40px",styles:"text-align:center;"},
- pagination:{description:true,sizeSwitch:true,pageStepper:true,gotoButton:true}
- }'
- theadtrthfield="id"width="50px">序号ththfield="name"width="200px">用户名thfield="desc"width="200px">用户名描述thfield="loginNum"width="200px">允许登录数table>
这两种方式都能实现EnhancedGrid的翻页功能
但是，第一种方式是一次性加载全部数据，request header中不添加Range；第二种方式是懒惰加载，包含Range，如图
返回结果：
这是第二种方式的返回结果。第一种方式的返回结果左侧为0~50 （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
