Dojo1.6官方教程:连接DataGrid和Store

前端之家收集整理的这篇文章主要介绍了Dojo1.6官方教程:连接DataGrid和Store前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

原作者:Kris Zyp
原文链接:http://dojotoolkit.org/documentation/tutorials/1.6/store_driven_grid/
译者:zhuxw(zhuxw1984@gmail.com)


鉴于DataGrid对于表格数据的有效呈现,它早已成为许多应用的核心组件之一。在本教程中,我们将着眼于如何为grid连上store(Dojo的客户端数据集——译者注),以进行快捷高效的数据读取和更新。

难度:初等
Dojo版本:1.6

DataGrid和Store

首先,我们将创建一个store。在本例中将创建一个JsonRest store,它将通过JSON REST HTTP成为连接grid和我们的服务器的纽带。创建代码如下:

dojo.require("dojo.store.JsonRest");
myStore = new dojo.store.JsonRest({target:"MyData/"});
以上代码表明这个store将向给定的URL("MyData/")发送请求,以获取修改数据。

注意:其他类型的store也能使用,例如dojo/store/Memory(原文有误,并不存在dojo/data/Memory。 ——译者注),也能够驱动DataGrid。然而本教程只采用 JsonRest store。


现在我们可以创建DataGrid了。在1.6版中DataGrid仍然基于dojo.data API,因此我们将使用接口适配器dojo.data.ObjectStore来连接DataGrid和我们刚刚创建的store。DataGrid采用标准的Dojo小部件的构造方式,因此我们可以用我们的store作为参数来实例化一个DataGrid(同时请确保已经导入了正确的CSS文件(例如使用claro主题的话,可导入dojox/grid/resources/claroGrid.css。——译者注))
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ObjectStore");
dojo.ready(function(){
    grid = new dojox.grid.DataGrid({
        store: dataStore = dojo.data.ObjectStore({objectStore: myStore}),structure: [
            {name:"State Name",field:"name",width: "200px"},{name:"Abbreviation",field:"abbreviation",width: "200px"}
        ]
    },"target-node-id"); // make sure you have a target HTML element with this id
    grid.startup();
});
现在我们已经创建好了grid,当它启动完成后(即调用grid.startup()后——译者注),将调用store的query()方法,从而触发一个请求来获取数据。服务器需要返回一个包含数据的JSON数组作为响应,这样,grid就会将这些数据渲染出来。这个JSON数组形式的响应看上去就像这样:
[
    {"id":0,"name":"Alabama","abbreviation":"AL","capital":"Montgomery"},{"id":1,"name":"Alaska","abbreviation":"AK","capital":"Juneau"}
]
【示例】 好了,现在我们已经有了一个可以正常工作的grid,它能从我们的服务器获取数据。接下来我们来看一下如何增强我们这个组件。

分页

通过响应滚动鼠标滚轮事件来实现即时分页是Dojo DataGrid的强大功能之一。它为浏览大数据集提供了无缝、直观的用户体验——无需点击任何分页控件,只需简单地滚动滚轮即可看到更多数据。这种即时分页是通过向store不断发送一种特殊的请求实现的,这种请求限制了每次返回的数据行数。grid将给store的query()方法传一个请求对象作为其第二个参数,这个对象中有两个属性:start和count。JsonRest store通过HTTP头部属性Range将这两个参数发送到服务器端。这是一个对于可伸缩性非常重要的特性,因为这使得我们能够延迟加载在可视范围之外的行,而不是一下子加载所有数据。向服务器发出的第一个请求如下所示(你可以在浏览器的调试工具中方便地查看这些请求):
GET /MyData/ HTTP/1.1
Range: items=0-19
...
http服务器可以通过Range头来确定需要向客户端发送多少行数据(例如,可以把这个Range头转化为MysqL服务器的LIMIT或OFFSET参数)。对于大规模的数据集,当你将grid向下滚动时,将触发后续的请求。这些后续请求也都具有Range参数,只不过偏移量(起始行号)不同罢了。grid并不直接向服务器发送请求,而是调用store的函数(这些都是自动完成的):
myStore.query("",{start: 0,count: 20}).then(...grid's callback...);

排序

DataGrid还支持在点击列头时触发对数据排序的请求。出于性能考虑,grid将实际的排序工作交给了store去做,因为在数据库中进行排序的效率是最高的。当点击一列时,grid将向store发送一个带有sort参数的新请求,这个参数通过query()方法的第二个形参(是一个参数对象)传入。对于JsonRest store来说,这将告诉服务器,返回的数据需要按照某个属性排序(在本例中是“name”属性):
GET /MyData/?sort(+name) HTTP/1.1
Range: items=0-19
...
grid内部通过下面的逻辑向store发出排序请求:
myStore.query("",count: 20,sort:[{attribute:"name"}]}).
        then(...grid's callback...);

grid这种与store的交互方式有一个很重要的特性,那就是这种请求数据的方式使得store的数据视图保持独立。这意味着如果我们在grid外直接向store请求数据,对于grid的显示是没有任何影响的。换句话说,grid对于store的请求只限于其自身,与其他请求是相互独立的。你无法直接对store排序,你只能获取一个排好序的数据视图,这个数据视图就是当你点击列头时grid显示内容


过滤

除了排序视图外,我们还可以创建过滤视图。这可以通过setQuery()方法做到。DataGrid将把这些参数传给store(和排序与分页一样,过滤数据也最好在数据库层面完成,这样的效率最高)。例如,过滤出所有缩写为“NY”的行,只需要这样写:
grid.setQuery({abbreviation: "NY"});
这句话将触发一个如下请求:
GET /MyData/?abbreviation=NY HTTP/1.1
Range: items=0-19
...
这个请求也将被转化为合适的数据库查询

在Grid内部,传给setQuery方法的这个请求是作为store.query()方法的第一个参数。如果使用的是JsonRest store,这个请求最终会转化为字符串,接在URL后面以http GET方法的形式发送到服务器端。


编辑Grid

DataGrid支持双击后(或单击后)直接编辑单元格,可以提供很好的用户体验。DataGrid通过统一的数据接口将改动写回store。一旦编辑了一个单元格,改变后的数据通过Dojo数据适配器的setValue方法写回,在未保存之前暂时留在适配器中,直到调用了save()方法
dataStore.save();
调用save()方法后,所有未保存的改动都会通过put()方法保存到store中。


注意:DataGrid经常需要通过ID获取对象。为了避免向服务器发送多余的请求,还可以为store加上一层Cache缓存,从而在本地快速存取缓存的对象:
dojo.require("dojo.store.JsonRest");
dojo.require("dojo.store.Memory");
dojo.require("dojo.store.Cache");
myStore = dojo.store.Cache(
    dojo.store.JsonRest({target:"MyData/"}),dojo.store.Memory());

结论

DataGrid是一个功能强大、丰富的表格控件,提供伸缩式的表格数据渲染,还包括排序、过滤、列移动、选择、编辑、键盘导航等等。DataGrid与store的紧密联系使得在Grid中对数据处理进行配置非常容易。 原文链接:https://www.f2er.com/dojo/291657.html

猜你在找的Dojo相关文章