Dojo1.6官方教程:连接DataGrid和Store
原作者:Kris Zyp
原文链接:http://dojotoolkit.org/documentation/tutorials/1.6/store_driven_grid/
译者:zhuxw(zhuxw1984@gmail.com)
难度:初等
Dojo版本:1.6
DataGrid和Store
首先,我们将创建一个store。在本例中将创建一个JsonRest store,它将通过JSON REST HTTP成为连接grid和我们的服务器的纽带。创建代码如下:
以上代码表明这个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。——译者注))
现在我们已经创建好了grid,当它启动完成后(即调用grid.startup()后——译者注),将调用store的query()方法,从而触发一个请求来获取数据。服务器需要返回一个包含数据的JSON数组作为响应,这样,grid就会将这些数据渲染出来。这个JSON数组形式的响应看上去就像这样:
【示例】好了,现在我们已经有了一个可以正常工作的grid,它能从我们的服务器获取数据。接下来我们来看一下如何增强我们这个组件。
分页
通过响应滚动鼠标滚轮事件来实现即时分页是Dojo DataGrid的强大功能之一。它为浏览大数据集提供了无缝、直观的用户体验——无需点击任何分页控件,只需简单地滚动滚轮即可看到更多数据。这种即时分页是通过向store不断发送一种特殊的请求实现的,这种请求限制了每次返回的数据行数。grid将给store的query()方法传一个请求对象作为其第二个参数,这个对象中有两个属性:start和count。JsonRest store通过HTTP头部属性Range将这两个参数发送到服务器端。这是一个对于可伸缩性非常重要的特性,因为这使得我们能够延迟加载在可视范围之外的行,而不是一下子加载所有数据。向服务器发出的第一个请求如下所示(你可以在浏览器的调试工具中方便地查看这些请求):http服务器可以通过Range头来确定需要向客户端发送多少行数据(例如,可以把这个Range头转化为MySQL服务器的LIMIT或OFFSET参数)。对于大规模的数据集,当你将grid向下滚动时,将触发后续的请求。这些后续请求也都具有Range参数,只不过偏移量(起始行号)不同罢了。grid并不直接向服务器发送请求,而是调用store的函数(这些都是自动完成的):
排序
DataGrid还支持在点击列头时触发对数据排序的请求。出于性能考虑,grid将实际的排序工作交给了store去做,因为在数据库中进行排序的效率是最高的。当点击一列时,grid将向store发送一个带有sort参数的新请求,这个参数通过query()方法的第二个形参(是一个参数对象)传入。对于JsonRest store来说,这将告诉服务器,返回的数据需要按照某个属性排序(在本例中是“name”属性):grid内部通过下面的逻辑向store发出排序请求:
grid这种与store的交互方式有一个很重要的特性,那就是这种请求数据的方式使得store的数据视图保持独立。这意味着如果我们在grid外直接向store请求数据,对于grid的显示是没有任何影响的。换句话说,grid对于store的请求只限于其自身,与其他请求是相互独立的。你无法直接对store排序,你只能获取一个排好序的数据视图,这个数据视图就是当你点击列头时grid显示的内容。
过滤
除了排序视图外,我们还可以创建过滤视图。这可以通过setQuery()方法做到。DataGrid将把这些参数传给store(和排序与分页一样,过滤数据也最好在数据库层面完成,这样的效率最高)。例如,过滤出所有缩写为“NY”的行,只需要这样写:这句话将触发一个如下请求:
这个请求也将被转化为合适的数据库查询。
在Grid内部,传给setQuery方法的这个请求是作为store.query()方法的第一个参数。如果使用的是JsonRest store,这个请求最终会转化为字符串,接在URL后面以http GET方法的形式发送到服务器端。
编辑Grid
DataGrid支持双击后(或单击后)直接编辑单元格,可以提供很好的用户体验。DataGrid通过统一的数据接口将改动写回store。一旦编辑了一个单元格,改变后的数据通过Dojo数据适配器的setValue方法写回,在未保存之前暂时留在适配器中,直到调用了save()方法:调用save()方法后,所有未保存的改动都会通过put()方法保存到store中。
注意:DataGrid经常需要通过ID获取对象。为了避免向服务器发送多余的请求,还可以为store加上一层Cache缓存,从而在本地快速存取缓存的对象: