jquery 树型(Tree)目录(二)

时间：2022-04-16 12:36:40

第二步：写jsp，在此引用两个jquert.js与pony.js  和 两个css（theme.css与admin.css）

              注意：用到的js与和css我在代码的尾部会粘贴出来，请读者自行拷贝，要注意引用路径，哦

现在写自己的jsp，代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://"  + request.getServerName() + ":" + request.getServerPort()
                                      + path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>left</title>

            <link href="<%=basePath%>css/tree/admin.css" rel="stylesheet"   type="text/css" />
            <link href="<%=basePath%>css/tree/theme.css" rel="stylesheet"   type="text/css" />

            <script src="<%=basePath%>javascript/jquery.js"       type="text/javascript"></script>
            <script src="<%=basePath%>javascript/pony.js" type="text/javascript"></script>

            <script type="text/javascript">

                    //此处以下为自己写的js代码
                    $(document).ready( function(){
                             jQuery.ajax({ 
                                         type:"post", 
                                         channel/channel_tree!channeTree'>url:"<%=basePath%>channel/channel_tree!channeTree", //上面刚写完的方法url
                                         dataType:"json", 
                                         global:false, 
                                         success: function(rjson){ 
                                                rootTree(rjson);  //回调函数
                                          } 
                              });  
                     });
                     var root = null;
                     var allChannel = null;
                     function rootTree(rjson){
                             root = rjson.rootTree; //根节点map
                             allChannel = rjson.allChannel; //总的map集合
                             $.each(allChannel,function(key,values){
                                   if(key=="1"){
                                        //一级树代码区
                                       $("#_root").append(values.name+"[<span style='color: red'>"+values.name+"</span>]");
                                   }
                              });
                        $.each(root,function(key,values){
                              if(key=="1"){
                                    var i=0;
                                    $(values).each(function(){
                                           //二级树代码区
                                           var bool = judgment_node(this.channelId);
                                           if(bool){  //有下一级目录
                                                  $("#t-0-0-").append("<div id='t-0-0-"+i+"'>"
                                                             +"<div id='t-0-0-"+i+"-s' onmouseover='Pn.Tree.lineOver(this)' "
                                                                      +"onmouseout='Pn.Tree.lineOut(this)'"
                                                                      +"onclick=Pn.Tree.lineSelected(this,'t') isDisplay='false'>"
                                                             +"<img src='<%=basePath%>images/tree/s.gif' width='15px' />"
                                                             +"<img src='<%=basePath%>images/tree/s.gif' width='15px' />"
                                                             +"<img id='t-0-0-"+i+"-co'"
                                                                       +"src='<%=basePath%>images/tree/elbow-minus.gif'"
                                                                       +"onclick=Pn.Tree.switchDisplay('t-0-0-"+i+"') "
                                                                       +"style='cursor: pointer; display: none;' />"
                                                                       +"<img id='t-0-0-"+i+"-cc'"
                                                                       +"src='<%=basePath%>images/tree/elbow-plus.gif'"
                                                                       +"onclick=Pn.Tree.switchDisplay('t-0-0-"+i+"') "
                                                                       +"style='cursor: pointer;' />"
                                                             +"<img id='t-0-0-"+i+"-fo'"
                                                                        +"src='<%=basePath%>images/tree/folder-open.gif'"
                                                                        +"style='display: none;' />"
                                                             +"<img id='t-0-0-"+i+"-fc' src='<%=basePath%>images/tree/folder.gif' style='' />&nbsp;"
                                                             +"<a href='javascript:void(0)' target='rightFrame'"
                                                                         +"onclick=Pn.Tree.switchDisplay('t-0-0-"+i+"',true)> "
                                                                         +this.name+"[<span style='color: red'>文章</span>]"
                                                              +"</a>"
                                                              +"</div>"
                                                              +"</div>" 
                                                      );
                                                      decTree(this.channelId,"t-0-0-"+i);
                                              }else{ //没有下一级目录
                                                      $("#t-0-0-").append("<div id='t-0-0-"+i+"'>"
                                                               +"<div id='t-0-0-"+i+"-s' onmouseover='Pn.Tree.lineOver(this)' "
                                                                            +"onmouseout='Pn.Tree.lineOut(this)'"
                                                                            +"onclick=Pn.Tree.lineSelected(this,'t') isDisplay='false'>"
                                                                +"<img src='<%=basePath%>images/tree/s.gif' width='15px' />"
                                                                +"<img src='<%=basePath%>images/tree/s.gif' width='15px' />"
                                                                +"<img src='<%=basePath%>images/tree/elbow.gif' /><img src='<%=basePath%>images/tree/leaf.gif' />&nbsp;"
                                                                +"<a href='javacript:void(0)' target='rightFrame'>"
                                                                +this.name+"[<span style='color:red'>文章</span>]</a>"
                                                                +"</div></div>"
                                                         );
                                                  }
                                                  i++;
                                             });
                                       }
                                 });
                           }


                           function  judgment_node(tree_id){  //判断底层节点是否存在
                                     var bool = false;
                                     $.each(root,function(key,values){
                                           if(parseInt(key) == parseInt(tree_id)){
                                                   bool = true;
                                           }
                                      });
                                      return bool;
                             }


                             var imgsum="";
                             imgsum += "<img src='<%=basePath%>images/tree/s.gif' width='15px' />";
                             imgsum += "<img src='<%=basePath%>images/tree/s.gif' width='15px' />";
                             function decTree(code,htmlId){
                                      var cod = code+"";
                                      var i=0; var j=0;
                                      $.each(root,function(key,values){
                                               if(key == cod){
                                               $("#"+htmlId).append(
                                                        "<div id='"+htmlId+"-' style='display: none;'>"
                                                        +"</div>"
                                                );
                                       $(values).each(function(){ 
                                               //三、四级树代码区
                                               var bool = judgment_node(this.channelId);
                                               var treeID = htmlId+"-"+i;

                                               imgsum += "<img src='<%=basePath%>images/tree/elbow-line.gif' /> ";
                                               if(bool){  //有下一级目录
                                                        $("#"+htmlId+"-").append("<div id='"+treeID+"'>"+
                                                                    "<div id='"+treeID+"-s' onmouseover='Pn.Tree.lineOver(this)' "
                                                                                 +"onmouseout='Pn.Tree.lineOut(this)' "
                                                                                 +"onclick=Pn.Tree.lineSelected(this,'t') isDisplay='false'> "
                                                                       +imgsum
                                                                       +"<img id='"+treeID+"-co'"
                                                                                  +"src='<%=basePath%>images/tree/elbow-minus.gif' "
                                                                                  +"onclick=Pn.Tree.switchDisplay('"+htmlId+"-"+i+"') "
                                                                                  +"style='cursor: pointer; display: none;' />"
                                                                        +"<img id='"+treeID+"-cc'"
                                                                                  +"src='<%=basePath%>images/tree/elbow-plus.gif' "
                                                                                  +"onclick=Pn.Tree.switchDisplay('"+htmlId+"-"+i+"') "
                                                                                  +"style='cursor: pointer;' />"
                                                                         +"<img id='"+treeID+"-fo'"
                                                                                  +"src='<%=basePath%>images/tree/folder-open.gif' "
                                                                                  +"style='display: none;' />"
                                                                                  +"<img id='"+treeID+"-fc'"
                                                                                  +"src='<%=basePath%>images/tree/folder.gif' style='' />"
                                                                                  +"&nbsp;"
                                                                          +"<a href='javascript:void(0)' target='rightFrame' "
                                                                                  +"onclick=Pn.Tree.switchDisplay('"+treeID+"',true)>"
                                                                                  +this.name+"[<span style='color: red'>文章</span>]</a>"
                                                                          +"</div></div>"
                                                              );
                                                              decTree(this.channelId,treeID);
                                                     }else{  //无下一级目录
                                                              $("#"+htmlId+"-").append("<div id='"+treeID+"'>"+
                                                                         "<div id='"+treeID+"-s' onmouseover='Pn.Tree.lineOver(this)' "
                                                                                    +"onmouseout='Pn.Tree.lineOut(this)' "
                                                                                    +"onclick=Pn.Tree.lineSelected(this,'t') isDisplay='false'> "
                                                                          +imgsum
                                                                          +"<img src='<%=basePath%>images/tree/elbow-end.gif' />"
                                                                          +"<img src='<%=basePath%>images/tree/leaf.gif' />&nbsp;"
                                                                          +"<a href='javacript:void(0)' target='rightFrame'>"
                                                                                     +this.name+"[<span style='color:red'>文章</span>]</a>"
                                                                          +"<div></div>"
                                                                 );
                                                                 imgsum = "";
                                                                 imgsum += "<img src='<%=basePath%>images/tree/s.gif' width='15px' />";
                                                                 imgsum += "<img src='<%=basePath%>images/tree/s.gif' width='15px' />";
                                                        }
                                                        i++;
                                              });
                                      }
                               });
                       }
  </script>
 </head>


 <body class="lbody">
        <div class="lttop">
                <a href="javascript:location.reload()">刷新目录</a> &nbsp;
                <a href="#" target="rightFrame">模型管理</a>
        </div>
        <hr />
        <div id="t" class="pn-tree">
                <div id="t-0">
                <div id="t-0-s" onmouseover="Pn.Tree.lineOver(this)"   onmouseout="Pn.Tree.lineOut(this)"
                                    onclick="Pn.Tree.lineSelected(this,'t');" isDisplay="true">
                         <img id="t-0-co" src="<%=basePath%>images/tree/elbow-end-minus.gif"
                                    onclick="Pn.Tree.switchDisplay('t-0')" style="cursor: pointer;" />
                         <img id="t-0-cc" src="<%=basePath%>images/tree/elbow-end-plus.gif"
                                    onclick="Pn.Tree.switchDisplay('t-0')" style="cursor: pointer; display: none;" />
                         <img id="t-0-fo" src="<%=basePath%>images/tree/folder-open.gif" style="" />
                         <img id="t-0-fc" src="<%=basePath%>images/tree/folder.gif" style="display: none;" />
                         &nbsp;
                         <a href="javascript:void(0)" target="rightFrame" onclick="Pn.Tree.switchDisplay('t-0',true)">根目录[<span style="color: red"></span>]</a>
               </div>
               <div id="t-0-" style="">
               <div id="t-0-0">
                         <div id="t-0-0-s" onmouseover="Pn.Tree.lineOver(this)"   onmouseout="Pn.Tree.lineOut(this)"
                                                   onclick="Pn.Tree.lineSelected(this,'t');" isDisplay="true">
                                    <img src="<%=basePath%>images/tree/s.gif" width="15px" />
                                    <img id="t-0-0-co"   src="<%=basePath%>images/tree/elbow-end-minus.gif"
                                                   onclick="Pn.Tree.switchDisplay('t-0-0')"    style="cursor: pointer;" />
                                    <img id="t-0-0-cc"   src="<%=basePath%>images/tree/elbow-end-plus.gif"
                                                   onclick="Pn.Tree.switchDisplay('t-0-0')" style="cursor: pointer; display: none;" />
                                    <img id="t-0-0-fo"    src="<%=basePath%>images/tree/folder-open.gif" style="" />
                                    <img id="t-0-0-fc" src="<%=basePath%>images/tree/folder.gif"   style="display: none;" />
                                    &nbsp;
                                    <a href="javascript:void(0)" target="rightFrame"
                                                   onclick="Pn.Tree.switchDisplay('t-0-0',true)" id="_root"></a>
                            </div>
                            <div id="t-0-0-" style=""></div>
                 </div>

                 </div>
                 </div>
          </div>
 </body>
</html>
********************************************************************************************************************

标签：

相关文章