前言

所用方法zTree 添加自定义按钮 addHoverDom removeHoverDom

官方地址 API: http://www.treejs.cn/v3/api.php
在这里插入图片描述
效果图:
在这里插入图片描述

代码

本来网上很多类似代码,但是没有结合若依用的,查看ry-ui.js源码才知道用法
以下是setting的写法:

var setting = {
		   view: {
		        addHoverDom: function (treeId, treeNode) {
		            // treeId 对应的是当前 tree dom 元素的 id
		            // treeNode 是当前节点的数据
		            var aObj = $("#" + treeNode.tId + "_a"); // 获取节点 dom
		            if ($("#diyBtnGroup").length>0) return; 
		            // 查看是否存在自定义的按钮组,因为 addHoverDom 会触发多次
		            var editStr = `<span id='diyBtnGroup'>
		                            <span id='diyBtn_space_${treeNode.id}'> </span>
		                            <button type='button' class='btn btn-sm btn-success' id='diyBtn_${treeNode.id}_add' οnfοcus='this.blur();'> 新增 </button>
		                            <button type='button' class='btn btn-sm btn-primary' id='diyBtn_${treeNode.id}_modify' οnfοcus='this.blur();'> 修改 </button>
		                            <button type='button' class='btn btn-sm btn-danger' id='diyBtn_${treeNode.id}_delete' οnfοcus='this.blur();'> 删除 </button>
		                        </span>`;
		            aObj.append(editStr);
		            var btnDelete = $('#diyBtn_'+treeNode.id + '_delete');
		            var btnAdd = $('#diyBtn_'+treeNode.id + '_add');
		            var btnModify = $('#diyBtn_'+treeNode.id + '_modify');
		            if (btnDelete) btnDelete.bind("click", function (){vm.delete(treeNode)});
		            if (btnAdd) btnAdd.bind("click", function (){vm.add(treeNode)});
		            if (btnModify) btnModify.bind("click", function (){vm.modify(treeNode)});
		        },
		        removeHoverDom: (treeId, treeNode) => {
		            // 为了方便删除整个 button 组,上面我用 #diyBtnGroup 这个包了起来,这里直接删除外层即可,不用挨个找了。
		            $("#diyBtnGroup").unbind().remove();
		        },
		    } 
		};

ztree官方的初始化方法为

$.fn.zTree.init($("#tree"), setting, zTreeNodes);

但是若依里面大部分都是通过options请求里面带的。所以通过查看源码可以看到
在这里插入图片描述
在options里面要这样写:

var url = ctx + "sms/smsGroup/treeData";
			var options = {
		        url: url,
		        expandLevel: 2,
		        view:setting.view,
		        onClick : zOnClick
		    };
			$.tree.init(options,setting);
Logo

快速构建 Web 应用程序

更多推荐