dijit.Tree中widget和DOM node之間的切換

之前在裝扮裝扮dijit.Tree這篇文章中介紹瞭如何利用dijit.Tree提供的功能改變樹的外表。這兒繼續dijit.Tree的話題，說說dijit.Tree中widget和DOM node之間的切換。

dijit.Tree是dojo提供的一個對象，用以描述樹形UI。相應地，它有與之對應的DOM結構，用以在網頁上將樹呈現出來。在很多時候，我們需要以一知二，或者已知widget對象，得到對應的DOM node；或者已知DOM node，推斷其widget對象。

和上文一樣，先提供一個dijit.Tree的例子，一棵食物樹。

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import "../js/dijit/themes/tundra/tundra.css";
</style>
<style>
	html,body {
		width: 100%;
		height: 100%;
		margin: 0;
	}
	
	body{
		margin:0;
		font-family: Arial, Helvetica, sans-serif;
		font-size:0.8em;
	}
</style>

</head>
<body class="tundra">
<div style="width: 100%; height: 100%"
	data-dojo-type="dijit.layout.BorderContainer"
	data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true">
	<div data-dojo-type="dojox.layout.ContentPane" data-dojo-props="region:'left',splitter:true" 
		style="width:180px;">
		<div id="tree_1"></div>
	</div>
</div>

	<script>
		dojoConfig = {
			isDebug : false,
			parseOnLoad : true,
			async : true
		};
	</script>
	<script type="text/javascript" src="../js/dojo/dojo.js"></script>
	<script>
		require(["dijit/layout/BorderContainer",
		         "dojox/layout/ContentPane" ]);
	</script>
	<script>
		require(
				[ "dojo/ready", 
				  "dijit/registry",
				  "dojo/_base/array", 
				  "dojo/on",
				  "dojo/dom",
				  "dojo/query",
				  "dojo/data/ItemFileWriteStore", 
				  "dojo/store/Observable",
				  "dijit/tree/ForestStoreModel", 
				  "dijit/Tree"
				  ],
				function(ready, registry, array, on, dom, query, 
						ItemFileWriteStore, Observable, ForestStoreModel,
						Tree) {
					ready(function() {
						var data_1 = {
								identifier: 'id',
								label: 'name',
								items: [
									{ 
										id: '0', 
										name:'Foods', 
										type: 'root',
										children:[ 
										           {_reference: '1'},  
										           {_reference: '2'},  
										           {_reference: '3'}
										] 
									},
									{ 
										id: '1', 
										name:'Fruits', 
										type: 'class', 
										children:[ 
										           {_reference: '5'},
										           {_reference: '6'}
										] 
									},
									{ 
										id: '5', 
										name:'Orange',
										type:"instance"
									},
									{ 
										id: '6', 
										name:'Apple',
										type:"instance"
									},
									{ 
										id: '2', 
										name:'Vegetables', 
										type: 'class'
									},
									{ 
										id: '3', 
										name:'Cereals', 
										type: 'class', 
										children:[ 
										           {_reference: '4'}
										] 
									},
									{ 
										id: '4', 
										name:'Rice cereal',
										type:"instance"
									}
								]
						};
						
						var store_1 = new ItemFileWriteStore({
							data : data_1
						});
						
						store_1 = new Observable(store_1);
						
						var model_1 = new ForestStoreModel({
							store : store_1,
							query : {
								type : 'root'
							}
						});
						
						var tree = new Tree({
							id : "tree_1",
							model : model_1,
							showRoot : false,
							persist : true
						}, "tree_1");
					});
				});
	</script>
</body>

1. 獲得tree的對象實例

>>>var tree = dijit.byId("tree_1");
undefined
>>>tree
[Widgetdijit.Tree, tree_1] { _attachPoints=[1], _attachEvents=[1], _connects=[4],more...}

2. 根據tree的對象實例獲得對應的DOM node

>>> tree.domNode
<div id="tree_1"class="dijitTree dijitTreeContainer dojoDndContainer"data-dojo-attach-event="onkeypress:_onKeyPress"role="presentation" widgetid="tree_1"aria-expanded="true" aria-multiselect="true">

3. 反過來，根據DOM node獲得對應的tree對象實例

>>>dijit.getEnclosingWidget(tree.domNode)
[Widget dijit.Tree, tree_1] {_attachPoints=[1], _attachEvents=[1], _connects=[4], more...}

接下來看看如何操作tree的內部結構

4. 根據tree得到根節點所在的DOM node

>>>dijit.findWidgets(tree.domNode)
[[Widget dijit._TreeNode,dijit__TreeNode_0] { _attachPoints=[7], _attachEvents=[5], _connects=[20],more...}]
可以看到這兒取到了隱藏的根節點。（上面創建tree的時候設置了”showRoot : false”，因此在界面上看不到這個根節點。）
>>>dijit.findWidgets(tree.domNode)[0].domNode
<div id="dijit__TreeNode_0"class="dijitTreeIsRoot dijitTreeNode dijitTreeNodeLOADED dijitLOADED"role="presentation" style="background-position: 0px 0px;"widgetid="dijit__TreeNode_0">
得到了根節點所在的DOMnode。

5. 同理，這樣可以得到tree上任意的節點以及相應的DOM node

>>> var rootNode =dijit.findWidgets(tree.domNode)[0].domNode；
>>> dijit.findWidgets(rootNode)[0]
[Widget dijit._TreeNode, dijit__TreeNode_1]{ _attachPoints=[7], _attachEvents=[5], _connects=[20], more...}
>>>dijit.findWidgets(rootNode)[0].item.name
["Foods"]
這兒取到了tree的”Foods”節點。
>>>dijit.findWidgets(rootNode)[0].domNode
<div id="dijit__TreeNode_1"class="dijitTreeNode dijitTreeNodeUNCHECKED dijitUNCHECKEDdijitTreeIsRoot" role="presentation" style="background-position:0px 0px;" widgetid="dijit__TreeNode_1">
”Foods”節點對應的DOM node。

6. tree的點擊事件

如果我們爲tree添加一個click事件。則可以同時拿到對應的item和widget

on(tree,"click", function(item, widget){
      console.log(item);
      console.log(widget);
});

Console:

Object { id=[1], name=[1], type=[1],more...}
[Widget dijit._TreeNode, dijit__TreeNode_3]{ _attachPoints=[7], _attachEvents=[5], _connects=[20], more...}