Gridx入門 – Javascript教程_JS教程_技術文章 – 程式設計聯盟

雖然同樣都是基於Dojo store, 但與DataGrid/EnhancedGrid相比,Gridx有一套完全不同的架構。它有以下特點:

Gridx采用瞭一套與UI無關的內核來處理所有的表格數據的邏輯操作。
Gridx采用瞭一套靈活的模塊化系統,它與基於plugin的EnhancedGrid架構不同,這種模塊化架構不僅能提配置各種表格特性的靈活性,並且當一些功能不使用時,能夠減少運行代碼的大小。
Gridx開發瞭一套簡潔直接的API,使得各模塊之間實現真正的松耦合。
本文將簡要介紹如何使用Gridx進行開發。現在Gridx仍處於開發階段,一些API和實現的細節仍有可能調整。但它的基本用法和架構已經穩定。感興趣的童鞋不妨一試。

1. 創建
假設我們有如下HTML頁面:

[html]
<html> 
<head> 
    <title>Gridx Demo</title> 
    <script type="text/javascript" src="dojo/dojo.js" data-dojo-config="async: true"></script> 
</head> 
<body> 
    <!– We'd like to show a grid here –> 
    <p id="gridNode" style="width: 400px; height: 300px;"></p> 
</body> 
</html> 

首先,要引入Gridx的CSS:
[html]
<link rel="stylesheet" href="gridx/resources/claro/Gridx.css" /> 

目前Gridx隻支持Claro主題,如果要在RTL模式下運行,請用如下代碼來引入:
[html]
<link rel="stylesheet" href="gridx/resources/claro/Gridx_rtl.css" /> 
我們必須“請求require” 的JavaScript 模塊是:

一種Store類型,例如:dojo/store/Memory
gridx/Grid
gridx/core/model/cache/Sync (用於客戶端store) or gridx/core/model/cache/Async (用於服務器端 store)
假設我們要創建基於dojo/store/Memory的grid,那麼我們需要如下代碼:

[javascript]
require([ 
    'dojo/store/Memory', 
    'gridx/Grid', 
    'gridx/core/model/cache/Sync' 
], function(Store, Grid, Cache){ 
    var store = new Store({ 
        data: [ 
            {id: 1, title: 'Hey There', artist: 'Bette Midler'}, 
            {id: 2, title: 'Love or Confusion', artist: 'Jimi Hendrix'}, 
            {id: 3, title: 'Sugar Street', artist: 'Andy Narell'} 
        ] 
    }); 
    …… 
}); 

與DataGrid/EnhancedGrid類似,我們需要定義列結構:

[javascript]
var columns = [ 
    {field: 'id', name: 'Identity'}, 
    {field: 'title', name: 'Title'}, 
    {field: 'artist', name: 'Artist'} 
]; 

OK,萬事俱備,現在我們可以創建一個簡單的grid瞭:

[javascript]
var grid = new Grid({ 
    cacheClass: Cache, 
    store: store, 
    structure: columns 
}, 'gridNode'); //Assume we have a node with id 'gridNode' 
grid.startup(); 

Gridx繼承於dijit._WidgetBase, 因此它支持所有widget的基本特性。
以上創建的grid是一個最基本但可用的grid。我們可以靈活的給它加上很多模塊,並且這些模塊獨立工作,它們之間不會相互沖突。下面一節我們將介紹如何實現這一點。

2. 基本API和API對象
Gridx引入瞭如下API對象:rows,columns,和cells,可以通過這些對象來操作API。

例如我們可以用如下代碼來獲得第2行的id:

[javascript]
var id = grid.row(1).id; 
獲得位於第1行第2列格子的數據:

[javascript]
var data = grid.cell(0, 1).data(); 
獲得第3列的name屬性:

[javascript]
var title = grid.column(2).name(); 
以上方法中的grid.row(), grid.cell() 和 grid.column()就是我們所說的API對象。它們隻是一套API的容器,本身是沒有狀態的。因此,我們如果想獲得一個cell對象,可用如下代碼:

[html]
var cell = grid.cell(0, 0); 
var data1 = cell.data(); 
然後我們改變此cell中的data,再調用:

[javascript]
var data2 = cell.data(); 
則data2中就得到更新過的cell data,而不是data1的值。

如果想要獲得列名組成的數組,我們可以使用一個更好的API:

[javascript]
var names = grid.columns().map(function(col){ 
    return col.name(); 
}); 
columns()和rows()方法返回的是API對象數組。這兩個方法同樣接受指定范圍的參數。例如,如果你隻想獲得前3列的列名,就可以寫成:

[javascript]
grid.columns(0, 3); 
如果需要從第2列開始的兩列列名,則可以寫成:
[javascript]
grid.columns(1, 2); 
獲得從第3列開始的後面所有列名:

[javascript]
grid.columns(2); 
返回的數組可以用各種非常有用的數組函數才操作,例如map,filter,forEach,some 以及 every。

我們可以使用API對象來調用模塊提供的更多方法。例如,如果加載瞭sort模塊,我們可以這樣寫:

[javascript]
grid.column(0).sort(); 
下面一些其它常用的API方法:

[javascript]
grid.setColumns(columnStructure);       //Reset the column structure 
   grid.setStore(store);       //Reset store 
   grid.columnCount(); //Faster than grid.columns().length; 
   grid.rowCount();    //Faster than grid.rows().length; 
   grid.resize();  //This is what layout widgets (containers) need. 
模塊提供瞭模塊API,它們在底層整合,因此不必擔心模塊之間會相互影響造成沖突。下一節我們將具體介紹更多關於模塊API的內容。

