zoukankan      html  css  js  c++  java
  • dojox.grid.EnhancedGrid

    博客贡献于:dojo技术交流群(35476066)

    作者:spring

    关于dojo grid有几种,我们项目中只用了dojox.grid.EnhancedGrid。一个系统组件最好统一,不要乱用。

    EnhancedGrid提供一些常用的特性和一些基本的使用方法。我们下面都会讲到。

    说到grid务必会需要store的数据支撑。EnhancedGrid常用的store有三种:

    dojox.data.QueryReadStore  //这个store主要是用于动态的load服务端的数据

    dojo.data.ItemFileWriteStore//继承了ItemFileReadStore,但是可以编写数据。

    dojo.data.ItemFileReadStore //顾名思义,FileRead就是读取json文件的数据,json文件提供了

                                    //store要求的数据结构的json串。 实现了dojo/data/api/Read接口读取数据

    关于分页:

    第一步:

    在页面加载的时候初始化分页的公共参数配置

    var defaultPlugins ={ 
          pagination: {
              pageSizes: ["50","100","200"], //设置可选择的每页显示多少条
              description: true, 
              sizeSwitch: true,
              pageStepper: true,
              gotoButton: false,
              maxPageStep: 0,
              position: "bottom",	//top, bottom
              defaultPage: 1, 
              defaultPageSize: 50 //默认每页显示条数
          },
          selector: {col: false,row: true,cell: false},
          indirectSelection:{headerSelector:true,name: "Selection", "20px", styles: "text-align: center;"}
    };

    在html中添加:

    <div data-dojo-id="store" data-dojo-type="dojox.data.QueryReadStore" data-dojo-props='url:"system/user/list"'></div>

    可是这个store会存在缓存问题,第一次请求到后台,第二次被缓存不会再次发送。所以我们要对这个store进行改造,让每次请求后都加上时间戳。

    那怎么做呢?我们来写一个公共通用的store来继承这个dojox.data.QueryReadStore。

    第二步:

    编写一个通用的QueryReadStore.js

    define([
        "dojo/_base/declare",
        "dojox/data/QueryReadStore"
    ], function(declare,QueryReadStore){
    
        return declare("comm.data.QueryReadStore", [QueryReadStore], {
            urlPreventCache:true, //是否给url加时间戳
            fetch:function(request) { 
                if(this.urlPreventCache){
                    var _query = request.serverQuery || request.query || {};
                    request.serverQuery = dojo.mixin(_query,{"dojo.preventCache":new Date().getTime()});
                }
                return this.inherited("fetch", arguments);
            }
        });
    });
    //fetch方法在发送请求的时候,会调用。
    //request参数来自simpleFetch对象,这个request对象可能包含了我们分页需要的属性:
    
    // {
    //     query: query-object or query-string, //设置查询参数
    //     queryOptions: object,
    //     onComplete: Function, //在数据返回后调用,参数:抓取的数据和抓取的request
    //     onBegin: Function,      //在数据返回前调用,参数:数据集合的size和抓取的request
    //     onError: Function,
    //     start: int,
    //     count: int,
    //     sort: array,sort排序参数数组
    //     }

     

    在这里多说几句:

    dojo在对于data操作提供了几个API接口,

    Dojo.data.api.read      //搜索,排序,过滤

    Dojo.data.api.write     //创建,删除,更新

    Dojo.data.api.identify //唯一标识和访问数据

    dojo.data.api.notificattion //监听数据项的增删改操作

    ItemFileReadStore实现了Dojo.data.api.read和Dojo.data.api.identity接口。

    ItemFileWriteStore实现了这这四个接口。

    //Dojo.data.api.read 接口中也提供了fetch的方法,和上面的simpleFetch.fetch()一个意思。

    因此我们在使用store的时候,就可以用fetch()来抓我们想要取数据。

     

    第三步:

    第一步和第二步公共步骤写完之后,以后我们只需要写这第三步的东西添加到页面中就可以了。

    <div data-dojo-id="store" data-dojo-type="comm.data.QueryReadStore" data-dojo-props='url:"system/user/list"'></div>
    <div data-dojo-id="grid" data-dojo-type="dojox.grid.EnhancedGrid" data-dojo-props='region:"center", 
    	store:store,rowsPerPage:15, plugins:defaultPlugins, structure:layout,noDataMessage:"暂无数据"'></div>
    
    <script>
        var layout = [
            { field: "id", name: "id",  '150px',hidden:true },
            { field: "loginName", name: "登陆名",  '150px' },
            { field: "realName", name: "姓名",  '150px' },
            { field: "roleNames", name: "角色名",  '150px' },
            { field: "organizationName", name: "组织名",  '150px' },
            { field: "comments", name: "备注",  'auto' },
        ];
    </script>

    然后在我们做查询的时候就使用:

    grid.setQuery({});这个{}参数会传递给comm.data.QueryReadStore中的request.query,然后一并传入后台。

    比如grid.setQuery({realName:"张三"});

    在java中我们就可以用request.getParamter("realName");来获取“张三”。

     

    在JS中的写法:

    var store=new comm.data.QueryReadStore({url: url});
    var grid = new dojox.grid.EnhancedGrid({
              region:"center" ,
              splitter:true,
              plugins : defaultPlugins,
              structure: layout,
              store: store,
              selectionMode: "single", //或者用“multi”,表示gird显示单选radio还是checkbox
              canSort:function(){return true} , //返回true为需要排序,默认为false
    
    });

     

    grid 排序解释

    //排序,比如我们点击登陆名的标题,就是按照登陆名来排序,这样QueryReadStore的sort就会就会传给后台,可以通过request.getParamter("sort");获得值

    //第一次点击是升序就会传入loginName

    //第二次点击的时候就是降序,传入-loginName参数。我们后台可根据否包含“-”来判断排序

     

    grid获取值方法:

    1:获取一个值:

    var item = grid.selection.getFirstSelected();
    var id = store.getValue(item,'id');

    2:获取多个值:

    var items = grid.selection.getSelected();
    var args = new Array();
    for(var i = 0; i < items.length; i ++){
        var id = grid.store.getValue(items[i],'id');
        args.push(id);
    }

    3:抓取store中的值:

    var data = new Array();
    store.fetch({ 
        onComplete: function(items, request){
            dojo.forEach(items,function(item){
                data.push({
                    id: store.getValue(item,"id"),
                    loginName: store.getValue(item,"loginName"),
                    realName: store.getValue(item,"realName")
                });
    
            })
        }
    });
  • 相关阅读:
    URAL 2046 A
    URAL 2056 Scholarship 水题
    Codeforces Gym 100286I iSharp 水题
    Codeforces Gym H. Hell on the Markets 贪心
    Codeforces Gym 100286G Giant Screen 水题
    Codeforces Gym 100286B Blind Walk DFS
    Codeforces Gym 100286F Problem F. Fibonacci System 数位DP
    Codeforces Gym 100286A. Aerodynamics 计算几何 求二维凸包面积
    Codeforces Gym 100418K Cards 暴力打表
    Codeforces Gym 100418J Lucky tickets 数位DP
  • 原文地址:https://www.cnblogs.com/dojoblog/p/3978946.html
Copyright © 2011-2022 走看看