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" οnclick="addNode()">add a treeNode</button>
<div id=tree></div>
</body>
</html>
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" οnclick="addNode()">add a treeNode</button>
<div id=tree></div>
</body>
</html>