treesinglepage_customimages.jsp

来自「部门结构树」· JSP 代码 · 共 198 行

<%@ page import="com.jenkov.prizetags.tree.impl.TreeNode,
                 com.jenkov.prizetags.tree.impl.Tree,
                 com.jenkov.prizetags.tree.itf.*" %>
<%@ page import="com.jenkov.prizetags.tree.impl.TreeSorter"%>
<%@ taglib uri="/WEB-INF/treetag.tld" prefix="tree" %>
<%@ taglib uri="/WEB-INF/requesttags.tld" prefix="request" %>
<%
    if(session.getAttribute("example") == null){

        //creating a simple tree model instance
        ITree       tree          = new Tree();
        tree.setSingleSelectionMode(true);

        //adding server side event listeners to the tree model instance
        //use these to build the tree dynamically.
        tree.addExpandListener(new IExpandListener(){
           public void nodeExpanded(ITreeNode node, ITree tree){
               System.out.println("node " + node.getName() + " was expanded");
           }
        });

        tree.addCollapseListener(new ICollapseListener(){
           public void nodeCollapsed(ITreeNode node, ITree tree){
               System.out.println("node " + node.getName() + " was collapsed");
           }
        });

        //adding tree nodes in a tree structure to the tree model instance.
        ITreeNode   movies        = new TreeNode("moviesId"     , "Movies"       , "movies");
        ITreeNode   thrillers     = new TreeNode("thrillersId"  , "Thrillers"    , "thrillers");
        ITreeNode   thrillersNew  = new TreeNode("newThrillId"  , "New Thrillers", "newThrill");
        ITreeNode   thrillersOld  = new TreeNode("oldThrillId"  , "Old Thrillers", "oldThrill");
        ITreeNode   fantasy       = new TreeNode("fantasyId"    , "Fantasy"      , "fantasy");
        ITreeNode   comedy        = new TreeNode("comedyId"     , "Comedies"     , "comedies");
        ITreeNode   cartoons      = new TreeNode("cartoonsId"   , "Cartoons"     , "cartoons");
        ITreeNode   comedySub     = new TreeNode("comedySubId"    , "Comedy Sub"   , "comedies");
        ITreeNode   comedySubSub  = new TreeNode("comedySubSubId" , "Comedy Sub Sub","comedies");

        ITreeNode   basicInstinct = new TreeNode("basicInstinctId"  , "Basic Instinct"   , "thriller");
        ITreeNode   theFirm       = new TreeNode("theFirmId"        , "The Firm"         , "thriller");
        ITreeNode   lordOfTheRings= new TreeNode("lordOfTheRingsId" , "Lord of The Rings", "fantasy");
        ITreeNode   dumbNDumber   = new TreeNode("dumbNDumberId"    , "Dumb'n Dumber"    , "comedy");
        ITreeNode   lionKing      = new TreeNode("lionKingId"       , "Lion King"        , "cartoon");
        ITreeNode   snowWhite     = new TreeNode("snowWhiteId"      , "Snow White"       , "cartoon");

        basicInstinct.setCollapsedImageUrl("../images/nonFolder.gif");
        theFirm.setCollapsedImageUrl("../images/nonFolder.gif");
        lordOfTheRings.setCollapsedImageUrl("../images/nonFolder.gif");
        dumbNDumber.setCollapsedImageUrl("../images/nonFolder.gif");
        lionKing.setCollapsedImageUrl("../images/icons/grey/edit.png");
        snowWhite.setCollapsedImageUrl("../images/nonFolder.gif");


        movies.addChild(thrillers);
        movies.addChild(fantasy);
        movies.addChild(comedy);
        movies.addChild(cartoons);
        movies.setCollapsedImageUrl("../images/closedFolder.gif");
        movies.setExpandedImageUrl("../images/openFolder.gif");

        thrillers.addChild(thrillersNew);
        thrillers.addChild(thrillersOld);
        thrillers.setCollapsedImageUrl("../images/closedFolder.gif");
        thrillers.setExpandedImageUrl("../images/openFolder.gif");

        thrillersNew.addChild(theFirm);
        thrillersNew.setCollapsedImageUrl("../images/closedFolder.gif");
        thrillersNew.setExpandedImageUrl("../images/openFolder.gif");

        thrillersOld.addChild(basicInstinct);
        thrillersOld.setCollapsedImageUrl("../images/closedFolder.gif");
        thrillersOld.setExpandedImageUrl("../images/openFolder.gif");

        fantasy  .addChild(lordOfTheRings);
        fantasy.setCollapsedImageUrl("../images/closedFolder.gif");
        fantasy.setExpandedImageUrl("../images/openFolder.gif");

        cartoons .addChild(snowWhite);
        cartoons .addChild(lionKing);
        cartoons.setCollapsedImageUrl("../images/closedFolder.gif");
        cartoons.setExpandedImageUrl("../images/openFolder.gif");


        //comedy   .addChild(dumbNDumber);
        comedy   .addChild(comedySub);
        comedy.setCollapsedImageUrl("../images/closedFolder.gif");
        comedy.setExpandedImageUrl("../images/openFolder.gif");

        comedySub.addChild(comedySubSub);
        comedySub.setCollapsedImageUrl("../images/closedFolder.gif");
        comedySub.setExpandedImageUrl("../images/openFolder.gif");

        comedySubSub.addChild(dumbNDumber);
        comedySubSub.setCollapsedImageUrl("../images/closedFolder.gif");
        comedySubSub.setExpandedImageUrl("../images/openFolder.gif");


        TreeSorter.sortRecursiveByName(movies);
        tree.setRoot(movies);
        tree.expand(movies.getId());
        tree.expand(cartoons.getId());

        tree.select(fantasy.getId());


        //storing the tree model instance in the session.
        //this is where the tags get the tree model from later.
        session.setAttribute("example", tree);
//        request.setAttribute("example", tree);
    }

