dgrid/OnDemandGrid

簡介

「表格和清單」一向是最複雜及最難處理的元件，而在實務應用系統中又無可避免。 SitePen 公司除了開發了 dstore 之外，還有一系列稱之為 dgrid 的表格、清單元件，供使用 dojo 的程式開發人員使用，完全免費，也算是功德無量。

dgrid/OnDemandGrid 是 Grid 系列中最常使用到的一個，它所具備的功能也足以應付一般系統的應用，所以用它來做範例。但要能將 Grid 用到精熟，到官方網站去好好爬爬文章，學習一下，是有絕對必要的。

範例

範例中用了 dstore/Memory 做為表格的資料來源，dstore 中尚有其它不同的 store 可以做為資料來源。

CSS

<head>


</head>

Grid 有它自已的樣式表，得把它納入到網頁中。

<style>

</style>

<style>
html {
    width:100%;
    height:100%;
}
body {
    width:1000px;
    margin: 0 auto;
    padding-top:20px;
}
/* scroller bar */
.dgrid .dgrid-scroller {
    position: relative;
    overflow: visible;
}
/* set up grid size */
#myGrid {
    width:500px;
    height:auto;
}
#myGrid .dgrid-cell {
    padding:2px 2px;
    vertical-align: middle;
    font-family:"courier";
}
/* define header styles */
#myGrid .dgrid-header .field-firstName {
    text-align:center;
}
#myGrid .dgrid-header .field-lastName {
    text-align:center;
}
#myGrid .dgrid-header .field-games {
    text-align:center;
}
/* define field styles */
#myGrid .dgrid-column-action{
    width:50px;
}
#myGrid .field-id {
    width: 40px;
    text-align:center;
}
#myGrid .field-firstName {
    width:150px;
}
#myGrid .field-lastName {
    width: 150px;
}
#myGrid .field-games {
    width: auto;    /* take the rest available space */
    text-align:right;
}
/* define row styles */
.dgrid-row-even.ui-state-default { 
    background-color: #FFFFFF; 
} 
.dgrid-row-odd.ui-state-default { 
    background-color: #90EE90; 
}
</style>

要定義一個外觀整齊漂亮的表格，樣式表會很複雜，這裡是一些常用到的例子。把 Grid 的 id (#myGrid) 加在前面是因為這樣不會影響到其它的表格，前面沒有加 id 的樣式，會影響到系統中所有的表格。

第 27~35 行定義欄位抬頭的樣式，將所有抬頭的文字置中。

第 37 行用的是 .dgrid-column-action 來定義樣式，因為這個欄位沒有抬頭，欄位中放置了一個刪除的圖像，所以在定義該欄位時，特別定義了一個 id 的屬性，這時該欄位會產生一個名為 dgrid-column-id 的 class，其中 id 即為欄位中 id 鍵的值。

定義各欄的屬性時，欄位的 class 名稱用 "field-name" ，其中 "name" 即為程式中定義 header 時，各欄位的 "field" 的值來取代。

第 55~60 行定義奇數列和偶數列的樣式，讓奇數列和偶數列用不同的背景顏色來顯示。

HTML

<body class="claro">
    
</body>

因為是用程式法建立表格，所以只要在 HTML 裡放個掛載點即可。

Script

這裡把所資料來源及表格抬頭都另用一個變數來儲存，這樣看起來比較清楚。在實務時，在修改表格內容時，也同時要修改 store 的內容，這樣會比較好處理。

第 34~66 行定義資料做為資料來源。

第 68~99 行定義表格的抬頭，第欄因為要置放一個「刪除」的圖像按鈕，所以最為複雜。
id 定義欄位的辨識碼，在樣式表裡使用，因為該欄位並未對應資料中的某一欄位。
renderCell 的值是一個函式，用來定義所要放入欄位的內容，這裡放的是一個圖像按鈕的 dijit。
第 71 行傳入的戈戈竹數：
object 是該列所顯示的項目物件。
value 是當該欄位有對應到資料欄位時，該欄位的值，這裡沒有對應到資料欄位，所以傳入值也是該列的項目物件。
node 是該欄位的 HTML 節點。
options 這個傳入值還真不知道是做什麼用的。
第 72~80 行定義一個圖像按鈕的 dijit，並將它置入欄位中。
第 76~77 行，在修改完 store 中的資料後，要呼叫 grid 的 refresh() 函式，這樣畫面中的表格才會反映資料來源的改變。也就是說，每當 store 的內容改變之後，都要呼叫 grid 的 refresh() 函式，改變才能在畫面上顯示。

第 100 行建立一個表格 (OnDemandGrid)，因為要在畫面上做分頁，所以要納入 Pagination 這個延伸套件。
collection 定義資料來源。
columns 定義表頭格式。
rowsPerPage 定義每一頁的列數。
minRowsPerPage 定義每次提出需求時，要下載的最小筆數，預設為 25 筆。
pageSizeOptions 定義每一頁列數的選項。

最後，別忘了呼叫 starup() 函式。

熊伯的外接硬碟

2015年10月7日星期三