Dojo学习12 dijit.Tree 动态添加节点之一

时间 2019-11-17

标签 dojo 学习 dijit.tree dijit tree 动态添加节点之一栏目 Dojo 繁體版

原文原文链接

12. dijit.Tree 动态添加节点之一dijit.Tree我感受是一个通用的开发接口，若是您想灵活的使用它，您必须编写程序。好比最简单的点击一个节点，而后打开一个网页，这都须要写程序。Tree有两个模板，一个是Tree模板，一个是TreeNode模板，应该说Tree模板就是一个容器，里面有不少TreeNode.而初始化树，打开树节须要的数据，是经过dojo.data.store来提供的。要想灵活掌握Tree必须先学习dojo.data.下面是今天研究出来的一个例子，可以动态添加一个节点，不过只能在根节点下添加一个节点，功能仍是比较单一的。=================================<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>test tree , dynamic add treenode</title><style type="text/css"> @import "../js/dojo/resources/dojo.css"; @import "../js/dijit/themes/tundra/tundra.css";</style> <script type="text/javascript" djConfig="parseOnLoad: true, isDebug: true" src="../js/dojo/dojo.js"></script><script type="text/javascript"> dojo.require("dijit.form.Button"); dojo.require("dijit.Tree"); dojo.require("dojo.data.JsonItemStore");function init(){ var treeData={identifier: 'name', label: 'name', items: [ { name:'China', type:'one',children:[{reference:'beijing'}] }, { name:'beijing', type:'city'}, { name:'USA' , type:'one'}, { name:'UK' , type:'one'} ] }; var store1=new dojo.data.JsonItemStore({data:treeData}); var _tree=new dijit.Tree({ widgetId:"tree", store:store1, query:{type:'one'}, labelAttr:"name", typeAttr:"type"},dojo.byId("tree"));}dojo.addOnLoad(init);function addNode(){ //add one treeNode var _tree=dijit.byId("tree"); var tdata={label:"FR",tree:_tree,item:{name:"FR",type:"one"}}; var child=new dijit._TreeNode(tdata); _tree.addChild(child,1); child._updateLayout(); child.setChildren({}); child._setExpando();// console.debug();}</script></head><body class="tundra"><button id="b1" dojoType="dijit.form.Button" onclick="addNode()">add a treeNode</button><div id=tree></div></body></html>