看方力勋的javaWeb,采用左右值来表示树型结构（就是俺门的多级分类）
表结构

页面代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>树状结构</title>

    <script src="${pageContext.request.contextPath }/js/xtree.js"></script>

    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/css/xtree.css">

  </head>

  <body>

      <script type="text/javascript">

          <c:forEach var="c" items="${list}">

              <c:if test="${c.depth==1}">

               var tree = new WebFXTree('${c.name}');

               tree.target="right";

               tree.action = "${pageContext.request.contextPath}/servlet/AddChildServlet?id=${c.id}";

              </c:if>

              <c:if test="${c.depth==2}">

                  var node${c.depth} = new WebFXTreeItem('${c.name}');

                  node${c.depth}.target="right";

                  node${c.depth}.action = "${pageContext.request.contextPath}/servlet/AddChildServlet?id=${c.id}";

                  tree.add(node${c.depth});

              </c:if>

              <c:if test="${c.depth>2}">

                      var node${c.depth} = new WebFXTreeItem('${c.name}');

                      node${c.depth}.target="right";

                      node${c.depth}.action = "${pageContext.request.contextPath}/servlet/AddChildServlet?id=${c.id}";

                      node${c.depth-1}.add(node${c.depth});

              </c:if>

          </c:forEach>

          document.write(tree);

      </script>

  </body>

</html>

呈现后html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>树状结构</title>

    <script src="/AAPlan/js/xtree.js"></script>

    <link type="text/css" rel="stylesheet" href="/AAPlan/css/xtree.css">

  </head>

  <body>

      <script type="text/javascript">

               var tree = new WebFXTree('商品');

               tree.target="right";

               tree.action = "/AAPlan/servlet/AddChildServlet?id=1";

                  var node2 = new WebFXTreeItem('平板电视');

                  node2.target="right";

                  node2.action = "/AAPlan/servlet/AddChildServlet?id=2";

                  tree.add(node2);

                      var node3 = new WebFXTreeItem('长虹');

                      node3.target="right";

                      node3.action = "/AAPlan/servlet/AddChildServlet?id=5";

                       node2.add(node3);

                      var node3 = new WebFXTreeItem('索尼');

                      node3.target="right";

                      node3.action = "/AAPlan/servlet/AddChildServlet?id=6";

                       node2.add(node3);

                  var node2 = new WebFXTreeItem('冰箱');

                  node2.target="right";

                  node2.action = "/AAPlan/servlet/AddChildServlet?id=3";

                  tree.add(node2);

                      var node3 = new WebFXTreeItem('西门子');

                      node3.target="right";

                      node3.action = "/AAPlan/servlet/AddChildServlet?id=7";

                       node2.add(node3);

                  var node2 = new WebFXTreeItem('笔记本');

                  node2.target="right";

                  node2.action = "/AAPlan/servlet/AddChildServlet?id=4";

                  tree.add(node2);

                      var node3 = new WebFXTreeItem('thinkpad');

                      node3.target="right";

                      node3.action = "/AAPlan/servlet/AddChildServlet?id=8";

                       node2.add(node3);

                      var node3 = new WebFXTreeItem('dell');

                      node3.target="right";

                      node3.action = "/AAPlan/servlet/AddChildServlet?id=9";

                       node2.add(node3);

          document.write(tree);

      </script>

  </body>

</html>

说明:
1.根据上面的数据列表可以知道，某个node节点的父节点是最近一个depth比当前节点小一的节点,通过node${c.depth-1}.add(node${c.depth})可以将当前节点添加到最近一次定义的上层节点下（也就是父节点）。

2.可以看到呈现 ，有多个var  node2=... 或 var node3=... 这样的变量重复定义，由于javascript中出现变量重复定义时，当前行javascript代码会采用最近一次变量定义的值(如果最近一次只var xx; 没有附值，那么当前代码会采用次最近一次定义的值，以此类推)，所以上面代码能正常运行.

关于Xtree
var node=new WebFXTreeItem("xxx") 类，如果有调用node.add( node_sub),那么改node显示成文件夹，如果没有那么该node显示成文件

一点改进意见:
虽然上面的代码运行正常但是多个var nodex=...总让人有点意见
方法一:
        上来先来一句定义,var node1,node2...,nodex 这样下面的代码只要写node=....就好了
        当然这样页面上会有大量的node=new xxxx 样子的代码，如果   分类条目很多的话。
方法二:
         将分类数据存在成一个javascript数组,并且独立到一个servletCategory中，采用js引用方式加到页面中
         然后使用js根据数组内容构建tree并输出.
         大致的js代码是，定义一个parentNode,记录最近一次的parent节点位置，如果当前节点的level小于或等于parentNode的level，
         就从parenNode的位置往回找到最近一个level小于当前节点level的节点(Xtree的节点有parentNode属性可以获取到父节点,
          另外level 属性可以直接在节点上扩展 var tree=new WebFXTree("xxx") ; tree.level=3 )。
         另外需要定义prevNode记录最近一个节点，当当前curLevel-ParentLevel>=2 时(进入隔代级别时)，将prevNode附值给parentNode

