1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > javascript树形菜单(一):Tigra Tree Menu 实现动态数据加载

javascript树形菜单(一):Tigra Tree Menu 实现动态数据加载

时间:2023-09-19 06:25:28

相关推荐

javascript树形菜单(一):Tigra Tree Menu 实现动态数据加载

要使用一个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函数中修改。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。