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);
}
}
//选中的单选框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
本文地址:代码及相关注释如下://改变节点状态(选中/取消选中)
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换了个风格。