Dojo高级Web2.0 UI组件库---Tree组件
Tree組件可以把有層次關系的數據用樹狀結構展現出來，就如同 Windows 系統的資源瀏覽器。Tree有兩個模板，一個是Tree模板，一個是TreeNode模板，應該說Tree模板就是一個容器，里面有很多TreeNode.而初始化樹，打開樹節需要的數據，是通過來提供的。提供了封裝的標準的數據存取API，作為統一的數據訪問層而存在。所有的數據都是item或者item的屬性。提供了一個基本的ItemFileReadStore類來讀取JSON格式數據，而dojox提供了更多擴展，比如XmlStore, CsvStore, OpmlStore等，也可以自定義自己的store類型。
術語
| data source | 數據源 |
| datastore | 表 |
| item | 行記錄 |
| attribute | 列 |
| reference? | 有些類似外鍵依賴，但外鍵指向的父記錄，而reference指向子記錄的列表 |
| identity | 主鍵 |
| query? | 查詢條件，是一個Object類型，形如{ name: '?hite*', aisle: 'Condiments' },”,”表示條件的and關系，通配符”?”,”*”表示一個或多個字符（包含0個） |
| JSON(JavaScript Object Notation) | 是一種輕量級的數據交換格式。它是基于Javascript標準的一個子集，JavaScriptd的數據結構(如字符串、數組、對象)的表示方式恰好與JSON相同,所以JSON可以被Javascript無損的識別。它是一種簡單文本格式，與XML相比，它更加易讀、更少的數據冗余。下面就是一段典型的JSON格式數據，例如： { identifier: 'name', items: [ { name: 'Adobo', aisle: 'Mexican' }, { name: 'Balsamic vinegar', aisle: 'Condiments' }, { name: 'Worcestershire Sauce', aisle: 'Condiments' }] }? |
| ? | ? |
| ? | ? |
| ? | ? |
| ? | ? |
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
{ identifier: 'name', items: [ { name: 'Adobo', aisle: 'Mexican' }, { name: 'Balsamic vinegar', aisle: 'Condiments' }, { name: 'Worcestershire Sauce', aisle: 'Condiments' }] }假設該段數據存放于文件，相應的Dojo datastore的聲明和使用如下：
<!- 指明了datastore的類型是；數據的url,請注意這里除了可以是文件路徑，也可以是一段請求得到的流；以及該datastore的jsId--> <div dojoType="" jsId="pantryStore" url=""></div> <div name="pantry_item" dojoType="" store="pantryStore" searchAttr="name" value="Vinegar" autoComplete="true" ></div> <!--聲明dojoType為的一個組件，該組件在html頁面上展現形式為一個下拉框，需要有數據填充，其中store屬性指向了jsId為pantryStore的一個datastore，由此把剛剛在前面定義的datastore的數據關聯了起來。--> 也可以通過編程的方式讀取datastore數據，例如： /*用編程實現方式定義了一個datastore,在這里是，其實還可以是其它的datastore類型，如XmlStore,CsvStore等，甚至可以是自定義的datastore類型*/ var pantryStore = new ({url: "pantry_" } ); //自定義函數，為fetch函數做準備，用于數據處理。 var gotList = function(items, request){ var itemsList = ""; for (var i = 0; i < ; i++){ // getValue函數，它是由封裝的API，用于得到某個item的某個屬性名稱的值。 itemsList += pantryStore .getValue(items[i], "name") + " "; } alert("All items are: " + itemsList); } //自定義函數，為fetch函數做準備，用于異常處理。 var gotError = function(error, request){ alert("The request to the store failed. " + error); } ({onComplete: gotList, onError: gotError,query:{name:”*”}});/*執行數據查詢的語句，需要傳入一些查詢選項，比如在示例中出現的onComplete:在得到所有符合條件的數據后的處理函數，參數為item的列表；onError:出現異常的處理函數；query: 查詢條件，是一個Object類型，形如{ name: '?hite*', aisle: 'Condiments' },”,”表示條件的and關系，通配符”?”,”*”表示一個或多個字符（包含0個）*/應用Tree組件創建一個樹的實例需要按下步驟進行：
1．創建一個用于存儲樹結構數據的數據源ItemFileReadStore，創建方法如下：
function createTreeStore() {var treeStore = new ( {url :''});return treeStore; }2．使用ForestStoreModel對store進行了包裝，在tree組件多引入了一個Model層，它能夠進行一些特殊處理，如：沒有根結點時，會自動增加一個父結點等。創建方法如下：
var treeStore = createTreeStore();var treeModel = new ( {query : {type :'Province'//從數據源中查詢type :'Province'的數據 },store :treeStore,root :true,//定義根結點rootId :"中國",rootLabel :"中國城市列表",childrenAttrs : [ 'children' ] });3．然后使用ForestStoreModel創建一個TreeModel，該TreeModel可以解析結點的子結點，它是一個遞歸的程序結構。創建方法如下：
function createTreeModel(item, treeStore, typeValue) {var newModel = new ( {query : {type :typeValue},store :treeStore,root :true,rooId :item,rootLabel :item || getLabel(item),childrenAttrs : [ 'children' ]});return newModel; }4．在頁面文件中定義一個Tree，定義方法如下：
<div dojoType= "" id= "tree" jsId= "tree " model= "treeModel" openOnClick= "true">其中openOnClick= "true"表示單擊結點時展開該結點的子結點。
通過上面的分析，下面創建一個動態生成樹的例子，在該例中，數據源是從服務器動態獲得并在前臺顯示。首先創建一個用于生成樹型結構的數據文件，本例中用的是JSON格式的數據源，該數據內容定義的是中國的部分省市名稱，文件內容定義如下：
然后上面內容存為文件名為，并存放在與調用該文件的HTML頁面的同一目錄中，為了能夠顯示中文內容，應把該文件保存為UTF-8格式。
下面就是一個使用Tree的例子，實現代碼如下：
?
轉載于:https://www.cnblogs.com/lancee/archive/2013/02/06/2900231.html
總結
以上是生活随笔為你收集整理的Dojo高级Web2.0 UI组件库---Tree组件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mac中如何从vim文本编辑器退回到命令
- 下一篇： UVA10236 斐波那契素数