若依结合ztree给折叠树添加自定义按钮
若依结合ztree添加自定义按钮
·
前言
所用方法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);
更多推荐
所有评论(0)