无限树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函数为:
functionaddHoverDom(treeId,treeNode){ varsObj=$("#"+treeNode.tId+"_span"); if($("#addBtn_"+treeNode.id).length>0)return; varstr="<aid="addBtn_"+treeNode.id+""onclick="自定义函数1("+treeNode.DepartmentID+")">添加子节点</a>"; str+="<aid="addBtn1_"+treeNode.id+""onclick="自定义函数2("+treeNode.DepartmentID+")">编辑节点</a>"; str+="<aid="addBtn2_"+treeNode.id+""onclick="自定义函数3("+treeNode.DepartmentID+")">删除节点</a>"; sObj.after(str); };
其中removeHoverDom函数为:
functionremoveHoverDom(treeId,treeNode){ $("#addBtn_"+treeNode.id).unbind().remove(); $("#addBtn1_"+treeNode.id).unbind().remove(); $("#addBtn2_"+treeNode.id).unbind().remove(); };
简要说明:
addHoverDom:用于当鼠标移动到节点上时,显示用户自定义控件,显示隐藏状态同zTree内部的编辑、删除按钮
removeHoverDom:用于当鼠标移出节点时,隐藏用户自定义控件,显示隐藏状态同zTree内部的编辑、删除按钮
相关文章
- jQuery Timers 定时插件使用详解编程语言
- jquery实现的时间轴详解编程语言
- jQuery高亮当前选中菜单详解编程语言
- 让网站动起来!12款优秀的 jQuery 动画插件推荐
- jquery输入框数字限制插件
- jQuery中的正则表达式分析正则基础
- jquery中实现简单的tabs插件功能的代码
- 使用jquery插件实现图片延迟加载技术详细说明
- 20个非常棒的jQuery幻灯片插件和教程分享
- 推荐40个非常优秀的jQuery插件和教程【系列三】
- 推荐40款强大的jQuery导航插件和教程(上篇)
- 让图片旋转任意角度及JQuery插件使用介绍
- JQuery插件开发示例代码
- jquery中插件实现自动添加用户的具体代码
- jquery插件tooltipv顶部淡入淡出效果使用示例
- jquery插件jTimer(jquery定时器)使用方法
- 基于jquery的simpleValidate简易验证插件
- 用JQuery实现全选与取消的两种简单方法
- jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
- jQuery制作的别致导航有阴影背景高亮模式窗口
- jQuery异步验证用户名是否存在示例代码
- jQuery插件开发详细教程
- 超棒的响应式布局jQuery插件Freetile.js
- 分享2个jQuery插件--jquery.fileupload与artdialog
- JQuery.get提交页面不跳转的解决方法
- JQuery中serialize()、serializeArray()和param()方法示例介绍