jodo的datagrid简单介绍

原作者：Bryan Forbes 
原文链接：http://dojotoolkit.org/documentation/tutorials/1.6/datagrid/

译者：zhuxw (zhuxw1984@gmail.com)

转载自：http://blog.csdn.net/dojotoolkit/article/details/6605664

鉴于DataGrid对于表格数据的有效呈现，它早已成为许多应用的核心组件之一。在本教程中，我们将着眼于如何定义grid的布局结构，并讨论DataGrid所采用的滚屏机制。

难度：中等

适用Dojo版本：1.6 （其实绝大部分内容自1.2开始就支持了——译者注）

dojox.grid.DataGrid

估计我们都有过这样的经历：你的老板突然找到你，要求在你那个正在开发的应用中显示一大堆数据。作为一个Web开发人员，你知道数据呈现得越多，浏览器占用的内存就越大——但你的老板不懂这个，他只是要把这些数据弄进那个应用里。现在就是dojo的dojox.grid.DataGrid大显身手的时候了。DataGrid能够承载数千行的数据，并自如地滚屏，同时只占用相当小的内存。在本教程中，我们将学习DataGrid的基础知识。

为了提供DataGrid处理海量数据能力的直观印象，我们创建了一个显示美国职业棒球选手统计数据的grid：

【示例】

可以看到，DataGrid能够轻易地承载这份包含了17452项纪录的数据列表。在本教程中，我们将使用一份较小的数据集作为例子：只显示名人堂球员的击球统计。好了，让我们开始吧！

DataGrid的组成部分

你可能已经猜到了，DataGrid由数个不同部分组成。在最顶层，一个DataGrid由视图（View）组成。视图将DataGrid分割成好几个区域，并为每个区域单独渲染表头（header）和内容（content）。表头和内容由行（row）组成，行由子行（sub-row）组成。子行由单元格（cell）组成。让我们来看一些图，好有个直观的理解：

在后面的教程中，我们还将不断修这个示例的布局结构。要定义一个DataGrid的模样，我们需要在构造函数里给structure（结构）属性传递一些对象和数组。我们将从最小的可定义单元开始——单元格——直到最大的组成部分——视图。我们暂时不涉及如何从服务器端获取数据，但下一篇教程会涵盖这部分内容。

单元格

我们需要做的第一件事就是告诉DataGrid需要为每条数据记录显示哪些单元格（或称为“列”）。为了做到这点，我们将给structure属性传递一个“单元格定义”的数组。每一个单元格定义对象可以包含以下几个属性：

• name：在表头部分显示的字符串
• field：在数据记录中（用于获取数据——译者注）的字段名
• width：表示列宽的CSS宽度字符串（需要带单位，不带单位的话默认为em——译者注）
• hidden：一个布尔值，如果是true，那么该列将被隐藏

[javascript]  view plain copy

1. grid = new dojox.grid.DataGrid({  
2.     store: store,  
3.     query: { id: "*" },  
4.     structure: [  
5.         { name: "First Name", field: "first", width: "84px" },  
6.         { name: "Last Name", field: "last", width: "84px" },  
7.         { name: "Bats", field: "bats", width: "70px" },  
8.         { name: "Throws", field: "throws", width: "70px" },  
9.         { name: "G", field: "totalG", width: "60px" },  
10.         { name: "AB", field: "totalAB", width: "60px" },  
11.         { name: "Games as Batter", field: "totalGAB", width: "120px" },  
12.         { name: "R", field: "totalR", width: "60px" },  
13.         { name: "RBI", field: "totalRBI", width: "60px" },  
14.         { name: "BB", field: "totalBB", width: "60px" },  
15.         { name: "K", field: "totalK", width: "60px" },  
16.         { name: "H", field: "totalH", width: "60px" },  
17.         { name: "2B", field: "total2B", width: "60px" },  
18.         { name: "3B", field: "total3B", width: "60px" },  
19.         { name: "HR", field: "totalHR", width: "60px" }  
20.     ]  
21. }, "grid");  

【示例】

DataGrid还提供了通过CSS样式和CSS类控制单元格视觉效果的方法。单元格定义中的headerStyles属性、cellStyles属性、以及styles属性都是CSS样式字符串（注意必须以分号结尾），它们分别应用于表头单元格、内容单元格，以及所有单元格。另外，headerClasses属性、cellClasses属性、以及classes属性则是以空格分隔的CSS类名，分别用于各自对应的单元格。

