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")
            });

        })
    }
});