體驗dojo強大的grid控件——簡單示例剖析

Dojo 從 v1.0 開始引入了一個功能強大，快速，健壯的控件--Grid。

Grid 在dojo的體系結構中屬於Dojox 這個包中。

這個Grid 比較靈活，可以排序，過濾，編輯，多表頭，支持多種Cell 控件。

官方文檔的地址：http://dojotoolkit.org/book/dojo-book-0-9/docx-documentation-under-development/grid

通過官方的示例文檔，我進行了一次精彩的體驗，在這裏和大家分享一下我的體驗心得。

 要完成一個Grid，需要下面幾個步驟，每個步驟都是必不可少的。

1. 首先是導入樣式表

沒有樣式表，就無法顯示漂亮的列表出來，你看到的將是醜陋的靜態文本。

css 代碼

< style type="text/css">
@import "http://localhost/dojo/dojox/grid/_grid/tundraGrid.css";
@import "http://localhost/dojo/dijit/themes/tundra/tundra.css";
@import http://localhost/dojo/dojo/resources/dojo.css
< / style>

 

2. 模型（Model）

Model指的是什麼意思呢？<o:p></o:p>

大家應該都熟悉MVC模式，MVC模式是"Model-View-Controller"的縮寫，中文翻譯爲"模型-視圖-控制器"。MVC應用程序總是由這三個部分組成。<o:p></o:p>

視圖(View)代表用戶交互界面<o:p></o:p>

Model就是業務流程/狀態的處理以及業務規則的制定，在grid 裏面也就是其所包含的數據。<o:p></o:p>

<o:p> </o:p>

每個grid 都會包含數據，所以每個grid 開頭就是 Model 的定義。<o:p></o:p>

Model 的定義一般包含兩個div 標籤。

 代碼

<div dojoType="dojo.data.ItemFileReadStore"
                jsId="jsonStore" url="gridData.txt">
div>
<div dojoType="dojox.grid.data.DojoData" jsId="model"
    rowsPerPage="20" store="jsonStore" query="{ namespace: '*' }">
div>

第一個Div定義數據。<o:p></o:p>

第二個Div 定義Grid 的數據適配器，將數據裝換爲Gird 的Model。

3. 視圖（View）

View 用來定義每個數據列，一個view是多個數據列的組合。通過定義view，使Grid按照要求來顯示數據。下面是一個簡單的view定義。

xml 代碼

// a grid view is a group of columns
var view1 = {
        cells: [[
                {name: 'Namespace', field: "namespace"},
                {name: 'Class', width: "25em", field: "className"}
          ],
          [
                {name: 'Summary', colSpan:"2", field: "summary"}
          ]
        ]
};

 

4. Structure

Structure 是view的集合，也就是說可以將多個view組合成一個view。

Structure 會被Grid用到，而view不會被Grid直接用到，而是被包裝成一個Structure來使用。

下面使一個Structure的例子：

js 代碼

var layout = [ view1 ];

5. Grid 控件（Widget）

Widget 就是Grid控件，通過定義Grid控件，我們就能將Grid放置到我們的頁面上面了。通過Grid 將上面定義的Structure 和model組裝起來，從而按照我們定義的樣子（Structure），載入我們需要的數據（model），顯示出一個Gird列表。<o:p></o:p>

 

xml 代碼

<div id="grid" dojoType="dojox.Grid" model="model" structure="layout">div>

 

以上使開發一個Gird必要的五個步驟，已經介紹完了，下面總結一下他們的關係。

可以看到上面幾個部分的依賴關係：

附件中包含了一個完整的例子。

附件中包含了Grid的運行的樣子，非常的Cool。