ztree实现radio,checkbox共存

最近在做一个项目时碰到一个特殊需求,需要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)
}

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值