TREE!!

[b]此树使用脚本语言JS，dojo组件,DOM API，WebFx 的树控件XTree.
使用DOJO组件从XML文件中读取所有数据，并且DOM API配合XTREE 对内存中的数据操作，一次性生成树。[/b]
[b]流程:
代码片断:[/b]
1. 使用dojo组件从xml文件读取数据.

[code] loadTreeMenu:function() {
var treeMenuLoader = this;
var menu = 'me';
var par = window.location.search;
if (par.length != 0)
menu = par.substring(7, (par.length - 1));
var url = "tree.xml";
var bindArgs = {
url: url,
mimetype: "text/xml",
method: "post",
content: {'menu': menu},
load: function(type, data, evt){
treeMenuLoader.treeMenuData = data.selectSingleNode('/MenuConfig/Menu[@id="' + menu + '"]');
treeMenuLoader.rendTree.call(treeMenuLoader);
}
};
dojo.io.bind(bindArgs);
},
[/code]


2. 编写rendTree和addItem 两个方法对返回的数据操作, 结合使用WebFx 的树控件XTree生成树.
代码片断:
[code]rendTree: function() {
var treeMenuLoader = this;
var treeMenuData = treeMenuLoader.treeMenuData;
var webFXTreeConfig = {
usePersistence:true
};
var tree = new WebFXTree('root', treeMenuData.getAttribute("title"), '', '', treeMenuData.getAttribute("image"), treeMenuData.getAttribute("image"));
var childNodesData = treeMenuData.selectNodes('Item');
dojo.lang.forEach(childNodesData, function(childNodeData) {
treeMenuLoader.addItem(tree, childNodeData);
});
dojo.byId('menuTree').innerHTML = tree;
},
addItem:function(tree, node) {
var treeMenuLoader = this;
var sText = node.getAttribute('title');
var id = node.getAttribute('id');
var sAction = node.getAttribute('page');
var sTarget = node.getAttribute('target');
if(sTarget == null)
sTarget = 'mainFrame';
var sTip = node.getAttribute('toolTip');
var sIcon = node.getAttribute('image');
var item = new WebFXTreeItem(id, sText, sAction, sTarget, sTip, null, sIcon, sIcon);
var nodes = node.selectNodes('Item');
dojo.lang.forEach(nodes, function(node) {
treeMenuLoader.addItem(item, node);
});
tree.add(item);
}
[/code]
大家可以下载附件,说明和例子全都有....希望大家发表评论.我好吸取经验..