最后一天实习生活

实习时写的一个简单的树形式选择器

js内容:

var Tree = new function(){
    this._url = "/OA/treeXml.do";
    this._openMark = "<img src=/"/OA/images/treeImages/Lminus.png/"/>";//can set img here<img>
    this._closeMark = "<img src=/"/OA/images/treeImages/Lplus.png/"/>";
    this._itemMark = "<img src=/"/OA/images/treeImages/L.png/"><img src=/"/OA/images/treeImages/file.png/"/>";
    this._departmentPic="<img src=/"/OA/images/treeImages/department.png/"/>"
    this._employeePic="<img src=/"/OA/images/treeImages/employee.png/"/>"
    this._initId = "treeInit";
    this._rootData = "根目录";
    this._boxSuffix = "_childrenBox";
    this._folderType = "folder";
    this._itemType = "item";
    //this._parentInput = "";
    this._parentUserId="";
    this._parentDepartmentId="";
    //this._newWindow ="parentWindow";
    //init root node
    this._countUser=0;
    this._countDep=0;
    this._flag=0;
    this._clickTime=0;
    this.init = function(_textAreaId1,_textAreaId2){
     var initNode = document.getElementById(this._initId);
     var _node = document.createElement("div");
     _node.id = "0";
     _node.innerHTML = this.createItemHTML(_node.id,this._folderType,this._rootData);
     initNode.appendChild(_node);
     //this._parentInput=_textAreaId1;
    
     this._parentUserId=_textAreaId1;
     this._parentDepartmentId=_textAreaId2;     
    }
   
   
    //send request to get chidren info when clicked
    this.getChildren = function(_parentId){//事件触发
   
    var childBox = document.getElementById(_parentId+this._boxSuffix);
    if(childBox){//if node childBox exist it's no necessary to read database
   
    var isHidden = (childBox.style.display == "none");//judge current node state hidden or not
    childBox.style.display = isHidden?"":"none";
    //modify parent node state
    var _parentNode = document.getElementById(_parentId);
    _parentNode.firstChild.innerHTML = isHidden?this._openMark:this._closeMark;
   
    }
    else{//request server
   
    var xmlHttp = this.createXmlHttp();
    xmlHttp.onreadystatechange = function(){
           if(xmlHttp.readyState==4){
              Tree.addChildren(_parentId,xmlHttp.responseXML);
           }
      }
      xmlHttp.open("GET",this._url+"?parentId="+_parentId,true);
      xmlHttp.send(null); 
      this._clickTime=0;
     }
   
    }
   
    //set chidren nodes by the response xmlTree
    this.addChildren = function(_parentId,_data){
        var _parentNode = document.getElementById(_parentId);
        //_parentNode.firstChild.innerHTML = this._openMark;
        //create a container
        var _nodeBox = document.createElement("div");
        //container id rule:parentId+fixed ending
        _nodeBox.id = _parentId+this._boxSuffix;
        _nodeBox.className = "box";//set class css
      
        var _itemList = document.getElementById("list");
        //get all leaf nodes ;start explain the xmlTree
        if(_data==null) alert("数据库连接出错!请刷新");
        var root = _data.documentElement;
        var _children = root.getElementsByTagName("department");
        var _child = null;
       
        //添加部门和子节点
        for(var i=0;i<_children.length;i++){
        if(i==0&&this._clickTime<2) _parentNode.appendChild(_nodeBox);//至少一个子部门时才开始添加该容器
        _child = _children[i];
        _node = document.createElement("div");
        _node.id = _child.getAttribute("id");
        _childName=_child.getAttribute("name");     
        // _childType=(_childType=="false")?this._folder:this._itemType;
        //create html page codes by the type of node
        _node.innerHTML = this.createItemHTML(_node.id,this._folderType,_childName);//添加树形非叶子节点并附加点击事件
        _nodeBox.appendChild(_node);
       
        //先判断是否需要添加部门信息才在右边显示部门
        if(this._parentDepartmentId!=null&&this._parentDepartmentId!="undefined"){
        _nodeLi = document.createElement("li");
        _nodeLi.id=_childName;
        //_nodeLi.className="notClickFolder"
        _nodeLi.name="department";
        _nodeLi.innerHTML="<span οnclick='Tree.click(/""+_childName+"/");'>"+this._departmentPic+_childName+"</span>"
        _itemList.appendChild(_nodeLi);
        }
        }
       
        //添加员工信息
        _children = root.getElementsByTagName("employee");
        _child = null;
        for(var i=0;i<_children.length;i++){
        _child = _children[i];
       
        _childName=_child.getAttribute("name");     
        // _childType=(_childType=="false")?this._folder:this._itemType;
        //create html page codes by the type of node
        //_node.innerHTML = this.createItemHTML(_node.id,this._itemType,_childName);
       
        _nodeLi = document.createElement("li");
        _nodeLi.id = _childName;
        _nodeLi.name = "employee";
        //_nodeLi.className="notClickLeaf"
        //name=_nodeLi.getAttribute(name);
        //_nodeLi.οnclick=Tree.click(_nodeLi);
        // _nodeLi.οnmοuseοver=new Function("_nodeLi.className='mouseover';");
        //_nodeLi.οnmοuseοut=new Function("_nodeLi.className='mouseout'");
        _nodeLi.innerHTML ="<span οnclick='Tree.click(/""+_childName+"/");'>"+this._employeePic+_childName+"</span>";
        // _nodeLi.data = _childName;
        _itemList.appendChild(_nodeLi);
        }
         this._clickTime++;
 
    }
    this.click=function(node){
     //node.className='mouseover';
     var _nodeElement=document.getElementById(node);
     if(this._flag==0){
      if(_nodeElement.className == "onclick")
         _nodeElement.className="";
        else
        _nodeElement.className="onclick";
         }
     else{
      //alert(document.getElementById("allSelect").className);
      if(document.getElementById("select").className == "onclick")
          _nodeElement.className="onclick";
         else
          _nodeElement.className="";
        
     }   
    }
   //boject li on click
   //this.liOnclick() =function(name){
    //alert(name);
   //}
   //create HTML page codes by an node info
   this.createItemHTML = function(itemId,itemType,itemData,itemLink){
   //by the type of the Node
   var returnVar="";
   if(itemType == this._itemType){//有待扩展
   returnVar = '<span class="itemMark">'+this._itemMark+'</span>'+"<span class=/"item/" οnclick=/"Tree.clickItem("+itemLink+");/">"
   returnVar+=itemData+'</span>'; 
   }
   else if(itemType == this._folderType){//添加节点和事件
   returnVar = "<span class=/"folderMark/" οnclick=/"Tree.getChildren("+itemId+")/";>";
   returnVar += this._closeMark+"</span>";
   returnVar +="<span class=/"folder/" onclick =/"Tree.getChildren("+itemId+");/">"+itemData+"</span>";
   }
   return returnVar;
   }
   
   //set the event happen after click the leaf node
   this.clickItem = function(_link){
   alert("href"+_link);
   }
  
   //create XMLHttpRequest Object
   this.createXmlHttp = function(){
   var xmlHttp = null;
   if(window.XMLHttpRequest){
      xmlHttp = new XMLHttpRequest();//for firefox,Opera atc
   }
   else{
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//for IE
   }
   return xmlHttp;
   }
  
   //user interface fuction
   this.addUsers=function(userId,departmentId){
    //var popup=window.createPopup();
    //if(popup)
    //popup.close();
    //popup.show('/OA/WebPage/treeTest.jsp');
    //popup.hide();
    //popup.document.body
    if(!document.all){
    //fetch_object("txt").value="move";
    mouseX=document.body.scrollLeft+window.event.pageX; //分浏览器讨论
    mouseY=document.body.scrollLeft+window.event.pageY;
    }else{
    mouseX=document.body.scrollLeft+window.event.clientX; //分浏览器讨论
    mouseY=document.body.scrollLeft+window.event.clientY;
    }
   
    var addwindow=null;
    var height=300;
    var width=360;
    var _top=mouseY*2;
    //var _top=screen.height-mouseY;
    var left=mouseX;
    var feature="height="+height+",width="+width+",top="+_top+",left="+left+"toolbar=no,menubar=no, scrollbars=yes, resizable=no,location=no, status=yes";
    if(addwindow)
    addwindow.close(); 
    //if(departmentId==null||departmentId=="")
    addwindow = window.open('/OA/WebPage/notify/treeTest.jsp?userId='+userId+'&departmentId='+departmentId,'addWin',feature);
   
    window.name="parentWindow";
    //this._newWindow = addwindow;
    addwindow.focus(); 
   }
   //select all
   this.selectAll=function(){
    //document.getElementById("allSelect").className="onclick";
   //var ListLi = new Array();
   this._flag=1;//sign it all selected
   listLi=document.getElementsByTagName("li");
   if(listLi.length>1){
    if(listLi[0].firstChild.className=="onclick")
     listLi[0].firstChild.className="";
    else
     listLi[0].firstChild.className="onclick";
    for(var i=0;i<listLi.length;i++){
     if(i>0)listLi[i].firstChild.click();
    }
    this._flag=0;
   }
  }
   //confirm add the users
   this.confirmAdd=function(){
   var elementUser=null;
   var elementDep=null;
   this._countUser=0;
   this._countDep=0;
   var listLi=document.getElementsByTagName("li");
   if(listLi.length<=1)
     alert("操作无效!");
   else{
     alert("确定添加所有被选的用户吗?"); 
     for(var i=1;i<listLi.length;i++){
     if(listLi[i].className=="onclick"){
         if(window.opener){
       if(this._parentUserId!="")
       elementUser=window.opener.document.getElementById(this._parentUserId);
         if(this._parentDepartmentId!="")
          elementDep=window.opener.document.getElementById(this._parentDepartmentId);
         }
         if(listLi[i].name=="department"&&elementDep!=null){
        elementDep.innerText=elementDep.innerText+listLi[i].id+",";
           this._countDep++;
         }  
      if(listLi[i].name=="employee"&&elementUser!=null)
        elementUser.innerText=elementUser.innerText+listLi[i].id+",";
        this._countUser++;
     } 
     }
    } 
   }
 
   //
   this.cancelSelect=function(){
 
   var splitArray = new Array();
   var regex=/,/;
   var elementUser=null;
   var elementDep=null;
   if(window.opener){
        if(this._parentUserId!="")
       elementUser=window.opener.document.getElementById(this._parentUserId);
        if(this._parentDepartmentId!="")
          elementDep=window.opener.document.getElementById(this._parentDepartmentId);
   }
   if(elementUser!=null&&elementUser.innerText!="") {
        splitArray = elementUser.innerText.split(regex); 
           elementUser.innerText="";
           for(var i=0;i<(splitArray.length-this._countUser);i++)
           elementUser.innerText+=splitArray[i]+",";
           this._countUser=0;
    }
   if(elementDep!=null&&elementDep.innerText!="") {
        splitArray = elementDep.innerText.split(regex); 
           elementDep.innerText="";
           for(var i=0;i<(splitArray.length-this._countDep);i++)
           elementDep.innerText+=splitArray[i]+",";
           this._countDep=0;
    }
   }
   //
   this.deleteElement=function(){
    var ulNode=document.getElementById("list");
    var listLi=document.getElementsByTagName("li");
    if(listLi.length<=1)
     alert("操作无效!");
    else{
     alert("确定从右边列表中删除该项吗?"); 
     for(var i=1;i<listLi.length;i++){
     if(listLi[i].className=="onclick"){
         ulNode.removeChild(listLi[i]);
         i=i-1;
     }
    }
   }
  }

//mouse 鼠标事件绑定
this.initMouseMove=function(){
if(!document.all){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = this.mouseMove; //事件绑定
}
this.mouseMove=function(e){
  var x,y;
  if(!document.all){
    //fetch_object("txt").value="move";
    x=e.pageX;
    y=e.pageY;
  }else{
   x=document.body.scrollLeft+event.clientX;
   y=document.body.scrollTop+event.clientY;
  }
   //this._mousePosition=x+":"+y;
   //fetch_object("txt").value=x+":"+y;
}

var objects=new Array();
function fetch_object(idname, forcefetch) { //根据不同得浏览器获取对象 暂时不用
 var domType = '';
 if (document.all) { 
 domType = "ie4";
  } else if (document.getElementById) {
 domType = "std";
 } else if (document.layers) {
 domType = "ns4";
 }
if (forcefetch || typeof(objects[idname]) == "undefined") {
switch (domType) {
 case "std": objects[idname] = document.getElementById(idname);
             break;
 case "ie4": objects[idname] = document.all[idname];
             break;
 case "ns4": objects[idname] = document.layers[idname];
             break;
}
}
return objects[idname];
}

treeTest.jsp如下:

<%@ page language="java" pageEncoding="gb2312"%>   
<%@ taglib uri="/WEB-INF/c.tld" prefix="c" %>
<html> 
<head>
<script type="text/javascript" src="/OA/js/treeObject.js" charset="gb2312"></script>
<script type="text/javascript" src="/OA/js/wans01.js" charset="gb2312"></script>
<link rel="stylesheet" href="/OA/css/treeXml.css" type="text/css" />
<title>部门人员选择器</title>
</head> 
<body οnlοad="Tree.init('${param.userId}','${param.departmentId}')"> 
<div align="right" style="margin:5px,10px;"><a href="#" οnclick="window.location.reload();">[刷新]</a><a href="#" οnclick="window.close();">[关闭]</a></div>
<div id="main">
<div id="left" >
<div id="treeInit"></div>
</div>
<div id="right">
<ul class="list" id="list">
<li id="allSelect"><span id="select" οnclick="Tree.selectAll();">全选</span>|<span id="delete" οnclick="Tree.deleteElement();">删除</span></li>
</ul>
</div>
</div>
<div id="end" style="margin-left:10px;">
<input type="button" id="add" value="确认添加" οnclick="Tree.confirmAdd();"/>
<input type="button" id="cancel" value="取消添加" οnclick="Tree.cancelSelect();"/>
</div>
</body></html> 

TreeXmlAction.java如下:

package com.struts.action;
import java.util.*;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.transform.Transformer;
import javax.xml.transform.TransformerFactory;
import javax.xml.transform.dom.DOMSource;
import javax.xml.transform.stream.StreamResult;

import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import com.struts.servic.*;
import com.struts.action.personManage.CreateDepartmentAction;
import com.struts.domain.*;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.w3c.dom.Document;
import org.w3c.dom.Element;

import java.io.OutputStream;
/**
 *
 * @author afei
 *
 */
public class TreeXmlAction extends Action {
 /*
  * 检验是不是有新的要提醒的短消息
  */
 final Log logger = LogFactory.getLog(CreateDepartmentAction.class);
 private DepartmentService departmentService;
 Department department = new Department();
 public ActionForward execute(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response)throws Exception {
  String parentId="";
  if(request.getParameter("parentId")!=null){ 
  parentId = request.getParameter("parentId"); 
  logger.info("parentId"+parentId);
  response.setContentType("text/xml");  
  
  TransformerFactory factory = TransformerFactory.newInstance();
  Transformer transformer = factory.newTransformer();
  Document treeDOM = this.getDepartmentTree(parentId);
  OutputStream out=response.getOutputStream();
  out.flush();
  transformer.transform(new DOMSource(treeDOM), new StreamResult(out));
  out.close();
  }
  return null;
 }
 public Document getDepartmentTree(String departmentId) throws Exception{
  DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
  DocumentBuilder builder = factory.newDocumentBuilder();
  Document dom = builder.newDocument();
  
  
  List<Department> departments = null;
  Element treeDOM = dom.createElement("treeRoot");
  
  if(departmentId.equals("0")){
   departments= departmentService.getRootDepartment();
  }
  else{
   logger.info("根据ID查询部门!");
   Department department = departmentService.getDepartmentById(Integer.parseInt(departmentId));
   if(!department.getAllUsersOfDepartment().isEmpty()){
    for(User user:department.getAllUsersOfDepartment()){
     Element employee = dom.createElement("employee");
     employee.setAttribute("id", user.getUserId().toString());
     employee.setAttribute("isLeaf", "true");
     employee.setAttribute("name", user.getUserName());
     employee.setNodeValue(user.getUserName());
     treeDOM.appendChild(employee); 
    }
   }
   departments=department.getChildDepartments();
  }
  if(departments!=null){
    for(Department d : departments){
   Element tree = dom.createElement("department");
   tree.setNodeValue(d.getDepartmentName());
   tree.setAttribute("id", d.getDepartmentId().toString());
   tree.setAttribute("isLeaf", "false");
   tree.setAttribute("name", d.getDepartmentName());
   treeDOM.appendChild(tree);
    }
  }
  else
   logger.info("getRootDepartment:error!");
  dom.appendChild(treeDOM);
  
  return dom;
 }
 public DepartmentService getDepartmentService() {
  return departmentService;
 }

 public void setDepartmentService(DepartmentService departmentService) {
  this.departmentService = departmentService;
 }

}
/*
response.setHeader("Cache-Control", "no-cache");
StringBuffer xmlTree = new StringBuffer("<?xml version=/"1.0/"encoding=/"UTF-8/"?>");
xmlTree.append("<treeRoot>");
department = this.departmentService.getDepartmentById(new Integer(Integer.parseInt(parentId)));
if(!department.getChildDepartments().isEmpty()){
 for(Department d:department.getChildDepartments()){
  xmlTree.append("<department id=/""+d.getDepartmentId()+"/"isLeaf=/"false/">");
  xmlTree.append(d.getDepartmentName()+"</department>");
  logger.info("dddddddddd:"+xmlTree);
 }
 
}
logger.info("after department dealing xmlTree:"+xmlTree);
if(!department.getAllUsersOfDepartment().isEmpty()){
 java.util.Iterator<User> iterator = department.getAllUsersOfDepartment().iterator();
 while(iterator.hasNext()){
  logger.info("user Start:");
  User user=null;
  try{user=iterator.next();
  }catch(Exception e){
   e.printStackTrace();
   logger.info("user problem,break");
   break;
  }
  xmlTree.append("<employee id=/""+user.getUserId()+"/"isLeaf=/"true/">");
  xmlTree.append(user.getUserName()+"</empoyee>");
  logger.info("uuuuuu:"+xmlTree); 
 }

}
xmlTree.append("</treeRoot>");
logger.info("final:"+xmlTree);
response.getWriter().write(xmlTree.toString());*/

treeXml.css如下:

html,body{
margin:0;
height:100%;
}
#left{
float:left;
border-right:2px solid #cccccc;
border-collapse:collapse;
height:100%;
}
#right{
 float:left;
    border-left:2px solid #cccccc;
    border-collapse:collapse;
    height:100%;
}

.notClickFolder{
  list-style-type:square;
}
.notClickLeaf{
  list-style-type:circle

ul li {
 border-bottom: dashed 1px #d8e4f0;
 padding:0px;
 list-style:none;
}
ul{
margin-left:10px;


ul li span{
    padding-left:0px;

.mouseover{
background-color:red;
}
.onclick{
color:blue;
}
.secondClick{
background-color:white;

.mouseout{
background-color:white;
}
#main{
  border-collapse:collapse;
  border:1px solid #cccccc;
  height:80%;
  margin:0px,10px,10px,10px;
 
 
}
a:link {
 text-decoration: none;
 color: #000000;
 font-family: "宋体"
}

a:visited {
 text-decoration: none;
 font-family: "宋体";
 color: #000000
}

a:hover {
 text-decoration: underline;
 font-family: "宋体";
 color: #0000ff
}
div .box{
  margin-left:20px;
 
}
span .folderMark{
   font-family:"宋体";
   color:#F00;
   cursor:hand;
   margin-right:5px;
  
}
span .folder{
  cursor:hand;
}
span .itemMark{
 font-family:"宋体";
 color:#F00;
 margin-right:5px;
}
span .item{
 cursor:hand;
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值