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);重新选中被勾选的节点
}
}