ztree中如何获取所有节点？ztree插件怎么实现搜索

本文目录

• ztree中如何获取所有节点
• ztree插件怎么实现搜索
• ztree怎么自定义图标
• ztree中如何获得选中的checkbox的值
• ztree中怎样获取选中节点的父节点及自己的index
• ztree 的 字母z 是什么意思
• ztree怎么获取节点选中变化的节点

ztree中如何获取所有节点

$.fn.zTree.init($(“#treeDemo“), setting, zNodes);
zTree = $.fn.zTree.getZTreeObj(“treeDemo“);
var nodes=zTree.getNodes();
var nodes_array = zTree.transformToArray (nodes);
for(var i=0;i《nodes_array.length;i++){
alert(nodes_array[i].name);
}

//下面是api，自己不会看么，zTreeObj.getNodes是所有节点数据都在里面，自己不会取，就不要瞎叫唤，自己可以用火狐看里面的数据是不是都有
zTreeObj.getNodes
概述[ 依赖 jquery.ztree.core 核心 js ]

获取 zTree 的全部节点数据
请通过 zTree 对象执行此方法。
Function 参数说明
返回值Array(JSON)
全部节点数据
1、Array 仅仅是根节点的集合（默认情况子节点都处于 children 属性下）；
2、如需遍历全部节点需要利用递归，或利用 transformToArray 方法 将数据变成简单的 Array 集合
3、对于异步加载模式下，尚未加载的子节点是无法通过此方法获取的。
function 举例
1. 获取全部节点数据
var treeObj = $.fn.zTree.getZTreeObj(“tree“);
var nodes = treeObj.getNodes();

ztree插件怎么实现搜索

1. 利用zTree显示完整树结构；
2. 根据关键字，筛选出不包含关键字的叶子节点，并将这些不符合条件的叶子节点全部隐藏
主要代码
1. 页面部分
1. html页面需要引入以下资源
《!-- jquery包，ztree依赖jquery --》 《script type=“text/javascript“ src=“ztree/js/jquery-1.4.4.min.js“》《/script》《!-- ztree核心包，ztree核心功能 --》 《script type=“text/javascript“ src=“ztree/js/jquery.ztree.core-3.5.min.js“》《/script》《!-- ztree exhide包，ztree隐藏显示结点需要此包支持 --》 《script type=“text/javascript“ src=“ztree/js/jquery.ztree.exhide-3.5.min.js“》《/script》12345678

2. html 页面结构
《div class=“container“》
《div class=“search-bar“》
《input id=“keyword“ type=“text“ placeholder=“请输入...“》
《button id=“search-bt“》搜索《/button》
《/div》
《div class=“content“》
《!-- 用于显示ztree的html元素的class一定要设置为ztree--》
《ul id=“tree-obj“ class=“ztree“》《/ul》
《/div》
《/div》12345678910

2. JS代码
下面只给出用于模糊搜索的核心代码
var hiddenNodes=; //用于存储被隐藏的结点//过滤ztree显示数据function filter(){
//显示上次搜索后背隐藏的结点
zTreeObj.showNodes(hiddenNodes); //查找不符合条件的叶子节点
function filterFunc(node){
var _keywords=$(“#keyword“).val(); if(node.isParent||node.name.indexOf(_keywords)!=-1) return false; return true;
}; //获取不符合条件的叶子结点
hiddenNodes=zTreeObj.getNodesByFilter(filterFunc); //隐藏不符合条件的叶子结点
zTreeObj.hideNodes(hiddenNodes);
};

ztree怎么自定义图标

样式定义在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换了个风格。

ztree中如何获得选中的checkbox的值

ztree中获得选中的checkbox的值的方法和操作步骤如下：

1、首先，创建一个HTML。 HTML是网页的基础和框架，如下图所示。

2、其次，完成上述步骤后，在html中添加测试数据以测试是否已选中该复选框，如下图所示。

3、接着，完成上述步骤后，编写javascript， 单击该按钮时，将触发事件以获取选定的复选框值，如下图所示。

4、然后，完成上述步骤后，美化页面，添加样式文件，并引入jquery文件，如下图所示。

5、最后，完成上述步骤后，打开浏览器，打开测试页面，然后进行测试，如下图所示。这样，问题就解决了。

ztree中怎样获取选中节点的父节点及自己的index

1、首先准备一个ztree结构树，如下图所示。

2、接下来看一下这里的代码，如下图所示，这里用的是angular和ztree的搭配。

3、接着可以通过getCheckedNodes来获取所有选中的节点，如下图所示。

4、然后可以打断点看一下，这里获取的是所有选中的节点，包括父节点，如下图所示。

5、接着可以看某一条记录里面都有isParent属性，这是判断是不是父节点的属性，如下图所示。

6、最后就可以通过上面的线索获取所有的最后一级节点了，如下图所示。

ztree 的 字母z 是什么意思

zTree

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
软件名称
zTree
软件版本
v3.0
最新版本
v3.0
软件定义
开源免费的软件
优 点
优异的性能、灵活的配置
目录
1 zTree 介绍
2 zTree 的特点
3 zTree 的优势

zTree 介绍

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发，尤其是 树状菜单、树状数据的Web显示、权限管理等等。
zTree 是开源免费的软件（MIT 许可证）。在开源的作用下，zTree 越来越完善，目前已经拥有了不少粉丝，并且今后还会推出更多的 zTree 扩展功能库，让 zTree 更加强大。

zTree 的特点

● zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
● 采用了延迟加载技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
● 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
● 支持 JSON 数据
● 支持静态和 Ajax 异步加载节点数据
● 支持任意更换皮肤 / 自定义图标（依靠css）
● 支持极其灵活的 checkbox 或 radio 选择功能
● 提供多种事件响应回调
● 灵活的（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
● 在一个页面内可同时生成多个 Tree 实例
● 简单的参数配置实现 灵活多变的功能

zTree 的优势

zTree 的作者利用业余时间不断改进 zTree 功能，并且还能及时与用户沟通，及时回复各种疑问，便于新用户快速掌握。目前越来越多的用户都使用 zTree 替换了系统中原有的 树插件，这其中包括最近刚发布最新版本的QUI框架。
在线演示：
zTree in Google Code：
zTree in Github：
zTree in jQuery Plugins：
zTree Blog in iteye：
zTree Blog in oschina：

ztree怎么获取节点选中变化的节点

《script》
function filter(node) { //过滤器直选中2级节点累加
return (node.level == 2 && node.checked == true);
}

var setting = { //设置
check: {
enable: true
},
callback: {
onCheck: onCheck
}};

function onCheck(e, treeId, treeNode){ //这是将所有选中节点的名字 用,分割做拼接 用于持久化到数据库
var zTree = $.fn.zTree.getZTreeObj(“tree“).getNodesByFilter(filter);
var choose = ““;
for (var i=0;i《zTree.length;i++) {
if(zTree[i].name !=null)
choose +=(i == (zTree.length-1))?zTree[i].name:zTree[i].name+“,“;
}
$(“#ztreesnames“).val(choose);
treeIds();
}

function treeIds(){ //这是将选中的节点的id用;分割拼接起来,用于持久化到数据库
var zTreeO = $.fn.zTree.getZTreeObj(“tree“).getNodesByFilter(filter);
var idListStr = ““;
for (var i = 0; i 《 zTreeO.length; i++) {
if (zTreeO[i].id != null) {
idListStr+= (i == (zTreeO.length-1))?zTreeO[i].id:zTreeO[i].id+“;“;
}
};
$(“#ztreeids“).val(idListStr);