ztree checkbox与radio共存问题

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>ZTREE DEMO - radio&checkbox</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="js/demo.css" type="text/css">
<link rel="stylesheet" href="js/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script>
<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>
</HEAD><BODY> <div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div> </div>
</BODY>
</HTML>

调试易

ztree checkbox与radio共存问题

解决方案 »