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格式的資料來源，該資料內容定義的是中國的部分省市名稱，檔案內容定義如下：

{ 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>