构造树形显示(TreeView)的简单方法

0 views
Skip to first unread message

大师傅

unread,
Sep 4, 2007, 4:18:32 AM9/4/07
to rails4scm
我们可以使用js脚本库 xtree20.js来方便地构建树型显示。 其中有两个基本的JS对象 WebFXTree 和
WebFXTreeItem 分别代表树根 和 树节点。 通过动态生成JS代码可以很方便地显示树。

比如,我们在任何HTML中增加如下代码,就可以显示一个简单的树。

<head>
<script src="../../include/xtree20.js"></script>
<LINK href="../../css/xtree20.css" rel=stylesheet type=text/css>
</head>
<body leftmargin="6" topmargin="6" >
......
<div>
<script language=javascript>
var tree1 = new
WebFXTree('testTree','what_action.jsp','what_target');
tree1.setBehavior('classic');

var tree2= new WebFXTreeItem('2','javascript:showPage(2,1)');
tree1.add(tree2);

var tree4= new WebFXTreeItem('4','javascript:showPage(4,2)');
tree2.add(tree4);

var tree3= new WebFXTreeItem('3','javascript:showPage(3,1)');
tree1.add(tree3);

document.write(tree1);
</script>
</div>
......
</body>

这里有三个问题:

1)数据和目标URL是死的。 这可以通过JSP或者RAILS等技术从数据库读取,不是问题。

2)当点下一个节点的时候,这个程序只能触发一个URL,而不是回调本页的一个事件。所以在本项目的功能实现部分不用xtree20.js而是仿照
其原理重写fsTreeView组件。 xtree20.js只是在主框架中用于打开framset中的功能网页。

3)当节点数量(对应于数据库记录,不可控)很多时,xtree20.js 把所有的节点都构建出来了,只是
style='display:none' 而已,因此速度必然受影响。所以,我们实现中也不能完全仿造xtree20.js。当一个节点当前没有展开
时,其子节点并不构建出来,因此速度将大幅提高。

Reply all
Reply to author
Forward
0 new messages