dijit/Tree
簡介
dijit/Tree 是將資料以樹狀結構的方法顯示在畫面上，其資料結構很類似作業系統中的檔案目錄結構。dijit/Tree 在使用時用到的模組還不算少，首先要有一個 dijit/store 中的模組來存放要顯示的資料；其次要有一個 dijit/tree/model 做為介面將存放在 store 中的資料餵給 dijit/Tree 模組； 如果 Store 中資料的改變要能即時反應在 dijit/Tree 中，要用一個 dojo/store/Observable 模組將 dijit/store 模組包起來，這樣當 Store 中的資料改變時， Observable 模組才能通知 Tree 模組在畫面上顯示變更的資料。
此外，在 store 中需實作 getChildren() 函式，傳回指定物件的所有子物件，這個函式在 store 中預設沒有提供。在 model 中則需實作 mayHaveChildren() 函式，這個函式得判斷指定物件是否有子物件存在，然後傳回 true 表示有子物件，傳回 false 表示沒有子物件。這個函式是用來判斷該物件的節點要使用什麼圖像來表示。
範例
在範例中，使用 dojo/store/Memory 將資料存放在記憶體中，再用 dojo/store/Observable 將 dojo/store/Memory 包起來；這樣，每當有資料變更時，才能通知 dijit/Tree 呈現變更後的結果。隨後建立一個 dijit/tree/ObjectStoreModel，這是因為範例中用的是 dojo/store/Memory，所以必須配合使用 dijit/Tree/ObjectStoreModel；如果用的是 dojo/data 中舊的 store 模組，則須搭配使用舊的 model，像是 dijit/tree/TreeStoreModel 或是 dijit/tree/ForestStoreModel。
在網頁下載 3 秒後，會在 "/" 下加入一個名為 "home" 的新物件節點，並會在畫面中顯示出新加入的節點。
CSS
<style>
html {
width: 100%;
height: 100%;
}
body {
margin: 0 auto;
width: 1000px;
height: 100%;
padding-top: 20px;
}
</style>
CSS 中沒有特別的樣式需要設定。
HTML
<body class="claro">
</body>
HTML 中只要設定一個掛載點。
Script
第 24~33 行定義 store 中的資料，每個子物件具有一個 parent 屬性，指出哪個物件為其父物件，這種格式稱為關聯式 (relational)，只有一層的資料結構。如果 Tree 中的資料需要動態改變時，只能使用這種格式。
第 36~42 行建立一個 store，並實作 getChildren() 函式。
第 45 行用一個 dojo/store/Observable 將 store 包覆，讓它能監控資料變更，並通知 dijit/Tree。
第 48~58 行建立 dijit/tree/ObjectStoreModel，並實作 mayHaveChildren() 函式，若有任何物件的 parent 屬性值等於傳入物件的 id 屬性值，即表示該物件為傳入物件的子物件。有子物件時，query 後的結果其 length 會大於 0。
第 61~72 行建立 dijit/Tree，並呼叫 startup() 函式，將其在畫面上呈現。
showRoot:true 設定要顯示根節點，true 為預設值。設定為 false 時，會隱藏根節點。
第 75~77 行設定在下載網頁 3 秒後，在 store 中加入一個 id 為 "home" 的物件，物件加入後，dijit/Tree 會在畫面上顯示新物件的加入。注意這裡是使用 observableStore 而不是 treeStore。
沒有留言:
張貼留言