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

13. dijit.Tree 动态添加节点之一
对dijit.Tree研究了很久,源代码也看了好多遍了。对于fx这个类的研究还需要更深入一步。动态添加树的节点已经完成了。
与大家分享一下:
===========================================
<!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">
/*
 author : amushen
 date:20070716
 email:[email protected]
*/
 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();
 _tree.getChildren()[2]._updateLayout();
 child.setChildren({});
 child._setExpando();
// console.debug();
}
function addSecondNode(){
 // add a treenode for FR
 var _tree=dijit.byId("tree");
 var fr=_tree.getChildren()[1];
 var tdata=[{label:"Paris",item:{type:"city",name:"Paris"}}];
 fr.setChildren(tdata);
 fr.getChildren()[0].setChildren({});
 fr.isFolder=true;
 fr.isExpanded=false;
 fr._updateLayout();
 fr._setExpando();
}
function addThirdNode(){
 var _tree=dijit.byId("tree");
 var fr=_tree.getChildren()[1];
 var tdata={label:"pp",tree:_tree,item:{name:"pp",type:"city"}};
 var child=new dijit._TreeNode(tdata);  
 child.setChildren({});
 fr.addChild(child);
 child._updateLayout();
 fr.getChildren()[0]._updateLayout();
}
</script>
</head>
<body class="tundra">
<button id="b1" dojoType="dijit.form.Button" onclick="addNode()">add a treeNode</button>
<button id="b2" dojoType="dijit.form.Button" onclick="addSecondNode()">add another treeNode</button>
<button id="b3" dojoType="dijit.form.Button" onclick="addThirdNode()">add third treeNode</button>
<div id=tree></div>
</body>
</html>

你可能感兴趣的:(Dojo学习13 dijit.Tree 动态添加节点之一)