最近在做一个项目时碰到一个特殊需求,需要ztree单选和多选共存。但是看ztree官方并没有提供类似功能,所以决自己动手。
下面是写完后的效果:
话不多说,贴代码,代码写的比较简单暴力。若有问题和可改进地方多谢指出。感激不尽!!
var ztree;
var IDMark_A = "_a";
var setting = {
view: {
addDiyDom: addDiyDom
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "parentId",
rootPId: -1
},
key: {
name: 'nameCh',
url: "nourl"
}
},
};
function addDiyDom(treeId, treeNode) {
var aObj = $("#" + treeNode.tId + IDMark_A);
//此处单选多选规则可以根据你们数据自定义控制
if (treeNode.level != 0 && treeNode.getParentNode().type == 3) {
var editStr = "<input type='radio' class='radioAndCheckboxBtn' id='radio_" +treeNode.id+ "' name='radio_"+treeNode.getParentNode().id+"' value='"+treeNode.id+"' onfocus='this.blur();'></input>";
aObj.before(editStr);
var btn = $("#radio_" + treeNode.id);
if (btn) btn.bind("click", function () {
checkAllParentNode(treeNode, btn);
});
} else {
var editStr = "<input type='checkbox' class='radioAndCheckboxBtn' id='checkbox_" + treeNode.id + "' value='"+treeNode.id+"' onfocus='this.blur();'></input>";
aObj.before(editStr);
var btn = $("#checkbox_" + treeNode.id);
if (btn) btn.bind("change", function () {
checkAccessories(treeNode, btn);
})
}
}
/*
单选和多选勾选之后会触发
*/
function checkAccessories(treeNode, btn) {
debugger
var checkedRadio = getCheckedRadio("radio_" + treeNode.id);
//如果多选节点被选中,且单选节点没有选中的,则默认选中第一个单选节点,否则取消勾选子节点
if (btn.prop("checked")) {
var radioNode=treeNode.children;
if (!checkedRadio && radioNode.length>0) {
$("#radio_" + treeNode.children[0].id).prop("checked", true);
}
checkAllParentNode(treeNode)
} else {
if(checkedRadio){
checkedRadio.prop("checked", false);
}
cancelCheck(treeNode)
}
}
/*
当勾选子节点时,检查所有子节点的上层节点,若没勾上则都勾上
*/
function checkAllParentNode(treeNode) {
debugger
if(treeNode.getParentNode()){
$("#checkbox_"+treeNode.getParentNode().id).prop("checked", true)
checkAllParentNode(treeNode.getParentNode())
}
}
/*
当父节点取消勾选时,递归取消所有下层子节点勾选
*/
function cancelCheck(treeNode){
if(treeNode.isParent){
var childrenNodes = treeNode.children;
if (childrenNodes) {
for (var i = 0; i < childrenNodes.length; i++) {
cancelCheck(childrenNodes[i])
$("#checkbox_"+childrenNodes[i].id).prop("checked", false)
$("#radio_"+childrenNodes[i].id).prop("checked", false)
}
}
}
}
/*
获取多选节点的所有单选子节点,返回选中的节点
*/
function getCheckedRadio(radioName) {
var r = document.getElementsByName(radioName);
for (var i = 0; i < r.length; i++) {
if (r[i].checked) {
return $(r[i]);
}
}
return null;
}
function checkSelectedBtn(id) {
var checkbox_btn = $("#checkbox_" + id);
var radio_btn = $("#radio_" + id);
radio_btn.attr("checked", true)
checkbox_btn.attr("checked", true)
}