利用javascript的dtree组件遍历xml文件生成树状结构菜单

有关dtree组建的用法请参看上一篇文章javascript中树状结构的实现之dtree组件

xml文件格式如下：

实现的主要思路：1，当用户选择某个分类体系时，利用ajax异步读取服务器端的xml文件；
2，以深度优先算法遍历xml文件，同时生成对应的节点，以及添加对应的响应函数等。
主要的代码：

//当用户选择分类体系结构时，ajax获取xml文件
function selectCategory(filePath)
{
if(filePath == 0)
{
$(”#dtree”).html(”);
return;
}
$.ajax({
type:”GET”,
url:filePath+”?”+Math.random(),
dataType:”xml”,
data:”",
success:function(data){
categoryContent = data;
//alert(data);

generateTree();
}
});
}

//生成树状结构
function generateTree()
{

index_id = 0;
//d必须是全局变量

d = new dTree(”d”);
d.add(index_id,-1,”分类体系”);
index_id++;
dfs(d,0,$(categoryContent).find(”tree”));
$(”#dtree”).html(d.toString());
}

//遍历xml文件
function dfs(d,parentId,node)
{
if(node == undefined)return;
$(node).children().each(function(i){
d.add(index_id,parentId,$(this).attr(”text”)+’('+$(this).attr(”id”)+’)',”javascript:choose(’”+$(this).attr(”text”)+’_'+$(this).attr(”id”)+”‘)”);
index_id++;
dfs(d,index_id-1,this);

})
}

注意的问题：在生成节点时一定要注意节点的父节点的保存方式
方法的优点：利用jQuery库代码看起来更直观并且可以生成任意多层次的树状结构

效果如下：

本文地址：http://www.yaronspace.cn/blog/index.php/archives/89