ztree树的使用

记录项目中关于ztree插件的使用。

实现的功能有：排序、迁移、搜索、删除、右键菜单、重命名、新增。

这里是由于项目需要不同人员的权限不同，右键菜单选项不同；如果你也有这种需求，我觉得这里有两种实现方式，一是像这里写的，点击右键时去后代判断，根据判断结果再去显示；二是在获取树的信息的时候，把判断所需要的必要参数直接放在json里一块返回来，这样前台只需要直接判断就行了。

实现的效果是：输入框内只要有输入变化，就会执行一次搜索方法雹肢轮

火狐有一个bug，就是假源信如树中含有一个名字为“haha”的节点和名字为“哈哈”的节点，这时你用中文输入法去打“哈”这个字，发现只能输入英文。。扯远了，当然这个可以不做。重点是搜索方法。

其实获取到含有搜索关键字的所有节点很简单，ztree已经封装好了，就是getNodesByParamFuzzy()。

但是，想要的效果是，执行下一次搜索时，要把上一次搜索展开的节点全都关闭，再去展开这种的符合条件的节点。

按道理讲，也很简单，调用expandAll(false)就可以将节点都关闭，然后再去展开符合条件的节点就行了。

但是这样写了以后，发现上次搜索展开的节点并不会全部关闭，而是有的关闭了，有的还是展开的。

在网上搜了很久，在ztree的github项目的issue中找到了一点线索，说展开和关闭都是有动画的。

我想可能是前面的关闭所有节点还没有执行完，与后面的展开节点冲突了。

于是就饥虚去api里找，发现有expandSpeed这个参数设置，将动画关闭，这个bug竟然好了。

具体的关于dom的内部原理我不了解。

这里实现的效果是：鼠标移动到某个节点上时，节点后面会出现一个图标，点击图标，实现something

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

---