ztree点击树节点前的展开图标分级加载下拉树

news/2024/7/24 9:50:13 标签: ztree

 onExpand:用于捕获节点被展开的事件回调函数,这个是关键。

<ul id="share-to-department-modal-tree"></ul>
var fileTreeSettingForShareToDept = {
	check : {
		enable : true,
		chkboxType : {
			"Y" : "",
			"N" : ""
		}
	},
	view : {
		dblClickExpand : false
	},
	data : {
		simpleData : {
			enable : true
		}
	},
	callback : {
		beforeClick : function(treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("share-to-department-modal-tree");
			zTree.checkNode(treeNode, !treeNode.checked, null, true);
			return true;
		},
		onCheck : function(e, treeId, treeNode) {

		},
        onExpand: function(event, treeId, treeNode) { //点击展开图标加载子级
     	    var treeObj = $.fn.zTree.getZTreeObj(treeId);
     	    var node = treeObj.getNodeByTId(treeNode.tId);

     	    if (node.children == null || node.children == "undefined") {
     	        $.ajax({
     	            type: 'GET',
     	            dataType: 'json',
     	            url: "/kscd/api/general-storage/share-query-dept/" + treeNode.id + "/",
     	            data: {},
     	            success: function(response) {
     	                if (response.ret) {
     	                    if (response.depts != null && response.depts != "") {
     	                        treeObj.addNodes(node, response.depts);
     	                    }
     	                }
     	            },
     	            error: function(data){
     	            	toastr.error(data.msg, "错误提示");
     	            }
     	        });
     	    }
     	}
	}
};

 初始化时只加载根节点:

$("#share-to-department-button").click(function(){
				    $.ajax({
				        type: "GET",
				        url: '/kscd/api/general-storage/share-query-dept/1/',
				        data: {},
				        dataType: "json",
				        success: function(data){
				        	if(data.ret){
					            $.fn.zTree.init($("#share-to-department-modal-tree"), fileTreeSettingForShareToDept, data.depts);
				        	}else{
				        		toastr.error(data.msg, "错误提示");
				        	}
				        },
				        error: function(data){
				        	toastr.error(data.msg, "错误提示");
				        }
				    });
});

 


http://www.niftyadmin.cn/n/886786.html

相关文章

理解 Go make 和 new 的区别

Go语言中new和make是内建的两个函数&#xff0c;主要用来创建分配类型内存。在我们定义生成变量的时候&#xff0c;可能会觉得有点迷惑&#xff0c;其实他们的规则很简单&#xff0c;下面我们就通过一些示例说明他们的区别和使用。 变量的声明 var i int var s string变量的声…

怎么理解vue中$listeners属性?

首先&#xff0c;$listeners是什么&#xff1f; 假设有父组件Parent和子组件Child // Parent <template>...<child v-on:event-one"methodOne" v-on:event-two"methodTwo" />... </template> 那么你在使用Child时&#xff0c;传入的所…

vue实例之组件开发:图片轮播组件

一、普通方式&#xff1a; 其中&#xff0c;index是关键。 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <style> html, body{margin: 0;padding: 0; } .photo-player{width: 456px;height: 670px;over…

vue实例之组件开发:多标签切换组件/tabs切换组件

一、自定义方式&#xff1a; 定义组件Tabs.vue <template><div class"tabs"><button v-for"(tab, key) in tabs" :key"key" click"indexkey" :class"{active: keyindex}">{{tab}}</button><ul…

go 切片及其基本操作

1.1切片 Go中常用的数据结构是切片&#xff0c;即动态数组&#xff0c;其长度并不固定&#xff0c;我们可以向切片中追加元素&#xff0c;它会在容量不足时自动扩容。 在 Go 语言中&#xff0c;切片类型的声明方式与数组有一些相似&#xff0c;不过由于切片的长度是动态的&am…

vue插件开发的两种方法:以通知插件toastr为例

方法一&#xff1a; 1、写插件&#xff1a; 在 src 文件夹下面建 lib 文件夹用于存放插件&#xff0c;lib 文件夹下再建toastr文件夹&#xff0c;在toastr文件夹下新建 toastr.js 和 toastr.vue两个文件。整个项目目录如下所示&#xff1a; toastr.vue 的内容如下&#xff1a…

webuploader如何判断是否上传的是空文件?

在beforeFileQueued事件中可以判断&#xff1a; // 当有文件被添加进队列的时候 uploader.on( beforeFileQueued, function( file ) {if(file.size 0){alert("请不要上传空文件");} });

ztree中如何通过点击节点文字就可以选中节点前的选择框,并且父级和子级之间进行选择联动?

配置信息如下&#xff1a; var UsersTreeSetting {check : {enable : true,chkboxType : {"Y" : "ps","N" : "ps"}},view : {dblClickExpand : false,selectedMulti: false},data : {simpleData : {enable : true}},callback : {bef…