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>