JQuery插件使用ZTree創建一個樹

前幾天同事遇到一個問題，他要做一個樹，由於項目用的是jQuery，所以引進了ZTree這樣比較方便一點，他做的這個數是父節點是單選框，孩子節點是複選框。就是下面的效果

其實這個不難，我在ZTree的官網上可以找到一些例子，http://www.ztree.me/v3/demo.php#_205。

其中就有

根據這兩個就改出了一個簡單的例子，

<SCRIPT type="text/javascript">
       
        //定義全局zTree,用於使用zTree.getNodesByParam("checked", true, null);取得選擇節點
        
	var zTree;
	var IDMark_A = "_a";
	var setting = {
		view : {
			addDiyDom : addDiyDom
		},
		data : {
			simpleData : {
				enable : true
			}
		}
	};

	var zNodes = [ {
		id : 1,
		pId : 0,
		name : "1",
		open : true
	}, {
		id : 11,
		pId : 1,
		name : "1-1"
	}, {
		id : 12,
		pId : 1,
		name : "1-2"
	}, {
		id : 13,
		pId : 1,
		name : "1-3"
	}, {
		id : 2,
		pId : 0,
		name : "2",
		open : true
	}, {
		id : 21,
		pId : 2,
		name : "2-1"
	}, {
		id : 22,
		pId : 2,
		name : "2-2"
	}, {
		id : 23,
		pId : 2,
		name : "2-3"
	}, {
		id : 3,
		pId : 0,
		name : "3",
		open : true
	}, {
		id : 31,
		pId : 3,
		name : "3-1"
	}, {
		id : 32,
		pId : 3,
		name : "3-2"
	}, {
		id : 33,
		pId : 3,
		name : "3-3"
	} ];
	//判斷節點是否在已選擇的節點中，判斷重複選擇
	function isNodeInChecked(curId) {
		if (zTree == null) {
			return false;
		}
		var selectedNodes = zTree.getNodesByParam("checked", true, null);
		var selectedNode;

		if (selectedNodes == null || selectedNodes.length == 0) {
			return false;
		}
		for ( var i = 0; i < selectedNodes.length; i++) {
			selectedNode = selectedNodes[i];
			if (selectedNode.id == curId) {
				return true;
			}
		}
		return false;
	}
	//自定義的樹形規則
	function addDiyDom(treeId, treeNode) {
		var aObj = $("#" + treeNode.tId + IDMark_A);
		if (treeNode.level == 0) {
			var editStr = "<input type='radio' class='radioBtn' id='radio_"
					+ treeNode.id + "_" + treeNode.pId
					+ "' οnfοcus='this.blur();'></input>";
			aObj.before(editStr);
			var btn = $("#radio_" + treeNode.id + "_" + treeNode.pId);
			if (btn) {
				btn.bind("click", function() {
					checkAccessories(treeNode, btn);
				});
			}

		} else {
			var editStr = "<input type='checkbox' class='checkboxBtn' id='checkbox_"
					+ treeNode.id
					+ "_"
					+ treeNode.pId
					+ "' name='checkbox_"
					+ treeNode.getParentNode().id
					+ "_"
					+ treeNode.pId
					+ "' οnfοcus='this.blur();'></input>";
			aObj.before(editStr);
			var btn = $("#checkbox_" + treeNode.id + "_" + treeNode.pId);
			if (btn) {

				btn.bind("change", function() {
					checkBrand(treeNode, btn);
				});
				var isNodeInChecked = false;
				var selectedNodes = null;
				if (zTree != null) {
					selectedNodes = zTree
							.getNodesByParam("checked", true, null);
				}

				var selectedNode;
				//初始化時判斷是否需要選擇，這裏可以去掉或者通過在zNodes中定義中添加checked:true來代替
				if (selectedNodes != null && selectedNodes.length > 0) {
					for ( var i = 0; i < selectedNodes.length; i++) {
						selectedNode = selectedNodes[i];
						if (selectedNode.id == treeNode.pId) {
							isNodeInChecked = true;
							break;
						}
					}
				}
				if (isNodeInChecked) {
					treeNode.checked = true;
					btn.attr("checked", true);
				}
			}

		}
	}
	
	//設置處treeNode節點外的其他父節點下的複選框爲false
	function checkQTAccessories(treeNode, btn) {
		if (!btn.attr("checked")) {
			//點擊的節點是否在已選的根節點中
			var isRootInChecked = isNodeInChecked(treeNode.id);
			if (!isRootInChecked) {
				//去除其餘根節點以及下級節點的選擇
				beforeCheckAccessories();
			}
			beforeCheckAccessories1(treeNode.pId);
			treeNode.checked = true;
			//節點下所有節點都勾選
			setChildSelected(treeNode, btn, true);
		} else {
			treeNode.checked = false;
			setChildSelected(treeNode, btn, false);
		}
	}
	
	function checkAccessories(treeNode, btn) {
		if (btn.attr("checked")) {
			//點擊的節點是否在已選的根節點中
			var isRootInChecked = isNodeInChecked(treeNode.id);
			if (!isRootInChecked) {
				//去除其餘根節點以及下級節點的選擇
				beforeCheckAccessories();
			}
			
			treeNode.checked = true;
			//節點下所有節點都勾選
			setChildSelected(treeNode, btn, true);
			beforeCheckAccessories1(treeNode.pId);
		} else {
			treeNode.checked = false;
			setChildSelected(treeNode, btn, false);
		}
	}
	
	function setChildSelected(treeNode, btn, status) {
		var children;
		if (treeNode.children == null) {
			return true;
		}
		var lenth = treeNode.children.length;
		if (lenth == 0) {
			return true;
		}
		for ( var i = 0; i < lenth; i++) {
			children = treeNode.children[i];
			$("#checkbox_" + children.id + "_" + children.pId).attr("checked",
					status);
			children.checked = status;
			btn = $("#checkbox_" + children.id + "_" + children.pId);
			rls = setChildSelected(children, btn, status);
			if (rls) {
				continue;
			}
		}

	}
	
	//wangwuyi  判斷勾選的複選框是在那個父類單選框下，把其他的父類單選框下的複選框設置爲false
	function beforeCheckAccessories1(pid) {
	   var selectedNodes = null;
		if (zTree != null) {
			selectedNodes = zTree.getNodesByParam("checked", false, null);
		}

		var selectedNode;
		if (selectedNodes == null || selectedNodes.length == 0) {
			return;
		}
		
		for ( var i = 0; i < selectedNodes.length; i++) {
			selectedNode = selectedNodes[i];
			selectedNode.checked = false;
			var pId = selectedNode.pId
			if(pid == pId){
			   //alert("hehe " + pid);
			}else{
			   $("#checkbox_" + selectedNode.id + "_" + selectedNode.pId)
							.attr("checked", false);
			}
	    }
	}
	
	function beforeCheckAccessories() {
		var selectedNodes = null;
		if (zTree != null) {
			selectedNodes = zTree.getNodesByParam("checked", true, null);
		}

		var selectedNode;
		if (selectedNodes == null || selectedNodes.length == 0) {
			return;
		}

		var parentNode;
		for ( var i = 0; i < selectedNodes.length; i++) {
			selectedNode = selectedNodes[i];
			selectedNode.checked = false;
			//alert("pId: "+selectedNode.pId);

			//自己編寫代碼

			if (selectedNode.level == 0) {
				$("#radio_" + selectedNode.id + "_" + selectedNode.pId).attr(
						"checked", false);
				parentNode = selectedNode;
			} else if (selectedNode.level == 1) {
				if (parentNode == null) {
					parentNode = selectedNode.getParentNode();
				}
				if (selectedNode.getParentNode() == parentNode) {
					$("#checkbox_" + selectedNode.id + "_" + selectedNode.pId)
							.attr("checked", true);
				} else {
					$("#checkbox_" + selectedNode.id + "_" + selectedNode.pId)
							.attr("checked", false);
				}
			}

			//自己編寫代碼結束

		}
		//alert(22);
	}

	function getCheckedBox(checkedName) {
		var r = document.getElementsByName(checkedName);
		for ( var i = 0; i < r.length; i++) {
			if (r[i].checked) {
				return $(r[i]);
			}
		}
		return null;
	}

	function checkBrand(treeNode, btn) {
	    //alert(12);
		if (btn.attr("checked")) {
			var isRootInChecked = isNodeInChecked(treeNode.rootId);
			if (!isRootInChecked) {
				beforeCheckAccessories();
				treeNode.checked = true;
				//treeNode.checked=false;
			}
			setParentNodeChecked(treeNode);
			setChildSelected(treeNode, btn, true);
			// setChildSelected(treeNode,btn,false);
		} else {
			treeNode.checked = false;
			setChildSelected(treeNode, btn, false);
		}
	}
	//複選框勾選時，將上級節點到根節點都勾選
	function setParentNodeChecked(treeNode) {
		var parentNode;
		if (treeNode == null) {
			return true;
		}
		if (treeNode.getParentNode() != null) {
			parentNode = treeNode.getParentNode();
			$("#checkbox_" + parentNode.id + "_" + parentNode.pId).attr(
					"checked", true);
			parentNode.checked = true;
			//wangwuyi 判斷勾選的複選框是在那個父類單選框下，把其他的父類單選框下的複選框設置爲false
			//alert(treeNode.id + "_" + treeNode.pId);
			var btn = $("#radio_" + treeNode.id + "_" + treeNode.pId);
			checkQTAccessories(treeNode,btn);
			return setParentNodeChecked(parentNode);
		} else {
			var pObj = $("#radio_" + treeNode.id + "_" + treeNode.pId);
			if (!pObj.attr("checked")) {
				treeNode.checked = true;
				pObj.attr("checked", true);
			}
			return true;
		}
	}

	$(document).ready(function() {
		zTree = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
	});
</SCRIPT>
<style type="text/css">
.radioBtn {
	height: 16px;
	vertical-align: middle;
}

.checkboxBtn {
	vertical-align: middle;
	margin-right: 2px;
}
</style>