翻譯 - 【dgrid】Hello dgrid!

時間 2019-11-10

標籤翻譯 dgrid hello 简体版

原文原文鏈接

原文：Hello dgrid!javascript

dgrid項目由SitePen的工程師所建立，想要建立下一代的柵格組件，能夠充分利用現代瀏覽的優點和在Dojo 1.7中的新功能。它被設計得輕量，模塊化，已擴展，且在與Dojo工具集一樣的許可下發布的。html

獲取dgrid

爲了開始學習dgrid，你須要先下載它。你能夠去dgrid的GitHub倉庫下載，而後聽從README中的說明，也能夠是用 cpm install dgrid 來自動從Dojo包倉庫中獲取。java

dgrid是第一個獨立發佈的新Dojo包，而不是做爲DojoX命名空間的一部分來發布。這種發佈模式是轉向Dojo2中發佈組件開發的一部分，像GitHub同樣改善發佈代碼服務。node

開始

爲了使用dgrid，咱們須要下載Dojo1.7或更高版本與dgrid的Grid模塊：git

 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選項來定義，有三種定義方法：github

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屬性的對象：dom

 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使用：async

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頻道上，讓咱們知道你在運行中遇到的問題。

資源

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。