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格式的數據源，該數據內容定義的是中國的部分省市名稱，文件內容定義如下：

{ identifier: 'name',label: 'name',items: [{ name:'陜西省', type:'Province',children:[{_reference:'西安'}, {_reference:'延安'}] },{ name:'西安', type:'city' },{ name:'延安', type:'city',children:[{_reference:'子長縣'}, {_reference:'吳起縣'}] },{ name:'子長縣', type:'county' },{ name:'吳起縣', type:'county' },{ name:'北京市', type:'Province', populiation:'921萬',children:{_reference:'海定區'}},{ name:'海定區', type:'city',www:' ', populiation:'92萬'},{ name:'江蘇省', type:'Province',children:[{_reference:'蘇州市'}, {_reference:'南京市'}] },{ name:'蘇州市', type:'city', populiation:'108 萬', 面積:'1,972 sq km',children:[{_reference:'昆山'}, {_reference:'張家港'}] },{ name:'昆山', type:'county' },{ name:'張家港', type:'county' },{ name:'南京市', type:'city' } ]}

然后上面內容存為文件名為，并存放在與調用該文件的HTML頁面的同一目錄中，為了能夠顯示中文內容，應把該文件保存為UTF-8格式。
下面就是一個使用Tree的例子，實現代碼如下：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>TREE</title><style type="text/css"> @import "dojoapp/dojo/resources/"; @import "dojoapp/dijit/themes/tundra/"; </style><script type="text/javascript"djConfig="parseOnLoad: true, isDebug: true"src="dojoapp/dojo/"></script><script>("");(""); ("");( function() {("tree", null, function(message) {("選擇的結點:" + );("選擇的結點:" + );("cc"). attr('href',);//打開樹結點的網頁連接("cc").refresh();//在此可以調用XHR修改后臺JSON數據，這樣可以增加或修改樹的結點 });});function createTreeStore() {var treeStore = new ( {url :''});return treeStore;}var treeStore = createTreeStore();var treeModel = new ( {query : {type :'Province'},store :treeStore,root :true,rootId :"中國",rootLabel :"中國城市列表",childrenAttrs : [ 'children' ]});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;} </script></head><body class="tundra"><div dojoType="" id="tree" jsId="tree " model="treeModel"openOnClick="true"></div><div dojoType="" region="bottom" id="cc"style="background-color: #ACBFD0; height: 200px;" splitter="true"></div></body> </html>

?

轉載于:https://www.cnblogs.com/lancee/archive/2013/02/06/2900231.html

總結

以上是生活随笔為你收集整理的Dojo高级Web2.0 UI组件库---Tree组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。