[javascript]  view plain copy

1. <style>  
2. .firstName {  
3.     font-style: italic;  
4. }  
5. .lastName {  
6.     font-weight: bold;  
7. }  
8. </style>  
9. <script>  
10. grid = new dojox.grid.DataGrid({  
11.     store: store,  
12.     query: { id: "*" },  
13.     structure: [  
14.         { name: "First Name", field: "first", width: "84px",  
15.             classes: "firstName" },  
16.         { name: "Last Name", field: "last", width: "84px",  
17.             cellClasses: "lastName" },  
18.         { name: "Bats", field: "bats", width: "70px",  
19.             cellStyles: "text-align: right;" },  
20.         { name: "Throws", field: "throws", width: "70px" },  
21.         { name: "G", field: "totalG", width: "60px" },  
22.         { name: "AB", field: "totalAB", width: "60px" },  
23.         { name: "Games as Batter", field: "totalGAB", width: "120px",  
24.             styles: "text-align: center;" },  
25.         { name: "R", field: "totalR", width: "60px" },  
26.         { name: "RBI", field: "totalRBI", width: "60px" },  
27.         { name: "BB", field: "totalBB", width: "60px" },  
28.         { name: "K", field: "totalK", width: "60px" },  
29.         { name: "H", field: "totalH", width: "60px" },  
30.         { name: "2B", field: "total2B", width: "60px" },  
31.         { name: "3B", field: "total3B", width: "60px" },  
32.         { name: "HR", field: "totalHR", width: "60px" }  
33.     ]  
34. }, "grid");  
35. </script>  

【示例】

子行

现在我们已经定义好了所有需要显示的数据字段，但看起来并不是很舒服。子行可以使某些数据更易阅读、更易理解。要定义子行，需要给DataGrid传一个单元格定义的数组的数组。子行允许我们在

单元格定义中使用两个新的属性：rowSpan定义了一个单元格占用多少子行，而colSpan则定义了一个单元格占用多少列。

注意：colSpan不能在第一个子行的单元格中定义，这是因为DataGrid使用了table-layout: fixed;样式来加速行的渲染。

[javascript]  view plain copy

1. grid = new dojox.grid.DataGrid({  
2.     store: store,  
3.     query: { id: "*" },  
4.     structure: [  
5.         [  
6.             { name: "First Name", field: "first", width: "84px", rowSpan: 2 },  
7.             { name: "Last Name", field: "last", width: "84px", rowSpan: 2 },  
8.             { name: "Bats", field: "bats", width: "70px", rowSpan: 2 },  
9.             { name: "Throws", field: "throws", width: "70px", rowSpan: 2 },  
10.             { name: "G", field: "totalG", width: "60px" },  
11.             { name: "AB", field: "totalAB", width: "60px" },  
12.             { name: "R", field: "totalR", width: "60px" },  
13.             { name: "RBI", field: "totalRBI", width: "60px" },  
14.             { name: "BB", field: "totalBB", width: "60px" },  
15.             { name: "K", field: "totalK", width: "60px" }  
16.         ],[  
17.             { name: "Games as Batter", field: "totalGAB", colSpan: 2 },  
18.             { name: "H", field: "totalH" },  
19.             { name: "2B", field: "total2B" },  
20.             { name: "3B", field: "total3B" },  
21.             { name: "HR", field: "totalHR" }  
22.         ]  
23.     ]  
24. }, "grid");  

【示例】

视图

我们已经让数据变得易读一些了，但是，一旦你将grid滚动到最右端，你就无法看到每条记录对应的球员是谁了。通过编写一个视图定义，我们能够锁定一组列，避免它们被左右滚动，从而始终保持可见。一个视图定义是一个具有如下特定属性的对象：

• cells：一个单元格定义的数组、或这个数组的数组
• noscroll：一个布尔值，当为true时该视图不显示滚动条（横向纵向都不显示——译者注）
• width：设置视图宽度的CSS宽度字符串。这个宽度只有在单元格宽度采用的是相对值（例如百分比）的时候才有效

[javascript]  view plain copy

