JSPのツリー構造

31585 ワード
jsp
方力勲のjavaWebを見て、左右の値を用いて木型構造(つまり俺門の多段分類)表構造JSP中的一个树型结构を表す
ページコード
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
JSP中的一个树型结构 
<!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 node 2=...が表示されます.またはvar node 3=...このような変数の繰り返し定義は、javascriptに変数の繰り返し定義が現れると、現在の行javascriptコードが前回の変数定義の値を採用する(前回var xxのみである場合、添付値がない場合、現在のコードは前回の定義の値を採用し、これを類推する)ため、上記のコードは正常に動作する.Xtreevar node=new WebFXTreeItem(「xxx」)クラスについてnodeが呼び出された場合.add(node_sub)では、nodeをフォルダに表示し、nodeがファイルに表示されない場合は、上記のコードは正常に動作していますが、複数のvar nodex=...まず定義して、var node 1、node 2...、nodexのような次のコードはnode=...と書くだけです.いいですよ.もちろん、ページにはnode=new xxxxのようなコードがたくさんあります.分類項目が多ければ.方法2:分類データをjavascript配列として存在する、1つのservletCategoryに独立してjs参照方式でページに追加し、jsを用いて配列内容に基づいてtreeを構築して出力.大まかなjsコードは、parentNodeを定義し、最近のparentノードの位置を記録します.現在のノードのレベルがparentNodeのレベル以下である場合、parenNodeの位置から戻ると、現在のノードレベルよりも最近のレベルが小さいノードが見つかります(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
SpringでのQutarzの構成
ES2015の備忘録