大家都知道xtree分为静态和动态两种,静态是一次性将数据全部取出后循环显示,而动态则是在你每一次点击节点后循环出当前节点的所有子节点。当然如果节点总数小于1000的话,我相信静态树还是比较快的。
今天就着重说一下静态树的使用方法,对于初学者来说,相信会有一定的帮助。
1、xtree文件夹中的xtree.js和xtree.css两个文件是实现静态树的关键所在,我们会调用JS文件内的方法将所需节点加到树中。
2、建立表,我用的是mysql,大家可根据所需要使用不同的数据,在这里就不在多说了。表中有三个字段nodeid(节点的编号,也是主键,自动增长)、nodename(节点的名字)、upnodeid(此节点是否有上一级节点,如果没有择默认此列为0,如果有则添加上一级节点的id),代码:
CREATE TABLE columntree (
c_nodeid int(5) NOT NULL auto_increment,
c_nodename varchar(50) NOT NULL,
c_upnodeid int(5) NOT NULL default '0',
PRIMARY KEY (`c_nodeid`)
) ENGINE=InnoDB DEFAULT CHARSET=gbk;
3、建立名为treebean.java的JavaBean我就不说了。大伙都会
4、建里名称为tree.jsp的JSP文件。
先导入xtree.js和xtree.css两个文件
<link rel="stylesheet" type="text/css" href="xtree.css"></link>
<script language="javascript" src="xtree.js"></script>
再将图片路径一一对应
<script language="javascript">
webFXTreeConfig.rootIcon = '../../XTREE/images/foldericon.png';
webFXTreeConfig.openRootIcon = '../../XTREE/images/openfoldericon.png';
webFXTreeConfig.folderIcon = '../../XTREE/images/foldericon.png';
webFXTreeConfig.openFolderIcon = '../../XTREE/images/openfoldericon.png';
webFXTreeConfig.fileIcon='../../XTREE/images/file.png';
webFXTreeConfig.iIcon = '../../XTREE/images/I.png';
webFXTreeConfig.lIcon = '../../XTREE/images/L.png';
webFXTreeConfig.lMinusIcon = '../../XTREE/images/Lminus.png';
webFXTreeConfig.lPlusIcon = '../../XTREE/images/Lplus.png';
webFXTreeConfig.tIcon = '../../XTREE/images/T.png';
webFXTreeConfig.tMinusIcon = '../../XTREE/images/Tminus.png';
webFXTreeConfig.tPlusIcon = '../../XTREE/images/Tplus.png';
webFXTreeConfig.blankIcon = '../../XTREE/images/blank.png';
</script>
5、将从数据库中读出的数据,封装至List
while (rest.next()) {
TreeBean treebean = new TreeBean ();
treebean .setC_nodeid(rest.getInt(1));
treebean .setC_nodename(rest.getString(2));
treebean .setC_upnodeid(rest.getInt(3));
list.add(treebean );
}
6、建立名为Tree.java的文件,用来生成JavaScript代码
JSstr = "var tree = new WebFXTree('栏目管理');";
//取出所有节点,生成JS代码,但不生成树
for(int i=0;i<list.size();i++){
treebean = (TreeBean )list.get(i);
nodeid = treebean .getC_nodeid();
nodename = treebean .getC_nodename();
upnodeid = treebean .getC_upnodeid();
//生成JS
JSstr+="var t"+nodeid+" = new WebFXTreeItem(/""+nodename+"/");";
}
//判断节点的父子关系,生成树
for(int i = 0;i<list.size();i++){
treebean = (TreeBean )list.get(i);
nodeid = treebean .getC_nodeid();
upnodeid = treebean .getC_upnodeid();
if(upnodeid == 0){
JSstr+="tree.add(t"+nodeid+");";
}else{
JSstr+="t"+upnodeid+".add(t"+nodeid+");";
}
}
JSstr+="document.write(tree);";
注:此类将返回String,也就是我们生成好的JavaScript代码。
7、再看我们的tree.jsp,在图片路径之后调用我们的Tree.java
将返回的字符串(也就生成好的JS代码)打印到页面上
<%
ColumnTreeInformaction ctreei = new ColumnTreeInformaction();
String s = ctreei.treeBuildJS();
out.println(s);
%>
注:此段代码要写在<script language="javascript">标签内