checkboxtree.js

用javascript写的树型复选框自定义标签

/**
  * 用途：带checkbox功能的树形控件
  * 作者: 林勇
  * 描述: 使得树型控件支持子节点全部选中父节点才选中
  *       (Checkboxtree.js)
  * 公司: 
  * 修改日志                         
*/
var nodes		= new Array();
var openNodes	= new Array();
var selectNodes = new Array();
var icons		= new Array(6);
var checkName = "";
var imgpath = "";
var hasAction = "false";
var readonly = "false";

// Loads all icons that are used in the tree
function preloadIcons() {
	icons[0] = new Image();
	icons[0].src = imgpath+"plus.gif";
	icons[1] = new Image();
	icons[1].src = imgpath+"plusbottom.gif";
	icons[2] = new Image();
	icons[2].src = imgpath+"minus.gif";
	icons[3] = new Image();
	icons[3].src = imgpath+"minusbottom.gif";
	icons[4] = new Image();
	icons[4].src = imgpath+"folder.gif";
	icons[5] = new Image();
	icons[5].src = imgpath+"folderopen.gif";
}
// Create the tree
function createTree(arrName,startNode,openNode,seNode,chName,rootName,serverpath,actionstats,tablecss,read) {
	//is has link action
	if(actionstats == "true")
		hasAction = actionstats;
	//set imgage path
	imgpath = serverpath+"/img/";
	//set tree body context
	nodes = arrName;
	//set checkbox name
	checkName = chName;
	//set had been checked node
	selectNodes = seNode.split(",");
	//set checkbox readonly
	readonly = read;
	setSelectOpen();
	if (nodes.length > 0) {
		preloadIcons();
		if (startNode == null) startNode = 0;
		if (openNode != 0 || openNode != null) setOpenNodes(openNode);
		//var ta = "<table ";
		document.write("<table ");
		var tables = tablecss.split(",");
		for(var i=0;i<tables.length;i++){
			var tabsub = tables[i].split(":");
		//	ta = ta + tabsub[0]+"=\""+tabsub[1]+"\" ";
			document.write(tabsub[0]+"=\""+tabsub[1]+"\" ");
		}
	//	alert(ta);
	//	document.write(ta);
		document.write("><tr><td>");
		if (startNode !=0) {
			var nodeValues = nodes[getArrayId(startNode)].split("|");
			document.write("<a href=\"" + nodeValues[3] + "\" onmouseover=\"window.status='" + nodeValues[2] + "';return true;\" onmouseout=\"window.status=' ';return true;\"><img src=\"img/folderopen.gif\" align=\"absbottom\" alt=\"\" />" + nodeValues[2] + "</a><br />");
		} else {
			document.write("<img src=\""+imgpath+"base.gif\" align=\"absbottom\" alt=\"\" />");
			document.write(rootName);
			document.write("<br>");
		}
		var recursedNodes = new Array();	
		addNode(startNode, recursedNodes);
		document.write("</td></tr></table>");
	}
}
function setSelectOpen(){
	for(var i=0;i<selectNodes.length;i++){
		setOpenNodes(selectNodes[i]);
	}
}
// Returns the position of a node in the array
function getArrayId(node) {
	for (i=0; i<nodes.length; i++) {
		var nodeValues = nodes[i].split("|");
		if (nodeValues[0]==node) return i;
	}
}
// Puts in array nodes that will be open
function setOpenNodes(openNode) {
	for (i=0; i<nodes.length; i++) {
		var nodeValues = nodes[i].split("|");
		if (nodeValues[0]==openNode) {
			openNodes.push(nodeValues[0]);
			setOpenNodes(nodeValues[1]);
		}
	}
}
// Checks if a node is open
function isNodeOpen(node) {
	for (i=0; i<openNodes.length; i++)
		if (openNodes[i]==node) return true;
	return false;
}
// Checks if a node has any children
function hasChildNode(parentNode) {
	for (i=0; i< nodes.length; i++) {
		var nodeValues = nodes[i].split("|");
		if (nodeValues[1] == parentNode) return true;
	}
	return false;
}
// Checks if a node is the last sibling
function lastSibling (node, parentNode) {
	var lastChild = 0;
	for (i=0; i< nodes.length; i++) {
		var nodeValues = nodes[i].split("|");
		if (nodeValues[1] == parentNode)
			lastChild = nodeValues[0];
	}
	if (lastChild==node) return true;
	return false;
}
// Adds a new node in the tree
function addNode(parentNode, recursedNodes) {
	for (var i = 0; i < nodes.length; i++) {
		var nodeValues = nodes[i].split("|");
		if (nodeValues[1] == parentNode) {
			var ls	= lastSibling(nodeValues[0], nodeValues[1]);
			var hcn	= hasChildNode(nodeValues[0]);
			var ino = isNodeOpen(nodeValues[0]);
			// Write out line & empty icons
			for (g=0; g<recursedNodes.length; g++) {
				if (recursedNodes[g] == 1)
					document.write("<img src=\""+imgpath+"line.gif\" align=\"absbottom\" alt=\"\" />");
				else
					document.write("<img src=\""+imgpath+"empty.gif\" align=\"absbottom\" alt=\"\" />");
			}
			// put in array line & empty icons
			if (ls) recursedNodes.push(0);
			else recursedNodes.push(1);
			// Write out join icons
			if (hcn) {
				if (ls) {
					document.write("<img onclick=\"javascript: oc(" + nodeValues[0] + ", 1);\" id=\"join" + nodeValues[0] + "\" src=\""+imgpath);
					 	if (ino) document.write("minus");
						else document.write("plus");
					document.write("bottom.gif\" align=\"absbottom\" alt=\"Open/Close node\" />");
				} else {
					document.write("<img onclick=\"javascript: oc(" + nodeValues[0] + ", 0);\" id=\"join" + nodeValues[0] + "\" src=\""+imgpath);
						if (ino) document.write("minus");
						else document.write("plus");
					document.write(".gif\" align=\"absbottom\" alt=\"Open/Close node\" />");
				}
			} else {
				if (ls) document.write("<img src=\""+imgpath+"joinbottom.gif\" align=\"absbottom\" alt=\"\" />");
				else document.write("<img src=\""+imgpath+"join.gif\" align=\"absbottom\" alt=\"\" />");
			}
			// Start link
			if(hasAction == "true"){
				document.write("<a href=\"" + nodeValues[3] + "\" onmouseover=\"window.status='" + nodeValues[2] + "';return true;\" onmouseout=\"window.status=' ';return true;\">");	
			}
			// Write out checkbox
			document.write("<input type=\"checkbox\" id=\"check" + nodeValues[0] + "parent"+nodeValues[1]+"\"");
			var checkstatus = setCheckNode(nodeValues[0]);
			if(checkstatus == true)
				document.write(" checked=true ");
				
				
			if(readonly == "true"){
				document.write(" onclick=\"return false;\" ");
			}else{
				document.write(" onclick=\"checkelement('0','" + nodeValues[0] + "',this.checked);\" ");
				
			}
			document.write("name=\"name" + nodeValues[1] + "\"/>");
			// Write out node name
			document.write(nodeValues[2]);
			// End link
			if(hasAction == "true")
				document.write("</a>");
			document.write("<br>");
			// Write out hidden
			document.write("<input type=\"hidden\" id=\"hide" + nodeValues[0]+"\" name=\""+checkName+"\"");
			if(isNodeChecked(nodeValues[0],nodeValues[1]) == true)
			 	document.write("value=\""+nodeValues[0]+"\"");
			document.write("/>");
			// If node has children write out divs and go deeper
			if (hcn) {
					document.write("<div id=\"div" + nodeValues[0] + "\"");
						if (!ino){
								document.write(" style=\"display: none;\"");
						}
					document.write(">");
				addNode(nodeValues[0], recursedNodes);
				document.write("</div>");
			}
			// remove last line or empty icon
			recursedNodes.pop();
		}
	}
}

