ztree使用方法

① 使用ztree 怎样向后台传送数据

传数据的方式有很多种，我先提两个方式，你看看哪种是你的应用情况。
第一种：使用了ztree的复选框节点，把选中的节点信息传递到后台。
第二种：点击节点，触发事件，需要传递此节点的信息。

② jquery ztree如何让没有子节点的父节点样式显示为文件夹

1、新建一个html文件，命名为test.html。

③ ztree 异步加载时，如何展开某一个节点.有什么好的方法

呵呵，是不是敲字错误闹得？ 的确看起来很费解。
大概理解，异步加载每次只加载一级节点，觉得不爽，想全部加载并且展开对吗？
那么我的回答如下：
1、使用了异步加载 又要全部展开这个需求比较矛盾，还不如一次性全部加载后（使用异步加载时也完全可以后台一次性生成全部子孙节点一起加载的），直接全部展开。因为异步加载本来就是为了优化性能，这样的需求异步加载没有什么优势。
2、如果一定要使用，可以利用 onAsyncSuccess 回调在每次异步加载完毕后，利用expandNode 方法将新加载的父节点逐一展开。。这样下去就实现了（在我即将发布的 v3.2 中将会提供这种操作的Demo）

④ zTree getCheckedNodes 怎么使用这个方法获取到父节点

getCheckedNodes 获取了所有被选择的节点，那就从这些节点中找父节点：
1、父节点一般都有子节点
2、子节点的上级就是父节点

⑤ ztree树插件的使用

这几个做项目遇到一个上千节点的树结构，在考虑性能的前提下，直接用element的树组件会使系统页面卡顿现象，之后查询解决办法，偶遇ztree，这是一个树插件，在一次加载大量数据时有较好的性能表现，原理是，对于不展开的节点不进行渲染。官方解释如下：

monitor-video文件

⑥ ztree在使用的时候，展开所有的子节点的时候，会撑大整个父盒子怎么解决

获取 id 为 tree 的 zTree 对象
var treeObj = $.fn.zTree.getZTreeObj("tree");
获取全部节点数据
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getNodes();
for(var i=0;i<nodes.length;i++){
alert(nodes[i].id); //获取每个节点的id
}
获取当前被勾选的节点集合
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getCheckedNodes(true);
for(var i=0;i<nodes.length;i++){
alert(nodes[i].id); //获取每个节点的id
}
获取当前被选中的节点数据集合
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getSelectedNodes();
for(var i=0;i<nodes.length;i++){
alert(nodes[i].id); //获取每个节点的id
}

⑦ ztree树菜单怎么不按照id顺序排列树

初始化ztree树的方法：
zTreeObj = $.fn.zTree.init($("#tree"), setting, zTreeNodes);

其中zTreeNodes就是树的数据，zTreeNodes是一个对象数组，你可以给该对象数组排序，可以不按id顺序显示的。

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

⑨ 在vue中使用ztree树形组件，如何将ztree图片,改成字体图标呢求解答求思路

使用npm install jquery –save 在项目中安装ztree依赖文件 jquery;
在index.html里面引用ztree样式文件zTreeStyle.css（前面的图标可以自定义可以参考官网）

3.在项目中引入ztree文件，在main.js中引入

网上给的资料是在这里同时引入jquery；但是项目中引入 报错

import from‘jquery′−在你的zTree.vue单文件中引入importfrom‘jquery′−在你的zTree.vue单文件中引入import from ‘jquery’
4.在template中创建盒子,一定要给盒子相应的高度

<div class="tree-box" >
<ul id="treeDemo" class="ztree" ></ul>
</div>

5.在 .vue文件中data配置setting 树，以及定义存放数据的zNodes

6.使用axios 后台请求数据,下图使用请求方式是封装好的

ok完成（希望对你有帮助）

⑩ zTree获取当前节点的下一级子节点数实例

使用zTree插件实现树形图中，需要获取当前点击的父节点的子节点数的需求，使用treeNode.children获取子节点数据集合,使用length方法获取集合长度。
将当前节点的treeNode传入即可调用。
/*查找当前节点下一级的子节点数*/
function
findNodes(treeNode)
{
var
count;
/*判断是不是父节点,是的话找出子节点个数，加一是为了给新增节点*/
if(treeNode.isParent)
{
count
=
treeNode.children.length
+
1
;
}
else
{
/*如果不是父节点,说明没有子节点,设置为1*/
count
=
1;
}
return
count;
}
以上这篇zTree获取当前节点的下一级子节点数实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。