记录项目中关于ztree插件的使用。
实现的功能有：排序、迁移、搜索、删除、右键菜单、重命名、新增。
这里是由于项目需要不同人员的权限不同，右键菜单选项不同；如果你也有这种需求，我觉得这里有两种实现方式，一是像这里写的，点击右键时去后代判断，根据判断结果再去显示；二是在获取树的信息的时候，把判断所需要的必要参数直接放在json里一块返回来，这样前台只需要直接判断就行了。
实现的效果是：输入框内只要有输入变化，就会执行一次搜索方法
火狐有一个bug，就是假如树中含有一个名字为“haha”的节点和名字为“哈哈”的节点，这时你用中文输入法去打“哈”这个字，发现只能输入英文。。扯远了，当然这个可以不做。重点是搜索方法。
其实获取到含有搜索关键字的所有节点很简单，ztree已经封装好了，就是getNodesByParamFuzzy()。
但是，想要的效果是，执行下一次搜索时，要把上一次搜索展开的节点全都关闭，再去展开这种的符合条件的节点。
按道理讲，也很简单，调用expandAll(false)就可以将节点都关闭，然后再去展开符合条件的节点就行了。
但是这样写了以后，发现上次搜索展开的节点并不会全部关闭，而是有的关闭了，有的还是展开的。
在网上搜了很久，在ztree的github项目的issue中找到了一点线索，说展开和关闭都是有动画的。
我想可能是前面的关闭所有节点还没有执行完，与后面的展开节点冲突了。
于是就去api里找，发现有expandSpeed这个参数设置，将动画关闭，这个bug竟然好了。
具体的关于dom的内部原理我不了解。
这里实现的效果是：鼠标移动到某个节点上时，节点后面会出现一个图标，点击图标，实现something
ztree 父节点的子节点全部被选中时会选中父节点是因为没有插入新的父节点。使子节点全选中时不关联到父节点步骤如下：
1、首先第一步就是进行在新建思维导图中，右击点击“编辑节点”，修改名称即可。
2、接着就是进行点击“插入”，点击“新的父节点”。
3、然后就是进行右击，点击“编辑节点”，输入名称，如下图所示。
4、最后就是进行点击“插入”，点击“新的父节点”，点击左边的子节点，点击“插入”，点击“新的父节点”即可。
1、新建一个html文件，命名为testhtml。
2、在testhtml文件中，使用div标签创建一个模块，再使用p标签，b标签创建测试的内容。
3、在testhtml文件中，设置b标签的id属性为son，主要用于下面通过该id获得b标签对象。
4、在testhtml文件中，使用button标签创建一个按钮，按钮名称为“获得父节点的父节点的兄弟节点内容”。
5、在testhtml文件中，给button按钮绑定onclick点击事件，当按钮被点击时，执行getcon（）函数。
6、在js标签内，创建getcon()函数，在函数内，通过id（son）获得b标签对象 ，重复使用parent()方法获得b标签的父节点的父节点，再使用siblings()获得b标签的父节点的父节点的兄弟节点，通过eq(0)获得第一个兄弟节点，使用text()获得兄弟节点的内容。最后，使用alert()方法将内容输出。
var zTree = $fnzTreegetZTreeObj('tree'); // 获取zTree对象，tree是你存放ztree的容器id
## 接下来你若刷新你修改的部分的话，修改一般使用了 beforeRename 或 onRename
##1、upDateNode(node) // 此方法更新单个节点，需要注意的是，发现这个方法必须要在ajax或是post之类的请求中才能刷新成功。
比如第一种情况，直接调用：
beforeRename(treeid,node,newName){
var zTree = $fnzTreegetZTreeObj('tree');
nodename = newName + "123"; // 此处手动修改了node的名字
zTreeupDateNode(node); // 执行完会发现并没有刷新出来，打印node发现名字确实改了。
}
第二种情况，套在ajax中使用：
beforeRename(treeid,node,newName){
$post(url,{},function(){
var zTree = $fnzTreegetZTreeObj('tree');
nodename = newName + "123"; // 此处手动修改了node的名字
zTreeupDateNode(node); // 执行完节点名字刷新成功
});
}
##2、reAsyncChildNodes(node,type,open) // 此方法更新node节点及其子节点，node参数传null时更新整个树，用法跟上面一样，主要说明另两个参数：
type:直接传refresh 相当于清空后重新加载一下，变相刷新，一般用于修改过子节点。 不等于refresh时一般用于新增过子节点，
open:true时不展开该节点，不等于true或不传默认是展开
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 401 Transitional//EN">
<html>
<head>
<title>checkbox</title>
<script src="js/jquery-132js" type="text/javascript"></script>
<script src="js/1js" type="text/javascript"></script>
</head>
<body>
<table id="table1">
<tr>
<td><input type="checkbox" value="1"/>1</td>
<td id="k_1"><input type="text" name="student" id="s_1" readonly="true"/></td>
</tr>
<tr>
<td><input type="checkbox" value="2"/>2</td>
<td id="k_2"><input type="text" name="student" id="s_2" readonly="true"/></td>
</tr>
<tr>
<td><input type="checkbox" value="3"/>3</td>
<td id="k_3"><input type="text" name="student" id="s_3" readonly="true"/></td>
</tr>
<tr>
<td><input type="checkbox" value="4"/>4</td>
<td id="k_4"><input type="text" name="student" id="s_4" readonly="true"/></td>
</tr>
</table>
</body>
</html>
-------------------------------------------------------------
$(document)ready(function() {
$("td[id^='k_']")hide();
var check = $(":checkbox"); //得到所有被选中的checkbox
var actor_config; //定义变量
checkeach(function(i){
actor_config = $(this);
actor_configclick(
function(){
if($(this)attr("checked")==true){
$("#k_"+$(this)val())show();
}else{
$("#k_"+$(this)val())hide();
}
}
);
});
});
使用zTree插件实现树形图中，需要获取当前点击的父节点的子节点数的需求，使用treeNodechildren获取子节点数据集合,使用length方法获取集合长度。
将当前节点的treeNode传入即可调用。
/查找当前节点下一级的子节点数/
function
findNodes(treeNode)
{
var
count;
/判断是不是父节点,是的话找出子节点个数，加一是为了给新增节点/
if(treeNodeisParent)
{
count
=
treeNodechildrenlength
+
1
;
}
else
{
/如果不是父节点,说明没有子节点,设置为1/
count
=
1;
}
return
count;
}
以上这篇zTree获取当前节点的下一级子节点数实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
1、getNodeByParam 方法可以找到指定的节点数据
2、selectNode 方法可以选中节点，如果是 checkbox 的勾选，那么请使用 checkNode 方法
希望能帮助到你！
以上就是关于ztree树的使用全部的内容，包括:ztree树的使用、为什么ztree 父节点的子节点全部被选中时会选中父节点，怎样使子节点全选中时不关联到父节点、jquery ztree如何让没有子节点的父节点样式显示为文件夹等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）