zTree实现树节点单选的两种方式

方式一:利用setting配置来实现单选按钮功能

        原理:取消父子节点联动,设置节点的选择框为radio单选框。

   代码设置:    

var setting = {
        
        ......

        check: { //表示tree的节点在点击时的相关设置
            enable: true, //是否显示radio/checkbox
            autoCheckTrigger: false,
            chkStyle: "radio",//值为checkbox或者radio表示
            radioType:"all",
            chkboxType: {"Y": "", "N": ""}//表示父子节点的联动效果,不联动
        }

        ......
    };

chkStyle:"radio"   节点树样式展示

方式二:树节点为checkbox复选框时,利用树节点的节点选中回调函数来实现树节点单选

原理:取消树节点的父子节点联动,依靠每次勾选树节点时会触发勾选的回调函数,在回调函数中进行判断,

           如果是选中节点操作,先清空所有节点的选中状态,再设置被勾选的节点状态为选中。

chkStyle:"checkbox"   节点树样式展示

代码设置:

var setting = {

        ......

        check: { //表示tree的节点在点击时的相关设置
            enable: true, //是否显示radio/checkbox
            autoCheckTrigger: false,
            chkStyle: "checkbox",//值为checkbox或者radio表示
            chkboxType: {"Y": "", "N": ""}//表示父子节点的联动效果,这里设置不联动
        },

        callback: {
            onCheck: zTreeOnCheck,//勾选事件回调函数
            onClick: zTreeOnClick,//点击事件回调函数
            onAsyncSuccess: ztreeOnAsyncSuccess,//异步加载成功后执行的方法
        }

        ......
    };




function zTreeOnCheck(event, treeId, treeNode) {
        if(treeNode.checked){    //注意,这里的树节点的checked状态表示勾选之后的状态
            treeObj.checkAllNodes(false);//取消所有节点的选中状态
            treeObj.checkNode(treeNode,true,false,false);重新选中被勾选的节点
        }
}

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值