使用 MVC 设计模式的 Dojo Grid -2
|
- UID
- 1066743
|
使用 MVC 设计模式的 Dojo Grid -2
以编程方式构建数据存储要动态地构造和更改表格的存储，同时对服务器端做出响应，您必须：
- 使用 JavaScript 以编程方式将传入的数据重新组织为 Dojo 熟悉的数据。
- 创建一个 Dojo 存储。
- 将存储设置为表格。
清单 4 中的代码将一个 JSON 对象构造为数据存储格式。
清单 4. 重新组织数据1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| generateStoreData: function(/*JSON array*/itemList){
var data = {};
var items = [];
for (var i = 0; i < itemList.length; i++) {
var item = {};
item["id"] = itemList.id;
item["name"] = itemList.name;
item["manger"] = itemList.isManger;
item["sex"] = itemList.sex;
item["age"] = itemList.age;
item["date"] = itemList.date;
item["annualLeaveTotal"] = itemList.altotal;
item["annualLeaveTaken"] = itemList.altaken;
items.push(item);
}
data["identifier"] = "id";
data["label"] = "name";
data["items"] = items;
return data;
}
|
接下来，可以创建一个存储并将其设置为表格。
清单 5. 创建并设置表格存储1
2
3
| dijit.byId("grid").store = new dojo.data.ItemFileReadStore({
data: this.generateStoreData(itemList)
});
|
所有这些步骤所得到的表格与 图 1 所示完全一样。
查询数据存储Dojo Grid 通常在其数据模型中存储整个数据源。但是，随着数据大小的不断增长，这可能影响到性能。实际上，当 Dojo Grid 存储中的项超出了一定数量时，并且如果每项都具有许多属性，排序、搜索和呈现等表格操作的性能就会显著下降。
但是，可以通过一些方式来改善性能。可以编写代码来让服务器向浏览器发送有限的数据，并将这些数据构造到一个表格数据存储中，或者可以使用或扩展 Dojox 项目提供的 QueryReadStore 来从服务器动态加载数据。这种方法可用于从服务器上大型的数据存储中检索数据块。
清单 6. 使用查询存储来处理大型数据1
2
3
4
5
6
7
8
| <div dojoType="dojox.data.QueryReadStore" jsId="store" url="../someServlet"
requestMethod="post"></div>
<div dojoType="dojox.grid.data.DojoData" jsId="model" store="store"
sortFields="[{attribute: 'name', descending: true}]" rowsPerPage="30"> </div>
<div id="grid" jsId="grid" dojoType="dojox.grid.DataGrid" model="model" structure="layout"
rowSelector="10px"><div>
|
DojoX 项目提供了许多其他数据存储来满足不同的用途。表 1 给出了 Dojo 中目前可用的存储以及它们的目标。
表 1. Dojo 中的可用存储Dojo 存储用途dojo.data.ItemFileReadStore 用于 JSON 数据的只读存储。dojo.data.ItemFileWriteStore 用于 JSON 数据的读/写存储。dojox.data.CsvStore 用于逗号分隔变量 (CSV) 格式数据的只读存储。dojox.data.OpmlStore 用于大纲处理标记语言（Outline Processor Markup Language，OPML）的只读存储。dojox.data.HtmlTableStore 用于 HTML 格式表格中所保存数据的只读存储dojox.data.XmlStore 用于基本 XML 数据的读/写存储。dojox.data.FlickrStore 针对 flickr.com 上的查询的读取存储，是 Web 服务数据存储的一个出色示例。dojox.data.FlickrRestStore 针对 flickr.com 上的查询的读取存储，是 Web 服务数据存储的一个出色示例。这是 FlickrStore 的一个更高级的版本。 dojox.data.QueryReadStore 类似于 ItemFileReadStore，是用于 JSON 数据的只读存储，但会在收到每个请求时查询服务器。 dojox.data.AtomReadStore 用于 Atom XML 文档的读取存储。 |
|
|
|
|
|