1. grid = new dojox.grid.DataGrid({  
2.     store: store,  
3.     query: { id: "*" },  
4.     structure: [  
5.         {  
6.             noscroll: true,  
7.             cells: [  
8.                 { name: "First Name", field: "first", width: "84px" },  
9.                 { name: "Last Name", field: "last", width: "84px" }  
10.             ]  
11.         },{  
12.             cells: [  
13.                 [  
14.                     { name: "Bats", field: "bats", width: "70px", rowSpan: 2 },  
15.                     { name: "Throws", field: "throws", width: "70px", rowSpan: 2 },  
16.                     { name: "G", field: "totalG", width: "60px" },  
17.                     { name: "AB", field: "totalAB", width: "60px" },  
18.                     { name: "R", field: "totalR", width: "60px" },  
19.                     { name: "RBI", field: "totalRBI", width: "60px" },  
20.                     { name: "BB", field: "totalBB", width: "60px" },  
21.                     { name: "K", field: "totalK", width: "60px" }  
22.                 ],[  
23.                     { name: "Games as Batter", field: "totalGAB", colSpan: 2 },  
24.                     { name: "H", field: "totalH" },  
25.                     { name: "2B", field: "total2B" },  
26.                     { name: "3B", field: "total3B" },  
27.                     { name: "HR", field: "totalHR" }  
28.                 ]  
29.             ]  
30.         }  
31.     ]  
32. }, "grid");  

【示例】

视图定义还提供了一个很有用的属性，能够减少冗余代码：defaultCell。这个属性允许你定义默认的单元格属性，如果单元格定义中没有同名属性，那么DataGrid将自动采用这些属性：

[javascript]  view plain copy

1. grid = new dojox.grid.DataGrid({  
2.     store: store,  
3.     query: { id: "*" },  
4.     structure: [  
5.         {  
6.             noscroll: true,  
7.             defaultCell: { width: "84px" },  
8.             cells: [  
9.                 { name: "First Name", field: "first" },  
10.                 { name: "Last Name", field: "last" }  
11.             ]  
12.         },{  
13.             defaultCell: { width: "60px" },  
14.             cells: [  
15.                 [  
16.                     { name: "Bats", field: "bats", width: "70px", rowSpan: 2 },  
17.                     { name: "Throws", field: "throws", width: "70px", rowSpan: 2 },  
18.                     { name: "G", field: "totalG" },  
19.                     { name: "AB", field: "totalAB" },  
20.                     { name: "R", field: "totalR" },  
21.                     { name: "RBI", field: "totalRBI" },  
22.                     { name: "BB", field: "totalBB" },  
23.                     { name: "K", field: "totalK" }  
24.                 ],[  
25.                     { name: "Games as Batter", field: "totalGAB", colSpan: 2 },  
26.                     { name: "H", field: "totalH" },  
27.                     { name: "2B", field: "total2B" },  
28.                     { name: "3B", field: "total3B" },  
29.                     { name: "HR", field: "totalHR" }  
30.                 ]  
31.             ]  
32.         }  
33.     ]  
34. }, "grid");  

【示例】
可见，通过在defaultCell中设置width属性，我们只需要为不同于这个默认值的列设置width属性即可。

注意：如果单元格定义里和默认设置里都没有指定，那么列的默认宽度是6em。

分页与虚拟滚动

由于历史原因，当一大堆数据需要显示时，开发者会采用一种称为“分页”的技术：任一时刻只有一小部分（大约25-50条记录）数据才会被显示。用户可以使用按钮或其他控件在“页面”之间切换。

但有了滚轮（也有人会说鼠标）之后，分页控件就显得有点笨重了。

DataGrid采用了一种略微不同的技术，称为虚拟滚动：分页浏览时，用户只需要滚动滚轮即可。这种技术被称为“虚拟滚动”是因为虽然看起来有很长的一串记录，但任一时刻却只有很小一部分数据被渲染出来。然而，DataGrid仍然使用了分页技术，当用户滚动时，数据被一页一页地从服务器（或者dojo的store数据源）请求过来。而且，默认情况下最近渲染的三页数据被原封不动地保留着，以防用户回滚到原来的地方。每页数据的行数可以由DataGrid的rowsPerPage属性控制，而需要暂时保留渲染结果的行数则由keepRows属性控制。

注意：要计算DataGrid将保留几页数据，只需要算keepRows除以rowsPerPage就行了。

结论

dojox.grid.DataGrid是一个强大的组件，它既可以渲染庞大的数据集，也能够显示由子行构成的复杂结构。而且它还让用户无需点击任何控件，单凭滚动滚轮即可浏览长列表。在下一篇教程中，我们将研究dojox.grid.DataGrid是如何与dojo的数据源data store整合的。

参考

DataGrid官方文档