参考:
http://www.cnblogs.com/wdfrog/archive/2008/09/26/1299549.html

JSP中的一个树型结构的更多相关文章

  1. 设计一个树型目录结构的文件系统，其根目录为 root，各分支可以是目录，也可以是文件，最后的叶子都是文件。

    设计一个树型目录结构的文件系统,其根目录为 root,各分支可以是目录,也可以是文件,最后的叶子都是文件. 我实现的功能是提供父目录(兄弟目录),输入文件名,创建树型目录结构,文本文件不可以再有子目录 ...

  2. java树型结构的数据展现设计

    在做一个需求管理的页面时,需求的展现是不限层级树型结构,需求下还可以分拆任务,页面要展现的字段有20多个,而且需求采用通用表单设计,db采用大宽表存储,有一百多个字段.目前数据量不大,第一版采用普通的 ...

  3. dzzoffice的树型结构用户管理设计

    在DzzOffice1.1的开发中,针对用户使用群体重新设计了,机构.部门.用户管理应用. 传统OA,企业相关程序,一般是设置机构-设置部门-设置职位-添加用户这样的步骤.每个步骤分为不同的管理界面. ...

  4. 20-Ubuntu-文件和目录命令-查看目录树型结构-tree

    tree 以树状图列出当前目录下的文件目录结构 选项 含义 -d 只显示当前目录的子目录树型结构   显示当前目录的子目录和文件树型结构 例: 1.查看文档目录下的子目录和文件树型结构 2.查看文档目 ...

  5. Delphi实现树型结构

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  6. SQL Server 通过“with as”方法查询树型结构

    一.with as 公用表表达式 类似VIEW,但是不并没有创建对象,WITH  AS 公用表表达式不创建对象,只能被后随的SELECT语句,其作用: 1. 实现递归查询(树形结构) 2. 可以在一个 ...

  7. Delphi实现树型结构具体实例

    unit Unit1;interfaceuses  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, ...

  8. java实现树型结构样式

    import javax.swing.*; import javax.swing.event.*; import javax.swing.tree.*; public class Root exten ...

  9. web api+递归树型结构

    using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Ne ...

随机推荐

  1. 设计模式(Python)-观察者模式

    本系列文章是希望将软件项目中最常见的设计模式用通俗易懂的语言来讲解清楚,并通过Python来实现,每个设计模式都是围绕如下三个问题: 为什么?即为什么要使用这个设计模式,在使用这个模式之前存在什么样的 ...

  2. 用ASP.Net(C#)连接Oracle数据库的方法及实例

    今天看了一下asp.net连接oracle数据库的方法,得到了如下代码.这段代码打开了MyTable表,并把操作员的名字列出.字段类型是OracleString.读取的时候用的是字段编号,我不知道怎么 ...

  3. UOJ 348 【WC2018】州区划分——子集卷积

    题目:http://uoj.ac/problem/348 参考:https://www.cnblogs.com/NaVi-Awson/p/9242645.html#%E5%AD%90%E9%9B%86 ...

  4. emacs之切换h/cpp配置

    emacsConfig/switch-file-setting.el (defun switch-c () (global-set-key (kbd "<C-return>&qu ...

  5. 用PHP收发邮件

    注:在WinForm下怎么试都不好使,最后没办法换成了PHP下,一试就好使了. 这里用到了phpmailer组件,网上有下. 转:phpnow支持ssl的方法 原文出处:http://blog.163 ...

  6. python笔记--2018-2019

    一:读取json文件的方法 import json json.loads(open('./users.dev.json', 'r').read())     #获取文件的类容,并且序列化把看似列表的字 ...

  7. Python调用R语言

    网络上经常看到有人问数据分析是学习Python好还是R语言好,还有一些争论Python好还是R好的文章.每次看到这样的文章我都会想到李舰和肖凯的<数据科学中的R语言>,书中一直强调,工具不 ...

  8. POJ 2395 Out of Hay（求最小生成树的最长边+kruskal）

    Out of Hay Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 18472   Accepted: 7318 Descr ...

  9. app遍历——appCrawler的使用

    1.appCrawler环境配置 1.1 apkinfo获取安装包的报名和mainActivity https://github.com/codeskyblue/apkinfo/releases 使用 ...

  10. 20181123_SQL Server 2008_找出以逗号分隔的字符串中最大的数字

    --select [dbo].[Fun_GetMaxNum]('棉 20%,麻 190%,涤纶60%') CREATE FUNCTION [dbo].[Fun_GetMaxNum] ( @StrAll ...