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

前端之家收集整理的这篇文章主要介绍了dojo EnhancedGrid的两种实现方式对比,转载自http://blog.csdn.net/earthhour/article/details/17203515前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。


后台测试数据初始化:

[java] view plain copy
  1. staticList<User>arrD=newArrayList<User>();
  2. static{
  3. for(inti=0;i<51;i++){
  4. Useru=newUser();
  5. u.setId(i);
  6. u.setName("test"+i);
  7. if(i%2==0){
  8. u.setDesc("devadminuser");
  9. u.setLoginNum(10);
  10. }else{
  11. u.setDesc("devoperuser");
  12. u.setLoginNum(20);
  13. }
  14. arrD.add(u);
  15. }
后台rest服务:

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

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

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

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

前台dojo实现方式一:

[javascript]
    require([
  1. "dojox/grid/EnhancedGrid",
  2. "dojox/grid/enhanced/plugins/IndirectSelection",
  3. "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!"
  4. ],function(EnhancedGrid,IndirectSelection,Pagination,xhr,Memory,ObjectStore){
  5. xhr.get("/dojo/rest/getUsers",{
  6. headers:{'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'},248)"> handleAs:"json"
  7. }).then(function(data){
  8. varmem=newMemory({data:data});
  9. vardataStore=newObjectStore({objectStore:mem});
  10. grid=newEnhancedGrid({
  11. store:dataStore,
  12. plugins:{
  13. indirectSelection:{headerSelector:true,width:"40px",styles:"text-align:center;"},248)"> pagination:true
  14. },0); background-color:inherit">//query:{id:"*"},
  15. structure:[
  16. {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"}
  17. ]
  18. "userList");
  19. grid.startup();
  20. })
  21. });
[html]
    <divid="userList"style="height:200px;"></div>
实现方式二:

    divdata-dojo-type="dojo/store/JsonRest"data-dojo-id="userData"data-dojo-props='target:"/dojo/rest/getUsers"'>
  1. divdata-dojo-type="dojo/data/ObjectStore"data-dojo-id="UserStore"data-dojo-props="objectStore:userData">
  2. tabledata-dojo-type="dojox/grid/EnhancedGrid"
  3. 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:{
  4. indirectSelection:{headerSelector:true,width:"40px",styles:"text-align:center;"},
  5. pagination:{description:true,sizeSwitch:true,pageStepper:true,gotoButton:true}
  6. }'
  7. theadtrthfield="id"width="50px">序号ththfield="name"width="200px">用户名thfield="desc"width="200px">用户名描述thfield="loginNum"width="200px">允许登录table>

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

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

返回结果:

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

猜你在找的Dojo相关文章