3. 模塊
幾乎所有的Gridx UI特性都是以模塊的方式實現,包括表頭,表格體(所有行), 滾動條(橫向和縱向滾動條)等。不過這些是核心模塊,缺省狀態下是自動加載的。非核心模塊與EnhancedGrid的插件“plugin”類似,可以根據需要選擇要加載的模塊。

理論上說,一個Gridx模塊可以隻是一個dojo類,並可以放在任何地方。但通常情況下,Gridx模塊繼承自gridx/core/_Module 並且放在gridx/modules目錄下。如果要在一個grid實例中添加一個模塊,首先我們需要“請求”該模塊的源代碼,然後在創建grid的時候聲明之。

[javascript]
require([ 
    'dojo/store/Memory', 
    'gridx/Grid', 
    'gridx/core/model/cache/Sync', 
    'gridx/modules/SingleSort', //Require module source code 
    'gridx/modules/ColumnResizer'   //Require module source code 
], function(Store, Grid, Cache, Sort, ColumnResizer){ 
    …… 
    var grid = new Grid({ 
        cacheClass: Cache, 
        store: store, 
        structure: columns, 
        modules: [ 
            Sort,       //Declare modules in a grid instance 
            ColumnResizer   //Declare modules in a grid instance 
        ] 
    }); 
}); 
為一個grid實例聲明模塊隻需要將所有模塊類放在一個數組中。這種聲明方法比之EnhancedGrid的plugin更加簡單明瞭。因為相對於隱式使用的類,例如string類,被“請求”的模塊類(Sort和ColumnResizer) 是顯式地使用的。但是當我們想要傳遞一些初始參數,則需寫成:

[javascript]
modules: [ 
       { 
           moduleClass: ColumnResizer, 
           detectWidth: 10 
       }, 
       …… 
   ] 
如果你感覺這種寫法不夠酷,那麼還有另外一種寫法,將其聲明成grid的參數

[javascript]
var grid = new Grid({ 
       …… 
       modules: [ 
           ColumnResizer 
       ], 
       columnResizerDetectWidth: 10 
   }); 
如果一個模塊參數聲明成grid的參數,它必須以模塊名開頭,這樣不同模塊的參數才不會相互沖突。

Gridx模塊被設計成可替換的。這意味著如果你不喜歡某一個模塊,你完全可以實現你自己的模塊,同時不需要太擔心它是否會對grid的其他部分或者該模塊之前的實現產生不可預料的影響。你隻需要遵循該模塊所有的API,這樣你的實現就能很好的與其他模塊無縫合作。這裡的“API集合”是用模塊名來標識的。是的,跟聲明grid參數一樣將模塊名作為前綴。例如,模塊 gridx/modules/select/Row/ 名為“selectRow”, 這意味著它實現瞭所有“selectRow”的API。現有另一模塊 gridx/modules/extendedSelect/Row, 它也名為“selectRow”, 這意味著該模塊實現瞭同樣的API集合。因此當另外一個模塊依賴於行選擇的特性,它隻需要依賴於這個API集合,而不是某一個特定的實現。

有時候,模塊也可能依賴於其他模塊。例如,UI模塊“paginationBar” 依賴於一個非UI模塊“pagination”。 因此當聲明PaginationBar模塊時,我們也需要請求Paginatioin模塊。但我們不需要在創建grid時聲明Pagination模塊,隻是“請求”這個關聯模塊的源代碼即可。如果沒有請求這個關聯模塊,我們就會在控制臺中得到如下出錯信息,並且該grid很可能不會正確的顯示。

[javascript]
Error: Forced/Required Dependent Module 'pagination' is NOT Found for 'paginationBar' 
這看起來似乎有點不方便。因為在EnhancedGrid中,所有關聯的插件都是自動加載的。但為瞭提高靈活性,這種做法是不可避免的。因為在EnhancedGrid中,如果一個插件已經自動被其他插件請求瞭,我們就無法輕松的替換這個插件的實現。另一個好處是,這種做法可以減少一些不可見的源代碼加載,從而提高效率。

幾乎所有的模塊都可以通過grid對象來直接訪問。例如:

[javascript]
grid.select.row.selectById(rowId); 
    grid.select.column.selectById(colId); 
    grid.sort.sort(colId); 
    grid.columnResizer.setWidth(colId, 100); 
在這種方式下,每個模塊都有自己的命名空間,因此他們不會相互沖突。

一個模塊可以選擇暴露哪些API給grid,已經暴露哪些API給API對象(row/column/cell)。請註意模塊名隻是暴露給grid的API的標識,這樣就可以減少依賴性,並且提高代碼的可維護性。

以下是目前支持的非核心模塊列表。更多精彩細節我們會在將來的博文中介紹。
[javascript]
1. CellWidget 
2. ColumnLock 
3. ColumnResizer 
4. Dod 
5. Edit 
6. Focus 
7. IndirectSelect 
8. Menu 
9. NestedSort 
10. Persist 
11. Printer 
12. RowHeader 
13. RowLock 
14. SingleSort 
15. SummaryBar 
16. TitleBar 
17. Toolbar 
18. Tree 
19. VirtualVScroller 
20. Filter 
21. FilterBar 
22. Pagination 
23. PaginationBar 
24. move.Row 
25. move.Column 
25. dnd.Row 
26. dnd.Column 
26. select.Row 
27. select.Column 
28. select.Cell 
29. extendedSelect.Row 
30. extendedSelect.Column 
31. extendedSelect.Cell 
32. exporter.CSV 
33. exporter.Table 

摘自 Dojo中文博客

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *