使用ssh框架+js完成的dtree

dtree.js代码 

// Node object

function Node(id, pid, name, url,checked, title, target, icon, iconOpen, open) {

 this.id = id;

 this.pid = pid;

 this.name = name;

 this.url = url;

 this.title = title;

 this.target = target;

 this.icon = icon;

 this.iconOpen = iconOpen;

 this._io = open || false;

 this._is = false;

 this._ls = false;

 this._hc = false;

 this._ai = 0;

 this._p;
 
 this.checked=checked;

};

 

// Tree object

function dTree(objName,path) {

 this.config = {

  target     : null,

  folderLinks   : true,

  useSelection  : true,

  useCookies   : true,

  useLines    : true,

  useIcons    : true,

  useStatusText  : false,

  closeSameLevel : false,

  inOrder     : false,
  check:true
 }

 this.icon = {

  root    : path+'/base.gif',

  folder   : path+'/folder.gif',

  folderOpen : path+'/folderopen.gif',

  node    : path+'/page.gif',

  empty    : path+'/empty.gif',

  line    : path+'/line.gif',

  join    : path+'/join.gif',

  joinBottom : path+'/joinbottom.gif',

  plus    : path+'/plus.gif',

  plusBottom : path+'/plusbottom.gif',

  minus    : path+'/minus.gif',

  minusBottom : path+'/minusbottom.gif',

  nlPlus   : path+'/nolines_plus.gif',

  nlMinus   : path+'/nolines_minus.gif'

 };

 this.obj = objName;

 this.aNodes = [];

 this.aIndent = [];

 this.root = new Node(-1);

 this.selectedNode = null;

 this.selectedFound = false;

 this.completed = false;

};

 

// Adds a new node to the node array

dTree.prototype.add = function(id, pid, name, url, title, target, icon, iconOpen, open, checked) {

 this.aNodes[this.aNodes.length] = new Node(id, pid, name, url, title, target, icon, iconOpen, open, checked);

};

 

// Open/close all nodes

dTree.prototype.openAll = function() {

 this.oAll(true);

};

dTree.prototype.closeAll = function() {

 this.oAll(false);

};

 

// Outputs the tree to the page

dTree.prototype.toString = function() {

 var str = '<div class="dtree">\n';

 if (document.getElementById) {

  if (this.config.useCookies) this.selectedNode = this.getSelected();

  str += this.addNode(this.root);

 } else str += 'Browser not supported.';

 str += '</div>';

 if (!this.selectedFound) this.selectedNode = null;

 this.completed = true;
 
 return str;

};

 

// Creates the tree structure

dTree.prototype.addNode = function(pNode) {

 var str = '';

 var n=0;

 if (this.config.inOrder) n = pNode._ai;

 for (n; n<this.aNodes.length; n++) {

  if (this.aNodes[n].pid == pNode.id) {

   var cn = this.aNodes[n];

   cn._p = pNode;

   cn._ai = n;

   this.setCS(cn);

   if (!cn.target && this.config.target) cn.target = this.config.target;

   if (cn._hc && !cn._io && this.config.useCookies) cn._io = this.isOpen(cn.id);

   if (!this.config.folderLinks && cn._hc) cn.url = null;

   if (this.config.useSelection && cn.id == this.selectedNode && !this.selectedFound) {

     cn._is = true;

     this.selectedNode = n;

     this.selectedFound = true;

   }

   str += this.node(cn, n);

   if (cn._ls) break;

  }

 }

 return str;

};

 

// Creates the node icon, url and text

