标签：des style blog http io os 使用 java ar
关于dojo grid有几种，我们项目中只用了dojox.grid.EnhancedGrid。一个系统组件最好统一，不要乱用。
EnhancedGrid提供一些常用的特性和一些基本的使用方法。我们下面都会讲到。
说到grid务必会需要store的数据支撑。EnhancedGrid常用的store有三种：
dojox.data.QueryReadStore //这个store主要是用于动态的load服务端的数据
dojo.data.ItemFileReadStore //顾名思义，FileRead就是读取json文件的数据，json文件提供了
//store要求的数据结构的json串。 继承自dojo/data/api/Read
dojo.data.ItemFileWriteStore//继承了ItemFileReadStore，但是可以编写数据。
关于分页：
第一步：
var defaultPlugins ={
pagination: {
pageSizes: ["50","100","200"], //custom the items per page button
description: true, // custom whether or not the description will be displayed
sizeSwitch: true, // custom whether or not the page size switch will be displayed
pageStepper: true, //custom whether or not the page step will be displayed
gotoButton: false, //custom whether or not the goto page button will be displayed
maxPageStep: 0, //custom how many page step will be displayed
position: "bottom", //There‘re two options: top, bottom
defaultPage: 1, //which page will be displayed by default
defaultPageSize: 50 // what page size will be used by default
},
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。
第二步：
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排序参数数组
// }
在这里多说几句：
simpleFetch原理和dojo/data/api/Read一样，我们说的上面三个gird用的store都实现了dojo.data，而dojo.data api又提供了
Dojo.data.api.read
Dojo.data.api.write
Dojo.data.api.identify
//Dojo.data.api.read 提供了fetch的方法，和上面的simpleFetch.fetch()一个意思。
所以我们在使用比如dojo.data.ItemFileReadStore的时候，就可以用fetch()来抓取数据。
第三步：
<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>
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‘ },
];
然后在我们做查询的时候就使用：
grid.setQuery({});这个{}参数会传递给comm.data.QueryReadStore中的request.query，然后一并传入后台。
比如grid.setQuery({name:"张三"});
在java中我们就可以用request.getParamter("name");来获取“张三”。
在JS中的写法：
var store=new comm.data.QueryReadStore({url:this.listUrl,urlPreventCache:true});
var grid = new dojox.grid.EnhancedGrid({
region:"center" ,
splitter:true,
plugins : defaultPlugins,
structure: layout,
store: store,
selectionMode: "single", //或者用“multi”,表示gird显示单选radio button还是checkbox
canSort:function(){return true} , //返回true为需要排序，默认为false
});
grid 排序解释
//排序，比如我们点击登陆名的标题，就是按照登陆名来排序，这样QueryReadStore的sort就会就会传给后台，可以通过request.getParamter("sort");获得值
//第一次点击是升序就会传入loginName，
//第二次点击的时候就是降序，传入-loginName参数。我们后台可根据是否包含“-”来判断排序。
grid获取值方法：
1：radio获取一个值：
var item = grid.selection.getFirstSelected();
var id = store.getValue(item,‘id‘);
2：checkbox获取多个值：
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：获得grid所有的值：
利用fetch抓取
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")
});
})
}
});
标签：des style blog http io os 使用 java ar
原文地址：http://www.cnblogs.com/dojoblog/p/3978946.html
