本文介绍如何使用ZTree插件实现父节点为单选框、子节点为复选框的功能。通过自定义DOM元素及事件绑定，实现了父子节点间的选择联动。此方案适用于基于jQuery的前端项目。
前几天同事遇到一个问题，他要做一个树，由于项目用的是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
+ "' onfocus='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
+ "' onfocus='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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
