无限树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 相关文章推荐
jquery BS,dialog控件自适应大小
Jul 06 Javascript
jQuery对象和DOM对象使用说明
Jun 25 Javascript
基于jquery实现状态限定编辑的代码
Feb 11 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
jquery.qtip提示信息插件用法简单实例
Jun 17 Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 Javascript
vuex 实现getter值赋值给vue组件里的data示例
Nov 05 Javascript
vue自定义标签和单页面多路由的实现代码
May 03 Javascript
原生js实现简单轮播图
Oct 26 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代码
2013/03/24 PHP
php+ajax导入大数据时产生的问题处理
2014/06/11 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
javascript 多级checkbox选择效果
2009/08/20 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
javascript实用方法总结
2015/02/06 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
[01:43]倾听DOTA2英雄之声 魅惑魔女国服配音鉴赏
2013/06/06 DOTA
跟老齐学Python之数据类型总结
2014/09/24 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
Python实现Dijkstra算法
2018/10/17 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
python 动态调用函数实例解析
2019/10/21 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
广州盈通面试题
2015/12/05 面试题
顶岗实习计划书
2014/01/10 职场文书
化工专业求职信
2014/07/01 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书
Python中文纠错的简单实现
2021/07/07 Python
python模板入门教程之flask Jinja
2022/04/11 Python
Java 数组的使用
2022/05/11 Java/Android
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript