要使用一个javascript的树菜单，找了个现成的Tigra Tree Menu，看了下效果，还不错，就打算使用。 http://www.softcomplex.com/products/tigra_tree_menu/
我的需求是根据从服务器取的数据动态地构建树结构，Tigra Tree Menu内部实现是用document.write把树状结构内容写到页面，动态地添加<script/>标签，document.write会重新打开一个输出流，直接写到页面中，把原来的文档都删掉了。
结论：Tigra Tree Menu适合在页面加载前就知道树状结构的内容，然后按照它的documentation直接使用即可，对于动态的数据生成菜单，不可直接使用。
一直忘了（也可能是偷懒心理）补充这篇文章，现在补充一下，要实现树结构动态加载数据，稍微修改一下tree.js的源代码就行了。
1. 备份原始的tree.js，复制一份命名为mytree.js，在mytree上修改（备份的原因是担心出错）
2. 修改tree的toggle函数，原始函数为：this.toggle = function (n_id) {
var o_item = this.a_index[n_id]; o_item.open(o_item.b_opened) };
修改为：
this.toggle = function(n_id) {
var o_item = this.a_index[n_id];
` //下面函数的参数o_item.a_config[0]是用户数据，获取的sub_items应该是一个数组 var sub_items = get_sub_items(o_item.a_config[0]); //loadOffice(); o_item.a_config.splice(2,1);//delete one element on position [2] if (sub_items.length > 0) { o_item.a_config = o_item.a_config.concat(sub_items); //o_item.a_config.push("加载中..."); for (var i = 0; i < o_item.a_config.length; i++) {
//这里是构造子树
new tree_item(o_item, i);
}
o_item.open(o_item.b_opened);
} else {
Utils.alert_msg(false, "没有信息可以显示");
}
};
说明：以上为笔者在真实环境中的应用，具体的内容可以按实际情况修改。
3. function tree的最后一段：
for (var i = 0; i < this.a_children.length; i++) {
document.write(this.a_children[i].init());
this.a_children[i].open();
}
直接用document.write写在html页面上，一般来说，这段也需要修改（看具体需要要把动态内容渲染到哪儿）。我的环境中修改为：
for (var i = 0; i < this.a_children.length; i++) {
//document.write(this.a_children[i].init());
this.tree_view += this.a_children[i].init();
dom_ele.innerHTML = this.tree_view;
this.a_children[i].open();
}
上面函数第二行的dom_ele是笔者修改了function tree (a_items, a_template, dom_ele) 函数的声明，具体可以根据情况修改
4. 一般来说，在点击树的某个节点时，用户可能需要触发自己想要的事件，这个可以在item_select函数中修改。