翻译 - 【dgrid】Hello dgrid!
原文：Hello dgrid!
dgrid项目由SitePen的工程师所创建，想要创建下一代的栅格组件，可以充分利用现代浏览的优势和在Dojo 1.7中的新功能。它被设计得轻量，模块化，已扩展，且在与Dojo工具集同样的许可下发布的。
获取dgrid
为了开始学习dgrid，你需要先下载它。你可以去dgrid的GitHub仓库下载，然后遵从README中的说明，也可以是用 cpm install dgrid 来自动从Dojo包仓库中获取。
dgrid是第一个独立发布的新Dojo包，而不是作为DojoX命名空间的一部分来发布。这种发布模式是转向Dojo2中发布组件开发的一部分，像GitHub一样改善发布代码服务。
开始
为了使用dgrid，我们需要下载Dojo1.7或更高版本与dgrid的Grid模块：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Tutorial: Hello dgrid!</title> 6 <script scr="path/to/dojo.js" data-dojo-config="async:true"></script> 7 <script> 8 require(["dgrid/Grid", "dojo/domReady!"], function(Grid) { 9 var grid = new Grid({/* optinos here */}, "grid"); 10 // ... 11 }); 12 </script> 13 </head> 14 <body> 15 <div id="grid"></div> 16 </body> 17 </html>
有了这份代码，为了创建真正有用的grid，我们需要定义两个东西：grid的结构，和我们想要使用的数据。grid的结构应该使用columns选项来定义，有三种定义方法：
1 作为一个带有field和label属性的对象的数组：
1 var colmuns = [ 2 { 3 field: "first", 4 label: "First Name" 5 }, 6 { 7 field: "last", 8 label: "Last Name" 9 }, 10 { 11 field: "age", 12 label: "Age" 13 } 14 ];
2 作为一个哈希表，键作为field使用，值是一个带有label属性的对象：
1 var columns = { 2 first: { 3 label: "First Name" 4 }, 5 last: { 6 label: "Last Name" 7 }, 8 age: { 9 label: "Age" 10 } 11 };
3 作为一个哈希表，键当作field使用，值当作label使用：
1 var columns = { 2 first: "First Name", 3 last: "Last Name", 4 age: "Age" 5 };
在本教程接下来的部分，我们将使用第三种简洁的方式。
列字段常常需要一些额外的配置项，不只是label，如CSS类，列的格式等等。这样的话就会使用前两种方式。查看Grid文档的specifying grid部分了解更多配置信息。
我们的grid的列结构已经定义了，现在我们需要一些用来是展示的数据。很多高级的grid如onDemandGrid是支持直接使用存储的，比较基础的Grid提供了用于渲染数组数据的renderArray方法。
1 require(["dgrid/Grid", "dojo/domReady!"], function(Grid) { 2 var data = [ 3 { first: "Bob", last: "Barker", age: 89 }, 4 { first: "Vanna", last: "White", age: 55 }, 5 { first: "Pat", last: "Sajak", age: 65 } 6 ]; 7 8 var grid = new Grid({ 9 columns: { 10 first: "First Name", 11 last: "Last Name", 12 age: "Age" 13 } 14 }, "grid"); 15 16 grid.renderArray(data); 17 });
我们现在有另一个正常工作的展示javascript数组数据的grid。额外的数据可以通过renderArray方法追加上去；要清除数据，调用refresh方法即可。
我们使用的是基础的Grid模块，在调用renderArray之前是空的。一些如OnDemandGrid这样更高级的基于存储的实现，可以自动的载入存储中的数据。
通过混入，插件和扩展来增加功能
到目前为止，我们创建的grid赤裸裸的啥也干不了。dgrid被设计的很特别，以至于你只“支付”你想要使用的功能，如键盘导航，行或者单元格选择，单元格编辑和列缩放，当你要使用它们的时候要明确的请求它们。
（上面这段原话有点绕，我的理解是，dgrid被设计的比较松散，每个功能点都是单独的，默认情况下是不包含那些如键盘导航，单元格编辑等功能，当需要使用这些功能的时候，需要明确的把这些模块载入进来并使用他们，具体怎么用，且往下看！）
为此，使用dojo/_base/declare声明一个栅格类，并混入所有想要的扩展功能：
1 require([ 2 "dojo/_base/declare", 3 "dgrid/Grid", 4 "dgrid/Keyboard", 5 "dgrid/Selection", 6 "dojo/domReady!" 7 ], function(declare, Grid, Keyboard, Selection) { 8 9 var CustomGrid = declare([Grid, Keyboard, Selection]), 10 11 grid = new CustomGrid({ 12 columns: { 13 first: "First Name", 14 last: "Last Name", 15 age: "Age" 16 }, 17 selectionMode: "single", 18 cellNavigation: false 19 }, "grid"), 20 21 data = [ 22 {first: "Bob", last: "Barker", age: 89}, 23 {first: "Vanna", last: "White", age: 55}, 24 {first: "Pat", last: "Sajak", age: 65} 25 ]; 26 27 grid.renderArray(data); 28 29 });
混入了Selection和Keyboard之后，我们有了一个带有键盘导航与行选择功能的grid。然而，当用户与之交互的时候我们没有做任何的处理。可以通过添加事件监听来控制这些。
处理事件
dgrid使用在Dojo 1.7中引入的dojo/on模块来处理事件。grid的事件监听可以通过简单的调用grid.on来实现，由grid的顶层DOM节点接收事件监听。结合事件委派，这中机制可以很容易的给grid中的任何组件添加事件监听，如单元格与行。
除了DOM标准事件，一些grid组件触发他们自己的事件。例如，Selection的混入触发dgrid-select和dgrid-deselect事件。利用这些，我们可以知道用户在与grid交互的时候发生了什么：
1 grid.on("dgrid-select", function(event) { 2 console.log("Row Selected: ", event.rows[0].data); 3 }); 4 5 grid.on("dgrid-deselect", function(event) { 6 console.log("Row de-selected: ", event.rows[0].data); 7 });
使用事件委派，我们可以很容易的监听grid中很多元素的原生DOM事件。
1 grid.on(".dgrid-row:click", function(event) { 2 var row = grid.row(event); 3 console.log("Row clicked: ", row.id); 4 });
为了使用事件委派，你必须确保你载入了dojo/query。把这个模块做成可选的可以帮助保持文件大小减少，当你不想或需要任何事件委派的时候。
现在做什么？
到目前为止，本教程只是瞥了一眼dgrid所提供的功能。在以后的教程中将会深入讨论它所提供的额外的组件，如OnDemandList，可以将你的grid与store相连接。于此同时，查看下dgrid的文档，把你遇到的问题提交到邮件列表中或irc.freenode.net的#dojo频道上，让我们知道你在运行中遇到的问题。
dgrid文档