function setNodeChecked(check_node,checkparent_node,node_checked){
	document.getElementById("check"+check_node+"parent"+checkparent_node).checked = node_checked;
	if(node_checked == true)
		document.getElementById("hide"+check_node).value = check_node;
	else
		document.getElementById("hide"+check_node).value = null;
}
function checkelement(start,select_node,nodechecked){
	var other_nodes = hasChildNode(select_node);
	if(nodechecked == true){
		document.getElementById("hide"+select_node).value = select_node;
		if(getSameSubNodeAllChecked(getParentNodeId(select_node)) == true){
			setParentNodeStatus(select_node,true);
		}
	}else{
		document.getElementById("hide"+select_node).value = null;
		setParentNodeStatus(select_node,false);
	}	
	if(other_nodes == true){
		for (var i=start; i< nodes.length; i++) {
			var nodeValues = nodes[i].split("|");
			if (nodeValues[1] == select_node){
				setNodeChecked(nodeValues[0],nodeValues[1],nodechecked);
				checkelement(i+1,nodeValues[0],nodechecked);
			}
		}
	}
}
function isNodeChecked(nodeid,parentid){
  return document.getElementById("check"+nodeid+"parent"+parentid).checked;
}
function setCheckNode(selectId){
	if(selectId == null) return false;
	for(var i=0;i<selectNodes.length;i++){
		if(selectId == selectNodes[i]){
				return true;
				break;
		}
	}
	return false;
}
function getParentNodeId(nodeid){
	for (var i=0; i< nodes.length; i++) {
		var nodeValues = nodes[i].split("|");
		if (nodeValues[0] == nodeid){
			return nodeValues[1];
			break;
		}
	}
}
function getSameSubNodeAllChecked(parentid){
	for (var i=0; i< nodes.length; i++) {
		var nodeValues = nodes[i].split("|");
		if (nodeValues[1] == parentid){
			if(document.getElementById("check"+nodeValues[0]+"parent"+nodeValues[1]).checked == false){
				return false;
				break;
			}
		}
	}
	return true;
}
function hasParentNode(parentid){
	for (var i=0; i< nodes.length; i++) {
		var nodeValues = nodes[i].split("|");
		if (nodeValues[0] == parentid){
			return true;
			break;
		}
	}
	return false;
}
function setParentNodeStatus(nodeid,status){
	for (var i=0; i< nodes.length; i++) {
		var nodeValues = nodes[i].split("|");
		if (nodeValues[0] == nodeid){		
			if((hasParentNode(nodeValues[1]) == true) && (isNodeChecked(nodeValues[1],getParentNodeId(nodeValues[1])) != status)){
				var parentId = getParentNodeId(nodeValues[1]);
				setNodeChecked(nodeValues[1],parentId,status);
				break;
			}
		}
	}
}

// Opens or closes a node
function oc(node, bottom) {
	var theDiv = document.getElementById("div" + node);
	var theJoin	= document.getElementById("join" + node);
//	var theIcon = document.getElementById("icon" + node);

	if (theDiv.style.display == 'none') {
		if (bottom==1) theJoin.src = icons[3].src;
		else theJoin.src = icons[2].src;
		//theIcon.src = icons[5].src;
		theDiv.style.display = '';
	} else {
		if (bottom==1) theJoin.src = icons[1].src;
		else theJoin.src = icons[0].src;
		//theIcon.src = icons[4].src;
		theDiv.style.display = 'none';
	}
}
// Push and pop not implemented in IE(crap!    don?t know about NS though)
if(!Array.prototype.push) {
	function array_push() {
		for(var i=0;i<arguments.length;i++)
			this[this.length]=arguments[i];
		return this.length;
	}
	Array.prototype.push = array_push;
}
if(!Array.prototype.pop) {
	function array_pop(){
		lastElement = this[this.length-1];
		this.length = Math.max(this.length-1,0);
		return lastElement;
	}
	Array.prototype.pop = array_pop;
}