静态XTREE的使用

咚咚小可

墨衍会员 · AI 创作全网分发码龄19年

关注

原创最新推荐文章于 2026-05-17 04:52:58 发布 927 阅读 AI 写同款· GEO 优化 ›

xtree xtree的使用还有文档，代码，都很详细哦立即下载

大家都知道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两个文件

再将图片路径一一对应

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">标签内