本文目录
- ztree中让树默认合并状态怎样实现
- ztree中如何获取所有节点
- ztree中怎样获取选中节点的父节点及自己的index
- ztree中如何获得选中的checkbox的值
- 怎么获取到ztree上的所有节点
- ztree树菜单怎么不按照id顺序排列树
- ztree 的 字母z 是什么意思
- ztree怎么通过修改css改变字体和图标大小
- ztree如何实现真正的单选
- ztree怎么自定义图标
ztree中让树默认合并状态怎样实现
控制zTree节点的默认合并：
通过open:true控制具体节点的默认展开 如果不写open:true则默认此节点是收起状态 varzNodes=[{name:“Project2“,open:true,childr。
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中怎样获取选中节点的父节点及自己的index
1、首先准备一个ztree结构树，如下图所示。
2、接下来看一下这里的代码，如下图所示，这里用的是angular和ztree的搭配。
3、接着可以通过getCheckedNodes来获取所有选中的节点，如下图所示。
4、然后可以打断点看一下，这里获取的是所有选中的节点，包括父节点，如下图所示。
5、接着可以看某一条记录里面都有isParent属性，这是判断是不是父节点的属性，如下图所示。
6、最后就可以通过上面的线索获取所有的最后一级节点了，如下图所示。
ztree中如何获得选中的checkbox的值
ztree中获得选中的checkbox的值的方法和操作步骤如下：
1、首先，创建一个HTML。 HTML是网页的基础和框架，如下图所示。
2、其次，完成上述步骤后，在html中添加测试数据以测试是否已选中该复选框，如下图所示。
3、接着，完成上述步骤后，编写javascript， 单击该按钮时，将触发事件以获取选定的复选框值，如下图所示。
4、然后，完成上述步骤后，美化页面，添加样式文件，并引入jquery文件，如下图所示。
5、最后，完成上述步骤后，打开浏览器，打开测试页面，然后进行测试，如下图所示。这样，问题就解决了。
怎么获取到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 的 字母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： http://baike.baidu.com/link?url=jKiGsFU0icfc3Li7qbVTFemvj0iNDrHE2ACna1jz72rTQ0vT0mml6-BzXRkDK-KKE60Wgg4mH6QTzTOOmW_ekq
ztree怎么通过修改css改变字体和图标大小
1、首先在zTreeStyle/img 中添加你想修改样式的图片，下面是处理好的图tree.png片，给大家使用下。
2、在zTree_v3/css/ zTreeStyle/zTreeStyle.css把背景图路径换成自己的图片。
3、最后就是找位置，找到你想用图标的位置。如下面表示当修改不点击时复选框样式。
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);}}//选中的单选框tIdvar 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本文地址：代码及相关注释如下：//改变节点状态（选中／取消选中）
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换了个风格。