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...}