zTree 基本使用

最新推荐文章于 2024-11-06 06:44:49 发布

原创最新推荐文章于 2024-11-06 06:44:49 发布 · 362 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

3 篇文章

订阅专栏

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 zTreeOnCheck(event, treeId, treeNode) {
    alert(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);
};

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触发；