Question

ztree如何实现真正的单选?

Answer 1

在ztree中使用单选->复选层次结构
起因
要使用zTree实现该功能：选中状态在各个条件（Linux_ipfwd,Linux_ipsec,usdpaa_hello-reflector,usdpaa_rc_ipfwd）之间互斥，当状态切换时自动取消上个属性下的所有子选项。
解决
因为zTree中单选，复选状态都是使用图片表示的，然后提供接口根据half，checked等属性来返回节点的状态。虽然这样可以灵活的的对节点进行操作，但去失去了最简单的提交方式（submit form）。
所以我们首先将zTree的图片按钮还原成html按钮，这个在zTree中已经提供了demo，我们只要根据demo中的方式来添加自定义控件，代码如下：var _handles = {
0:function (treeNode) {
return "";
},
1:function (treeNode) {
return "";
},
2:function (treeNode) {
return "";
}
};
var IDMark_A = "_a";
function addDiyDom(treeId, treeNode) {
var aObj = $("#" + treeNode.tId + IDMark_A);
aObj.before(_handles[treeNode.level](treeNode));
var btn = $("#fsl_" + treeNode.tId);
if (btn) {
if (treeNode.level == 1) {
btn.bind("click", function () {
click_v1(treeNode);
});
} else if (treeNode.level == 2) {
btn.bind("change", function () {
change_v2(treeNode, btn);
});
}
}
}
这里比较重要的是click_v1，change_v2这两个绑定函数，click_v1绑定到单选按钮的click事件，change_v2绑定到复选框的change事件。代码及相关注释如下：//改变节点状态（选中／取消选中）
function changeNode(node, status) {
var btn = $("#fsl_" + node.tId);
if (btn.attr("checked") != status) {
$("#fsl_" + node.tId).attr("checked", Boolean(status));
}
}
//判断节点是否选中
function isSelectNode(node) {
return $("#fsl_" + node.tId).attr("checked");
}
//判断节点的子节点是否全部选中
function isSelectAllChildNoes(node) {
var isSelectAll = true;
var childNodes = node.children;
if (childNodes) {
for (var i = 0; i < childNodes.length; i++) {
if (!isSelectNode(childNodes[i])) {
isSelectAll = false;
break;
}
}
}
return isSelectAll;
}
//改变节点的所有子节点状态（选中／取消选中）
function changeAllChildNoes(node, status) {
var childNodes = node.children;
if (childNodes) {
for (var i = 0; i < childNodes.length; i++) {
changeNode(childNodes[i], status);
changeAllChildNoes(childNodes[i], status);
}
}
}
//改变节点的所有父节点状态（选中／取消选中）
function changeAllParentNoes(node, status) {
var parentNode = node.getParentNode();
if (parentNode) {
if (status) {
if (isSelectAllChildNoes(parentNode)) {
changeNode(parentNode, status);
}
} else {
changeNode(parentNode, status);
}
changeAllParentNoes(parentNode, status);
}
}
//选中的单选框tId
var global_mark = {};
//复选框改变状态所触发的事件
function change_v2(treeNode, btn) {
if (btn.attr("checked")) {
var parentNode = treeNode.getParentNode();
if (!isSelectNode(parentNode)) {
changeNode(parentNode, true);
click_v1(parentNode);
}
}
}
//单选框改变状态所触发的事件
function click_v1(treeNode) {
if (treeNode.tId != global_mark[treeNode.type]) {
var lastNode = treeObj.getNodeByTId(global_mark[treeNode.type]);
if (lastNode) {
changeAllChildNoes(lastNode, false);
}
global_mark[treeNode.type] = treeNode.tId;
}
}
这样就实现了先前所提到的功能。
文章作者：iitshare
本文地址：http://www.iitshare.com/ztree-radio-checkbox.html
版权所有 © 转载时必须以链接形式注明作者和原始出处！
结语：
，change_v2绑定到复选框的change事件。代码及相关注释如下：//改变节点状态（选中／取消选中）