实习时写的一个简单的树形式选择器
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;
}