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

最近两个月在某国有银行的软件中心实习, 开发使用的是公司自有的框架, 不过主体还是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有关的功能即可