dijit.Tree中widget和DOM node之间的切换

最新推荐文章于 2021-08-03 10:56:32 发布

慢游

最新推荐文章于 2021-08-03 10:56:32 发布

阅读量2.4k

点赞数

分类专栏： Dojo

本文链接：https://blog.csdn.net/eengel/article/details/38399431

版权

Dojo 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

本文探讨了在dijit.Tree中如何进行widget对象和DOM节点之间的切换。通过示例展示了如何从tree实例获取DOM节点，反之亦然。还介绍了如何获取树的根节点DOM节点、任意节点及其DOM节点，并讨论了树的点击事件处理。

摘要由CSDN通过智能技术生成

之前在装扮装扮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...}

慢游

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dijit.Tree中widget和DOM node之间的切换

之前在装扮装扮dijit.Tree这篇文章中介绍了如何利用dijit.Tree提供的功能改变树的外表。这儿继续dijit.Tree的话题，说说dijit.Tree中widget和DOM node之间的切换。dijit.Tree是dojo提供的一个对象，用以描述树形UI。相应地，它有与之对应的DOM结构，用以在网页上将树呈现出来。在很多时候，我们需要以一知二，或者已知widget对象，得到对应的
复制链接

扫一扫

专栏目录