前言:
在我的权限管理模块遇到了给某些角色加权限的问题,这时就需要实现将每个模块做成树,在每个节点前加上预览和编辑的按钮,这样可以根据数据库的某个字段给每个角色赋权限。
必须必须吐槽的是,这部分的功能在网上没找到类似的,所以花了我好长的时间去研究,不过这事已经过去很久了,最近测试代码的时候拿出来看看,当时有些遗留的问题都豁然开朗了。当然这么写我一直都觉得不好,特别是最后跟据按钮icon名称选择节点信息,总觉得不好,但是又实在没想到好办法,希望有大佬指教。
需求:
Ztree节点前添加编辑和预览按钮
实现效果:
实现步骤:
前提是对ztree有些了解。
使用的是ztree官方文档里的addDiyDom,下图是该方法介绍。
附上Ztree官方文档地址:
然后我们模仿该方法可以将节点前面加上自己想要的按钮,官方文档里只加了一个,我这边加上了两个,因为分了预览和编辑的权限。
functionaddDiyDom(treeId, treeNode) {var aObj = $("#" + treeNode.tId + "_a");var preview = "";var compile = "";
aObj.before(preview).before(compile);
}
红色标出的是该按钮的icon,接下来写橙色标出的按钮的onclick方法,即按钮点击图片切换,有个小细节即有编辑权限的一定需要先有预览权限。
function preview(d) {//预览
if(d.src.search(seeCloseIcon)!=-1) {
d.src=seeOpenIcon;
}else{
d.src = seeCloseIcon;if(d.nextSibling.src.search(editOpenIcon) != -1) {
d.nextSibling.src = editCloseIon;}}
}function compile(d1) { //编辑
if(d1.src.search(editCloseIcon)!=-1) {
d1.src=editOpenIcon;//判断该元素之前的预览权限,有编辑权限必须有预览权限
if(d1.previousSibling.src.search(seeCloseIcon)!=-1) {
d1.previousSibling.src=seeOpenIcon;
}
}else{
d1.src=editCloseIcon;
}
}
这样的话就实现了ztree节点前加按钮的效果,但是如何获得选中的节点的信息?
这里我根据按钮src的图片名称选择,使用$('.diyBtn1').each(function() {}方法遍历所有class为diyBtn1的按钮,判断按钮的src名称为选中还是未选中,选中的话就获得其节点信息,多个节点用逗号隔开拼接成字符串存放在隐藏域中。参考代码如下(总觉得这个方法不好,但又想不出什么好办法,后续有好办法再记录):
functionzTreeOnCheck() {var id = "";//仅拥有预览权限
var id2 = "";//同时拥有预览和编辑权限
$('.diyBtn1').each(function() {var src = $(this)[0].src;var nextSrc = $(this).next()[0].src;var priviewIconName = src.substring(src.lastIndexOf('/'),src.lastIndexOf('.'));var compileIconName = nextSrc.substring(nextSrc.lastIndexOf('/'),nextSrc.lastIndexOf('.'));var priviewImageName = seeOpenIcon.substring(seeOpenIcon.lastIndexOf('/'),seeOpenIcon.lastIndexOf('.'));var compileImageName = editOpenIcon.substring(editOpenIcon.lastIndexOf('/'),editOpenIcon.lastIndexOf('.'));if(priviewIconName ==priviewImageName) {if(compileIconName ==compileImageName) {
id2+= $(this)[0].id.substring($(this)[0].id.lastIndexOf('_')+1) + ",";
}else{
id+= $(this)[0].id.substring($(this)[0].id.lastIndexOf('_')+1) + ",";
}
}
});if(0
id= id.substring(0, id.length - 1);
}if(0
id2= id2.substring(0, id2.length - 1)
}
$("#perm_id").val(id);
$("#perm_id2").val(id2);
}