dTree.prototype.node = function(node, nodeId) {

 var str = '<div class="dTreeNode">' + this.indent(node, nodeId);

 if (this.config.useIcons) {

  if (!node.icon) node.icon = (this.root.id == node.pid) ? this.icon.root : ((node._hc) ? this.icon.folder : this.icon.node);

  if (!node.iconOpen) node.iconOpen = (node._hc) ? this.icon.folderOpen : this.icon.node;

  if (this.root.id == node.pid) {

   node.icon = this.icon.root;

   node.iconOpen = this.icon.root;

  }

   str += '<img id="i' + this.obj + nodeId + '" src="' + ((node._io) ? node.iconOpen : node.icon) + '" alt="" />';
   
   if(this.config.check==true){
    if(node.checked=='1'){
     str+= '<input type="checkbox" id="c'+ this.obj + nodeId + '" value="'+ node.id+'"name="myId" οnclick="javascript:'+this.obj+'.cc('+nodeId+')" checked/>';
   
    }else{
       str+= '<input type="checkbox" id="c'+ this.obj + nodeId + '" value="'+ node.id+'" name="myId" οnclick="javascript:'+this.obj+'.cc('+nodeId+')"/>';
   }
  }
 }

 if (node.url) {

  str += '<a id="s' + this.obj + nodeId + '" class="' + ((this.config.useSelection) ? ((node._is ? 'nodeSel' : 'node')) : 'node') + '" href="' + node.url + '"';

  if (node.title) str += ' title="' + node.title + '"';

  if (node.target) str += ' target="' + node.target + '"';

  if (this.config.useStatusText) str += ' οnmοuseοver="window.status=\'' + node.name + '\';return true;" οnmοuseοut="window.status=\'\';return true;" ';

  if (this.config.useSelection && ((node._hc && this.config.folderLinks) || !node._hc))

   str += ' οnclick="javascript: ' + this.obj + '.s(' + nodeId + ');"';

  str += '>';

 }

 else if ((!this.config.folderLinks || !node.url) && node._hc && node.pid != this.root.id)

  str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');" class="node">';

 str += node.name;

 if (node.url || ((!this.config.folderLinks || !node.url) && node._hc)) str += '</a>';

 str += '</div>';

 if (node._hc) {

  str += '<div id="d' + this.obj + nodeId + '" class="clip" style="display:' + ((this.root.id == node.pid || node._io) ? 'block' : 'none') + ';">';

  str += this.addNode(node);

  str += '</div>';

 }

 this.aIndent.pop();

 return str;

};

 

// Adds the empty and line icons

dTree.prototype.indent = function(node, nodeId) {

 var str = '';

 if (this.root.id != node.pid) {

  for (var n=0; n<this.aIndent.length; n++)

   str += '<img src="' + ( (this.aIndent[n] == 1 && this.config.useLines) ? this.icon.line : this.icon.empty ) + '" alt="" />';

  (node._ls) ? this.aIndent.push(0) : this.aIndent.push(1);

  if (node._hc) {

   str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');"><img id="j' + this.obj + nodeId + '" src="';

   if (!this.config.useLines) str += (node._io) ? this.icon.nlMinus : this.icon.nlPlus;

   else str += ( (node._io) ? ((node._ls && this.config.useLines) ? this.icon.minusBottom : this.icon.minus) : ((node._ls && this.config.useLines) ? this.icon.plusBottom : this.icon.plus ) );

   str += '" alt="" /></a>';

  } else str += '<img src="' + ( (this.config.useLines) ? ((node._ls) ? this.icon.joinBottom : this.icon.join ) : this.icon.empty) + '" alt="" />';

 }

 return str;

};

 

// Checks if a node has any children and if it is the last sibling

dTree.prototype.setCS = function(node) {

 var lastId;

 for (var n=0; n<this.aNodes.length; n++) {

  if (this.aNodes[n].pid == node.id) node._hc = true;

  if (this.aNodes[n].pid == node.pid) lastId = this.aNodes[n].id;

 }

 if (lastId==node.id) node._ls = true;

};

 

// Returns the selected node

dTree.prototype.getSelected = function() {

 var sn = this.getCookie('cs' + this.obj);

 return (sn) ? sn : null;

};

dTree.prototype.cc=function(nodeId){

 var cs = document.getElementById("c"+this.obj+nodeId).checked;
 
 var n,node = this.aNodes[nodeId];
 
 var len =this.aNodes.length;

 for (n=0; n<len; n++) {

  if (this.aNodes[n].pid == node.id) {
   
   document.getElementById("c"+this.obj+n).checked=cs;
   
   this.cc(n);
  
  }
  
 }
 if(cs==false){
 
  var clicknode=node
 
  do{
   
   for(j=0;j<len;j++){
    
    if(this.aNodes[j].pid==clicknode.pid&&document.getElementById("c"+this.obj+j).checked==true){
     
     return;
    
    }
   }
   if(j==len){
   
    for(k=0;k<len;k++){
    
     if(this.aNodes[k].id==clicknode.pid){
    
      document.getElementById("c"+this.obj+k).checked=false;
    
      clicknode=this.aNodes[k];
     
      break;
    
     }
    
    }
   
   }

  }while(clicknode.pid!=-1);
   
 }
 if(cs==true){
 
  var pid=node.pid;
 
  var bSearch;
 
  do{
 
   bSearch=false;
  
   for(n=0;n<len;n++){
  
        if(this.aNodes[n].id==pid){
       
          document.getElementById("c"+this.obj+n).checked=true;
         
          pid=this.aNodes[n].pid;
         
          bSearch= true;   
         
          break;
         
        }
       
      }
     
     }while(bSearch==true);
   }

}

// Highlights the selected node

dTree.prototype.s = function(id) {

 if (!this.config.useSelection) return;

 var cn = this.aNodes[id];

 if (cn._hc && !this.config.folderLinks) return;

 if (this.selectedNode != id) {

  if (this.selectedNode || this.selectedNode==0) {

   eOld = document.getElementById("s" + this.obj + this.selectedNode);

   eOld.className = "node";

  }

  eNew = document.getElementById("s" + this.obj + id);

  eNew.className = "nodeSel";

  this.selectedNode = id;

  if (this.config.useCookies) this.setCookie('cs' + this.obj, cn.id);

 }

};

 

// Toggle Open or close

dTree.prototype.o = function(id) {
 var cn = this.aNodes[id];

 this.nodeStatus(!cn._io, id, cn._ls);

 cn._io = !cn._io;

 if (this.config.closeSameLevel) this.closeLevel(cn);

 if (this.config.useCookies) this.updateCookie();

};

 

// Open or close all nodes

dTree.prototype.oAll = function(status) {

 for (var n=0; n<this.aNodes.length; n++) {

  if (this.aNodes[n]._hc && this.aNodes[n].pid != this.root.id) {

   this.nodeStatus(status, n, this.aNodes[n]._ls)

   this.aNodes[n]._io = status;

  }

 }

 if (this.config.useCookies) this.updateCookie();

};

 

// Opens the tree to a specific node

dTree.prototype.openTo = function(nId, bSelect, bFirst) {

 if (!bFirst) {

  for (var n=0; n<this.aNodes.length; n++) {

   if (this.aNodes[n].id == nId) {

    nId=n;

    break;

   }

  }

 }

 var cn=this.aNodes[nId];

 if (cn.pid==this.root.id || !cn._p) return;

 cn._io = true;

 cn._is = bSelect;

 if (this.completed && cn._hc) this.nodeStatus(true, cn._ai, cn._ls);

 if (this.completed && bSelect) this.s(cn._ai);

 else if (bSelect) this._sn=cn._ai;

 this.openTo(cn._p._ai, false, true);

};

 

// Closes all nodes on the same level as certain node

dTree.prototype.closeLevel = function(node) {

 for (var n=0; n<this.aNodes.length; n++) {

  if (this.aNodes[n].pid == node.pid && this.aNodes[n].id != node.id && this.aNodes[n]._hc) {

   this.nodeStatus(false, n, this.aNodes[n]._ls);

   this.aNodes[n]._io = false;

   this.closeAllChildren(this.aNodes[n]);

  }

 }

}

 

// Closes all children of a node

dTree.prototype.closeAllChildren = function(node) {

 for (var n=0; n<this.aNodes.length; n++) {

  if (this.aNodes[n].pid == node.id && this.aNodes[n]._hc) {

   if (this.aNodes[n]._io) this.nodeStatus(false, n, this.aNodes[n]._ls);

   this.aNodes[n]._io = false;

   this.closeAllChildren(this.aNodes[n]);  

  }

 }

}

 

// Change the status of a node(open or closed)

dTree.prototype.nodeStatus = function(status, id, bottom) {

 eDiv = document.getElementById('d' + this.obj + id);

 eJoin = document.getElementById('j' + this.obj + id);

 if (this.config.useIcons) {

  eIcon = document.getElementById('i' + this.obj + id);

  eIcon.src = (status) ? this.aNodes[id].iconOpen : this.aNodes[id].icon;

 }

 eJoin.src = (this.config.useLines)?

 ((status)?((bottom)?this.icon.minusBottom:this.icon.minus):((bottom)?this.icon.plusBottom:this.icon.plus)):

 ((status)?this.icon.nlMinus:this.icon.nlPlus);

 eDiv.style.display = (status) ? 'block': 'none';

};

 

 

