无限树Jquery插件zTree的常用功能特性总结
其实Ztree官网已经有详细的API文档，一切以官网上的说明为准,我在此只是结合实践总结几条常用的ztree的功能特性.
（ztree的语法结构是基于key-value的形式配置）
1：支持异步加载数据
语法配置：
async: {
enable: true,
url:'abc.ashx',
otherParam: { "request": "requestname" }
}
简要说明:
enable :设置 zTree 是否开启异步加载模式.
url:Ajax 获取数据的 URL 地址.
otherParam:Ajax 请求提交的静态参数键值对.相当于ajax中的data参数.
2：加载数据并绑定,一般都是定义数据结构实体即model，此数据结构要包含层级关系通常包括:ID,父ID,Name.
然后配置语法:
data: {
simpleData: {
enable: true
}
}
或者
data: {
key: {
children: "childrens",
checked: "IsChecked"
}
}
简要说明:
simpleData：即可采用数组作为数据源绑定.此时异步加载的数据可为平行结构.
children： 指定节点数据中保存子节点数据的属性名称,此时异步加载的数据为树的折叠结构;所以后端加载数据时要使用递归算法.
3:支持单选，复选功能
语法配置:
check: {
enable: true,
chkStyle: "checkbox",
radioType: "all"
chkboxType:{ "Y": "", "N": "" }
},
data: {
key: {
checked: "IsChecked"
}
}
简要说明:
enable:设置 zTree 的节点上是否显示 checkbox / radio
chkStyle:勾选框类型(checkbox 或 radio）
radioType:radio 的分组范围
chkboxType:勾选 checkbox 对于父子节点的关联关系
checked:为加载数据后复选框是否勾选.IsChecked为后端数据结构model中定义的字段.
4:支持添加子节点,编辑节点,删除节点事件
我这里介绍如何采用自定义添加，编辑，删除按钮的方式
语法配置:
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom
}
其中addHoverDom 函数为:
function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if ($("#addBtn_" + treeNode.id).length > 0) return;
var str= "<a id='addBtn_" + treeNode.id + "' onclick='自定义函数1(" + treeNode.DepartmentID + ")'>添加子节点</a>";
str+= "<a id='addBtn1_" + treeNode.id + "' onclick='自定义函数2(" + treeNode.DepartmentID + ")'>编辑节点</a>";
str+= "<a id='addBtn2_" + treeNode.id + "' onclick='自定义函数3(" + treeNode.DepartmentID + ")'>删除节点</a>";
sObj.after(str);
};
其中removeHoverDom函数为:
function removeHoverDom(treeId, treeNode) {
$("#addBtn_" + treeNode.id).unbind().remove();
$("#addBtn1_" + treeNode.id).unbind().remove();
$("#addBtn2_" + treeNode.id).unbind().remove();
};
简要说明:
addHoverDom:用于当鼠标移动到节点上时，显示用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
removeHoverDom:用于当鼠标移出节点时，隐藏用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
相关文章
这篇文章主要介绍了jQuery实现的鼠标响应缓冲动画效果,涉及jQuery事件响应、数值运算及页面元素动态操作相关技巧,需要的朋友可以参考下2018-02-02
这篇文章主要介绍了10分钟学会写Jquery插件,通过一个实例分两步完成一个简单的插件,非常实用,需要的朋友可以参考下2014-09-09
轻松掌握jQuery中wrap()与unwrap()函数的用法
wrap()能够将指定HTML元素包裹DOM结构,与之相反unwrap()函数则是将DOM去掉^^下面让我们来以两个小例子轻松掌握jQuery中wrap()与unwrap()函数的用法:)2016-05-05
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
这篇文章主要介绍了jQuery实现的指纹扫描效果,以完整实例形式分析了jQuery实现图像按照指定模式显示的相关实现技巧,并附带附示例演示与demo源码供读者下载参考,需要的朋友可以参考下2016-01-01
这篇文章介绍了Jquery倒数计时按钮setTimeout的实例，有需要的朋友可以参考一下2013-07-07
本文主要介绍了jQuery中$.ajax()方法的具体使用，$.ajax(url,[settings])通过 HTTP 请求加载远程数据，文中通过示例代码详细的介绍了$.ajax()的用法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
最近一年多一直在做前端的东西，由于老板在追求一些年轻动感的效果，让页面元素不能仅仅是简单的隐藏显示，所以经常会使用一些动画效果，发现jQuery的动画真心好用啊，把常用的几个总结一下，希望不再每次使用的时候还去翻API2013-10-10
JQuery组件基于Bootstrap的DropDownList（完整版）
这篇文章主要介绍了JQuery组件基于Bootstrap的DropDownList的完整版，在原有基础上进行完善功能，感兴趣的小伙伴们可以参考一下2016-07-07
写用户注册验证时遇到的jQuery选择器问题，下面做下记录，有遇到类似情况的朋友可以参考下2014-03-03
$ is not defined这种提示想必在调试时经常会遇到吧，经过搜索查询了一下结果是引入Jquery的顺序不对，改过来就可以了，有此问题的朋友可以参考下哈2013-04-04
最新评论