%>
<html>
<head>
    <title>Tree Tag - Custom Images for each Tree Node - (C) 2004 Jenkov Development</title>
    <link rel="stylesheet" href="/prizetagsdemo/stylesheet.css" type="text/css">
</head>


<body>
<h2>Custom Images for each Tree Node</h2>

This page demonstrates how to customize the images of each individual node.
<br/><br/>

Normally images are associated with nodes based on type, or whether they
have children. This is done using the standard tree:nodeMatch tags.

<br/><br/>
If you need to customize the image of each node (in both expanded and collapsed state),
you call the ITreeNode.setExpandedImageUrl(String) and ITreeNode.setCollapsedImageUrl(String)
methods. Note: for nodes that cannot be expanded, only the setCollapsedImageUrl(String)
method call is necessary.

<br/><br/>
To display the image url of a node use the tree:nodeImageUrl tag. This tag will automatically
choose either the expanded or collapsed image url depending on the state of the node.


<br/><br/>

While all nodes in this example have custom image urls set, only the Lion King
node has a different image than the other nodes.

<br/><br/>


<table cellspacing="0" cellpadding="5" style="border: 1 solid black;">

<tr><td>

        <%-- Generating the Tree HTML --%>
        <table cellspacing="0" cellpadding="0" border="0">
        <tree:tree tree="example" node="example.node" includeRootNode="false">
            <tr><td
            ><table cellspacing="0" cellpadding="0" border="0">
            <tr><td><tree:nodeIndent    node="example.node" indentationType="type"><tree:nodeIndentVerticalLine indentationType="type" ><img src="../images/verticalLine.gif"></tree:nodeIndentVerticalLine><tree:nodeIndentBlankSpace   indentationType="type" ><img src="../images/blankSpace.gif"></tree:nodeIndentBlankSpace></tree:nodeIndent></td>
            <tree:nodeMatch    node="example.node" expanded="false" hasChildren="true"  isLastChild="false"><td><a href="<request:requestUri/>?expand=<tree:nodeId node="example.node"/>"><img src="../images/collapsedMidNode.gif" border="0"></a><img src="<tree:nodeImageUrl node="example.node"/>"></td></tree:nodeMatch>
            <tree:nodeMatch    node="example.node" expanded="true"  hasChildren="true"  isLastChild="false"><td><a href="<request:requestUri/>?collapse=<tree:nodeId node="example.node"/>"><img src="../images/expandedMidNode.gif"  border="0"></a><img src="<tree:nodeImageUrl node="example.node"/>"></td></tree:nodeMatch>
            <tree:nodeMatch    node="example.node" expanded="false" hasChildren="true"  isLastChild="true" ><td><a href="<request:requestUri/>?expand=<tree:nodeId node="example.node"/>"><img src="../images/collapsedLastNode.gif"  border="0"></a><img src="<tree:nodeImageUrl node="example.node"/>"></td></tree:nodeMatch>
            <tree:nodeMatch    node="example.node" expanded="true"  hasChildren="true"  isLastChild="true" ><td><a href="<request:requestUri/>?collapse=<tree:nodeId node="example.node"/>"><img src="../images/expandedLastNode.gif" border="0"></a><img src="<tree:nodeImageUrl node="example.node"/>"></td></tree:nodeMatch>
            <tree:nodeMatch    node="example.node" expanded="false" hasChildren="false" isLastChild="false"><td><img src="../images/noChildrenMidNode.gif"><img src="<tree:nodeImageUrl node="example.node"/>"></td></tree:nodeMatch>
            <tree:nodeMatch    node="example.node" expanded="false" hasChildren="false" isLastChild="true" ><td><img src="../images/noChildrenLastNode.gif"><img src="<tree:nodeImageUrl node="example.node"/>"></td></tree:nodeMatch>

            <td valign="top">
            <tree:nodeMatch node="example.node" selected="true"><span style="Font-Size: 12px;"><b><tree:nodeName      node="example.node"/></b></span></tree:nodeMatch>
            <tree:nodeMatch node="example.node" selected="false"><a href="<request:requestUri/>?select=<tree:nodeId node="example.node"/>"><span style="Font-Size: 12px;"><tree:nodeName      node="example.node"/></span></a></tree:nodeMatch>

            </td>
            </tr>
            </table></td></tr>
        </tree:tree>
        </table>
    </td>
    <td valign="top" style="border-left: 1 solid black;">
        Selected Node Detail:<br/><br/>

        <%
            ITree tree = (ITree) session.getAttribute("example");
            ITreeNode node = new TreeNode(); //empty node, displayed when the tree isn't initialized yet.
            if(tree != null && request.getParameter("select") != null){
                node = tree.findNode(request.getParameter("select"));
            }
        %>
        <table cellspacing="0" cellpadding="5">
            <tr><td>Id  </td><td><%=node.getId()%></td></tr>
            <tr><td>Name</td><td><%=node.getName()%></td></tr>
            <tr><td>Type</td><td><%=node.getType()%></td></tr>
        </table>


    </td>
</tr>
</table>

</body>

</html>