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

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


后台测试数据初始化:

[java] view plain copy
@H_403_16@
  • staticList<User>arrD=newArrayList<User>();
  • static{
  • @H_301_37@for(inti=0;i<51;i++){
  • Useru=newUser();
  • u.setId(i);
  • u.setName("test"+i);
  • @H_301_37@if(i%2==0){
  • u.setDesc("devadminuser");
  • u.setLoginNum(10);
  • }else{
  • u.setDesc("devoperuser");
  • u.setLoginNum(20);
  • }
  • arrD.add(u);
  • }
  • 后台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. @H_301_37@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. @H_301_37@intfrom=Integer.parseInt(range[0]);
    16. //查询终点
    17. @H_301_37@intto=Integer.parseInt(range[1]);
    18. //防止越界
    19. @H_301_37@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. @H_301_37@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. @H_301_37@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

    原文链接:https://www.f2er.com/dojo/290996.html

    猜你在找的Dojo相关文章