zTree 基本使用
1、
zTree v3.x
有 3 个 js 文件，
①一个 核心包 ( jquery.ztree.core-3.x.js )，
②两个扩展包 -- 复选框功能包 ( jquery.ztree.excheck-3.x.js )
& 编辑功能包 ( jquery.ztree.exedit-3.x.js )
③一个css文件zTreeStyle.css
zTree需要的js、css、imag相关依赖文件链接：
链接：https://pan.baidu.com/s/1OTnPwk6prkIHM1c2frG6Zw 密码：g7em
2、
以上所有文件合并为一个 js 文件
以下是个应用实例：
|
var zNodes = "";
//部门setting
var setting = {
data: {
simpleData: {
enable: true
}
},
view : {
showIcon : false,
selectedMulti : false, //可以多选
showLine : false,
expandSpeed : '',
dblClickExpand : false
},
check : {
enable : true,
chkStyle : "radio", //单选框
radioType:"all", //在整棵树范围内当做一个分组
chkboxType: { "Y": "", "N": "" }
},
callback: {
onClick: onTreeNodeClick, //点击节点文字触发
//beforeClick: zTreeBeforeClick
onCheck:zTreeOnCheck //点击节点radio/checkBox触发
}
};
//初始化部门树
function initDeptTree(){
$.ajax(
url: "请求路径",
type:"请求方式",
data:{"请求的数据"},
success: function(data){
console.log(data.result);
zNodes = data;
});
$.fn.zTree.init($("#UL的id"), setting, zNodes);
$.fn.zTree.getZTreeObj("UL的id").expandAll(false);
return false;
}
|
tree节点点击触发事件
function onTreeNodeClick(){
var treeObject = $.fn.zTree.getZTreeObj("UL的id");
var nodes = treeObject.getCheckedNodes(true);
console.log(nodes);
var id = "";
}
function zTreeBeforeClick(treeId, treeNode, clickFlag) {
return null;//当是父节点 返回false 不让选取
}
|
注意：在setting——>callback里面关于onClick和onCheck的区别：
onClick:事件是当点击树节点文字进行触发；
onCheck:事件是当点击树节点的redio/checkBox触发；