准备工作
Gridx 是基于 Dojo 的开源项目,在 GitHub 或者其官网都可以下载到源码包。下载解压后将 gridx 文件夹置于与 dojo、dijit 和 dojox 等文件夹同级的目录即可。目前 Gridx 支持 Dojo1.7+。
gridx/tests 文件夹中有大量的示例页面,可以从修改这些示例页面开始学习使用 Gridx。
创建 Gridx
Gridx 继承了 dijit._WidgetBase,因此其创建方式和其他 widget 类似,只是有一些必须指定的参数需要特别说明。
选用合适的 store 和 cache
Gridx 与 DataGrid 一样,都以 Dojo 的 store 作为数据源。不过,Gridx 需要用户指出所用的 store 是异步的还是同步的。异步 store 通常由服务器端提供数据,向它请求数据时往往需要异步地接收返回数据;而同步 store 的所有数据一般都在客户端,因此所有的请求都能同步完成。异步 store 往往会带来更为复杂的逻辑,因此 Gridx 针对这两种 store 分别进行了优化。但由于无法从 store 本身得知它是否异步,同时为了减小代码量,用户需要将这个信息告知 Gridx。告知的方法是设置 cacheClass 参数:
清单 1. 创建 Gridx 并配置 cacheClass 参数
require([
"gridx/Grid",
"gridx/core/model/cache/Sync",
......
"dojo/domReady!"
], function(Gridx, Cache, ......){
......
var grid = new Gridx({
cacheClass: Cache
store: store,
......
});
grid.placeAt('gridContainerNode');
grid.startup();
});
目前 Gridx 有两种 cache 实现:gridx/core/model/cache/Sync 和 gridx/core/model/cache/Async,前者用于同步 store,后者用于异步 store。Async 的实现逻辑比 Sync 要复杂得多,这是因为它需要考虑数据的延迟加载。这样,如果用户的应用只需要客户端数据,就完全不必用到关于延迟加载的代码,从而减小了最终下载到浏览器的代码量。
cacheClass 既可以直接接受 cache 实现的构造函数(如上例),也可以接受 MID,例如:
清单 2. 用 MID 设置 cacheClass 参数
var grid = new Gridx({
cacheClass: "gridx/core/model/cache/Async"
......
});
这种写法更适合以 HTML 声明的方式创建 Gridx 的场合,因为它不需要引入额外的变量。
目前 Gridx 能够直接支持 dojo(x)/data/* 的老 store 以及 dojo/store/* 的新 store,而不需要任何适配转换。常用的同步 store 有 dojo/data/ItemFileWriteStore 以及 dojo/store/Memory。常用的异步 store 有 dojox/data/JsonRestStore、dojox/data/QueryReadStore 以及 dojo/store/JsonRest。
需要特别注意的是,Gridx 要求 store 中的数据行必须具有唯一标识符(ID)。对于老 store 而言,也就是必须要实现 dojo/data/api/Identity。所幸刚才列举的常用 store 都满足这个要求。
声明列
配好 store 并选择好 cache 之后,就需要声明 Gridx 的列结构。列声明使用 structure 参数,这和 DataGrid 类似。所不同的是,Gridx 的列声明结构非常简单,只支持一维数组,没有 DataGrid 中视图(View)和子行(rows/cells)等复杂的声明结构:
清单 3. 一维数组结构的列声明
var grid = new Gridx({
cacheClass: Cache
store: store,
structure: [
{id: 'column1', ......},
{id: 'column2', ......},
{id: 'column3', ......},
......
]
});
下面各小节详细介绍列声明中各个属性的含义。
id、name、field
对于 Gridx 来说,每一列都有一个唯一标识符(ID)。用户最好能指定一些有意义的 ID,从而方便以后的使用。如果用户没有指定,那么 Gridx 会分别赋予"1", "2", "3", ....... 等字符串类型的自然数作为列的默认 ID。
与 DataGrid 类似,name 属性是指表头上显示出来的列名。name 属性可以是任意字符串,甚至可以包含 HTML 标签,从而做出各种定制效果。例如:{id: 'column1', name: 'Company Name'}。
field 属性也是从 DataGrid 沿袭下来的,指该列在 store 中的对应域。该列中的单元格会从这个 field 域中取得数据。
创建选用合适的和与一样都以的作为数据源不过需要用户指出所用的是异步的