JSP中的一个树型结构

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

页面代码

<%@ 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>

View Code

呈现后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>

View Code

说明:
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中的一个树型结构

相关文章