无限树Jquery插件zTree的常用功能特性总结


Posted in Javascript onSeptember 11, 2014

其实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 内部的编辑、删除按钮

Javascript 相关文章推荐
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
Jan 15 Javascript
Js放到HTML文件中的哪个位置有什么区别
Aug 21 Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
Jun 08 Javascript
ES6中Math对象的部分扩展
Feb 20 Javascript
用jQuery实现圆点图片轮播效果
Mar 19 Javascript
原生js封装添加class,删除class的实例
Nov 06 Javascript
JavaScript ES6箭头函数使用指南
Dec 30 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
js通过location.search来获取页面传来的参数
Sep 11 #Javascript
Javascript中设置默认参数值示例
Sep 11 #Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 #Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 #Javascript
用js传递value默认值的示例代码
Sep 11 #Javascript
js图片实时加载提供网页打开速度
Sep 11 #Javascript
jQuery 复合选择器应用的几个例子
Sep 11 #Javascript
You might like
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
做网页的一些技巧
2007/02/01 Javascript
js 创建快捷方式的代码(fso)
2010/11/19 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
Python实现抓取网页并且解析的实例
2014/09/20 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
Python3监控疫情的完整代码
2020/02/20 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
python 基于opencv操作摄像头
2020/12/24 Python
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
Servlet的生命周期
2013/08/25 面试题
商场消防演习方案
2014/02/12 职场文书
房产协议书范本
2014/10/18 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
学校开除通知书
2015/04/25 职场文书
初一年级组工作总结
2015/08/12 职场文书
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
javascript之Object.assign()的痛点分析
2022/03/03 Javascript