TableTree4J的全结点展开, 显示居中以及Array.prototype

最新推荐文章于 2022-03-03 00:22:04 发布

cinneptio

最新推荐文章于 2022-03-03 00:22:04 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： TableTree4J

本文链接：https://blog.youkuaiyun.com/cinneptio/article/details/39560193

TableTree4J 专栏收录该内容

1 篇文章

订阅专栏

本文分享了使用TableTree4J实现菜单树功能的经验，包括如何实现全结点展开、解决菜单树显示居中问题及避免Core4j.js中Array.prototype的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近两个月在某国有银行的软件中心实习, 开发使用的是公司自有的框架, 不过主体还是Spring+iBATIS.

项目中有一个全景图展示的功能, 需要按菜单树的形式展示, 本来想做瀑布式的, 但是没有找到现成的例子, 所以只能做成横着的.

(有知道怎么做瀑布式的小伙伴请一定评论此博客告诉我哦!)

网上搜索到很多种做菜单树的开源JS项目, 在其中我挑选了TableTree4J来实现.

不过我是一个JS菜鸟, 没有系统的学习过, 也许只是一些很简单的问题, 但我确实也花了很多时间研究demo和它的API.

下载在http://sourceforge.net/projects/tabletree4j/

本文记录3个做此功能时遇到的难点:

1.全结点展开

首先有一个jsonData

jsonData= function(){
jsoninitNodes=[请在这里写入对应格式的JSON];
}

这时你应该配置他, 并build了, 在build完之后执行下面的

var nodes = new jsonData().jsoninitNodes;
var tmpNode=null;
for(var i=0, n=nodes.length;i<n;i++){
	tmpNode=nodes[i];
	panoramaGirdTree.toggleNodeById(nodes[i].id);
}

其中, nodes获得全部的结点
toggleNodeById按着id来一个个触发点击效果, 即展开
请不要使用API中通过cookies传递展开的方法, 目录条目多时, cookie不够写

2.菜单树显示居中

这也是一个头疼的问题, 因为render的那个div中, 菜单树总是靠左对齐的...

首先我的div是这样的:

<div id="panorama" class="content"
	style="float:left; width:auto;"
></div>

然后tabletree4j.css需要改成这样

.tabletree4j-menu {
    border: none;
    border-collapse: collapse;
	width:auto;
}

原来的width:100% 要改成auto, 这个是每个条目的宽度, 只有设成auto的时候, 这个div才会保持最小宽度, 这样后面才能获取他和父div的宽度差

接着你需要按上面的方法展开全部节点以确定宽度

最后, 使用JS, 通过计算来设置这个div的左右margin即可(获取本身宽度, 获取父div宽度,相减除二)

3.Core4j.js中Array.prototype的影响

这个prototype修改后, 会影响到所有使用数组的地方

注释掉这部分对prototype的修改, 同时阉割掉TableTree4j中和select有关的功能即可