ztree如何实现真正的单选?

在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 = 0i <childNodes.lengthi++) {

if (!isSelectNode(childNodes[i])) {

isSelectAll = false

break

}

}

}

return isSelectAll

}

//改变节点的所有子节点状态（选中／取消选中）

function changeAllChildNoes(node, status) {

var childNodes = node.children

if (childNodes) {

for (var i = 0i <childNodes.lengthi++) {

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事件。代码及相关注释如下：//改变节点状态（选中／取消选中）

样式定义在metro.css文件里（或者是zTreeStyle.css……），其中可加载单个的图片，也可以从一张图片中根据坐标获取我们要用的图形。对metro.css比较重要的一个图片是metro.png，在图片中每个小方格是5px，在css中加载时按照横纵坐标进行图标的获取。

在ztree中，css主要用了两种方式来加载图标。第一种：根据背景图，图标大小，和坐标位置

第二种：直接加载图片

这两种方式，第二种比较常用，但是对于数据量大的情况，第一种方法貌似更好。对于我们想要修改的元素，可以先在网页中定位一下，找到它具体的class，然后来这里更改就可以了。

3.Bootstrap风格装饰ztree

以最近很流行的Bootstrap为例，给ztree装饰成Bootstrap的风格。上边我们已经分析过ztree是如何设定样式，这里我们只需要任选其一做更改就行了，鉴于它使用了大量以背景图片为基础的图标设定，我们最好还是设定成直接加载图片的比较方便，要不然改的数据太多了……

1）ztree也有黑白色的css、png成套的样式设置，为了更符合Bootstrap的图标样式，让它替换掉原有的css文件和彩色图标

如果页面框架是Bootstrap的，则在显示的时候根节点的图标是“破碎”的，经过查找发现，是根节点图标位置受到Bootstrap的影响，在css文件中找到设置它的位置，进行坐标更改

2）上边的步骤只能算是在ztree内部设定，还不算加上Boostrap的风格。不过，我们只需要再给它更换一个图标，看起来就有那么点味道了（为了展示方便，进行了换行处理）

这样就是另一种风格了，如果你想要自定义其它风格，根据上边的demo来做，应该不算什么难事了。

小结：

ztree中有自定义图标的方法，但是在遇到图标显示不完整的时候还是没办法解决，最后更改了css文件才让图标显示完整。在解决这个问题的过程中了解了ztree图标的加载过程，所有顺便练练手，直接从CSS来给ztree换了个风格。

---