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",width: "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", width: '150px',hidden:true },
        { field: "loginName", name: "登錄名", width: '150px' },
        { field: "realName", name: "姓名", width: '150px' },
        { field: "roleNames", name: "角色名", width: '150px' },
        { field: "organizationName", name: "組織名", width: '150px' },
        { field: "comments", name: "備註", width: '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")
            });

        })
    }
});