无限树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内部的编辑、删除按钮