// [Cookie] Clears a cookie

dTree.prototype.clearCookie = function() {

 var now = new Date();

 var yesterday = new Date(now.getTime() - 1000 * 60 * 60 * 24);

 this.setCookie('co'+this.obj, 'cookieValue', yesterday);

 this.setCookie('cs'+this.obj, 'cookieValue', yesterday);

};

 

// [Cookie] Sets value in a cookie

dTree.prototype.setCookie = function(cookieName, cookieValue, expires, path, domain, secure) {

 document.cookie =

  escape(cookieName) + '=' + escape(cookieValue)

  + (expires ? '; expires=' + expires.toGMTString() : '')

  + (path ? '; path=' + path : '')

  + (domain ? '; domain=' + domain : '')

  + (secure ? '; secure' : '');

};

 

// [Cookie] Gets a value from a cookie

dTree.prototype.getCookie = function(cookieName) {

 var cookieValue = '';

 var posName = document.cookie.indexOf(escape(cookieName) + '=');

 if (posName != -1) {

  var posValue = posName + (escape(cookieName) + '=').length;

  var endPos = document.cookie.indexOf(';', posValue);

  if (endPos != -1) cookieValue = unescape(document.cookie.substring(posValue, endPos));

  else cookieValue = unescape(document.cookie.substring(posValue));

 }

 return (cookieValue);

};

 

// [Cookie] Returns ids of open nodes as a string

dTree.prototype.updateCookie = function() {

 var str = '';

 for (var n=0; n<this.aNodes.length; n++) {

  if (this.aNodes[n]._io && this.aNodes[n].pid != this.root.id) {

   if (str) str += '.';

   str += this.aNodes[n].id;

  }

 }

 this.setCookie('co' + this.obj, str);

};

 

// [Cookie] Checks if a node id is in a cookie

dTree.prototype.isOpen = function(id) {

 var aOpen = this.getCookie('co' + this.obj).split('.');

 for (var n=0; n<aOpen.length; n++)

  if (aOpen[n] == id) return true;

 return false;

};

 

// If Push and pop is not implemented by the browser

if (!Array.prototype.push) {

 Array.prototype.push = function array_push() {

  for(var i=0;i<arguments.length;i++)

   this[this.length]=arguments[i];

  return this.length;

 }

};

if (!Array.prototype.pop) {

 Array.prototype.pop = function array_pop() {

  lastElement = this[this.length-1];

  this.length = Math.max(this.length-1,0);

  return lastElement;

 }

};

1.把dtree.js文件加载head里 不解释
2.body或div里添加
 <script type="text/javascript">
  d = new dTree('d','img');  新建dtree 参数d:不清楚和前面的名字一样，img为图片所在的位置；
  d.check=true;              是否显示多选框
  d.add(0,-1,'My example tree',false);常用参数 节点id，父节点Id 显示内容，跳转url，是否选中多选框...
  d.add(1,0,'Node 1','example01.html',true);
  d.add(2,0,'Node 2','example01.html');
  d.add(3,1,'Node 1.1','example01.html');
  d.add(4,0,'Node 3','example01.html');
  d.add(5,3,'Node 1.1.1','example01.html');
  d.add(6,5,'Node 1.1.1.1','example01.html');
  d.add(7,0,'Node 4','example01.html');
  d.add(8,1,'Node 1.2','example01.html');
  d.add(9,0,'My Pictures','example01.html');
  d.add(10,9,'The trip to Iceland');
  d.add(11,9,'Mom\'s birthday','example01.html');
  d.add(12,0,'Recycle Bin','example01.html');
  document.write(d);
 </script>
3.dtree.add的全部参数
  d.add(id, pid, name, url,checked, title, target, icon, iconOpen, open)
   参数 id       节点ID
        pid      父ID
        name     显示内容
        url      跳转url
        checked  是否多选
        title    标题显示
        target   目标的frame
        icon     节点显示的图标
        iconOpen 打开节点时显示的图标
        open     节点是否打开
例子只是简单的用法

action

package com.jun.action;

import java.util.Iterator;
import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.apache.struts2.ServletActionContext;

import com.jun.model.CfgDepmt;
import com.jun.model.CfgFunction;
import com.jun.service.CfgDepmtService;
import com.jun.web.util.PaginationSupport;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;

public class CfgDepmtAction extends ActionSupport {
 public String findCfgDepmt(int pageSize, int startIndex){
  paginationSupport =cfgDepmtService.findCfgDepmt(pageSize, startIndex);
  return this.SUCCESS;
 }

 public String findCfgDepmt(){
  list= cfgDepmtService.findCfgDepmt();
  if(list.size()!=0){
   if(sb!=null) sb=new StringBuffer();
   sb.append("0,-1,''@");
   for(Iterator iter = list.iterator();iter.hasNext();){
    CfgDepmt cfgDepmt = (CfgDepmt)iter.next();

    str = cfgDepmt.getId()+","+cfgDepmt.getParentId()+",'"+cfgDepmt.getName()+"','',false,'','',''@";
    sb.append(str);
    //ActionContext.getContext().getSession().put("str", sb.toString()); 
    //HttpServletRequest request = ServletActionContext.getRequest(); <s:property value="%{var}"
    //ServletActionContext.getRequest().setAttribute("sb", sb.toString());
  
     }System.out.println("打印树节点："+sb.toString());  
   
   
   
   
   return this.SUCCESS;}
  return this.ERROR;
  }
 public String addCfgDepmt(CfgDepmt depmt){
  if( cfgDepmtService.addCfgDepmt(depmt)==0) return this.ERROR;
  return this.SUCCESS;
 }
 public String updateDepmt(Long id){
  cfgDepmt=cfgDepmtService.loadDepmt(id);
  if(cfgDepmt!=null) return this.SUCCESS;
  return this.ERROR;
  
 }
 public String doUpdateDepmt(CfgDepmt depmt){
  cfgDepmtService.updateCfgDepmt(depmt);
  return this.SUCCESS;
  
  
 }
 private int pageSize = 10;
 private int startIndex = 0;
 private PaginationSupport paginationSupport ;
 
 public CfgDepmtService cfgDepmtService;
 public CfgDepmt cfgDepmt;
 public List list;
 public StringBuffer sb = new StringBuffer();
 public String str = null;
 public int getPageSize() {
  return pageSize;
 }
 public void setPageSize(int pageSize) {
  this.pageSize = pageSize;
 }
 public int getStartIndex() {
  return startIndex;
 }
 public void setStartIndex(int startIndex) {
  this.startIndex = startIndex;
 }
 public PaginationSupport getPaginationSupport() {
  return paginationSupport;
 }
 public void setPaginationSupport(PaginationSupport paginationSupport) {
  this.paginationSupport = paginationSupport;
 }
 public CfgDepmtService getCfgDepmtService() {
  return cfgDepmtService;
 }
 public void setCfgDepmtService(CfgDepmtService cfgDepmtService) {
  this.cfgDepmtService = cfgDepmtService;
 }
 public CfgDepmt getCfgDepmt() {
  return cfgDepmt;
 }
 public void setCfgDepmt(CfgDepmt cfgDepmt) {
  this.cfgDepmt = cfgDepmt;
 }
 public List getList() {
  return list;
 }
 public void setList(List list) {
  this.list = list;
 }
}

jsp

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
   
    <title>My JSP 'MyJsp2.jsp' starting page</title>
   
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">   
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <!--
 <link rel="stylesheet" type="text/css" href="styles.css">
 -->
 <script type="text/javascript" src="js/dtree.js"></script>
 <style type="text/css">
 body {
 background-color: #cdd7f0;
 background-image: url(../images/leftbg.gif);
 background-repeat: repeat-x;
}

 </style>
    </head>
 
  <body><!-- 欢迎你，<s:property value="#session.name"/>   ||<s:property value="#session.id"/> 
  --><script type="text/javascript">
  <!--
d = new dTree('d','images/tree');
   d.config.check=false;
<%
String str =(String)session.getAttribute("str") ;
//String str="0,-1,''@1,0,'功能管理','FunctionManager.aspx',false,'','mainFrame',''@2,0,'工号管理','UserManage.aspx',false,'','mainFrame',''@3,0,'角色管理','RoleManage.aspx',false,'','mainFrame',''@4,0,'其他功能','http://www.baidu.com',false,'','mainFrame',''@";
String[] ar =  str.split("@");
for(int i=0;i<ar.length;i++){
%>
d.add(<%=ar[i]%>);
<%}%>
document.write(d);
-->
 </script>
  </body>
</html>