博客贡献于: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") }); }) } });