要使用一个javascript的树菜单,找了个现成的Tigra Tree Menu,看了下效果,还不错,就打算使用。 /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函数中修改。