前言:

在我的权限管理模块遇到了给某些角色加权限的问题,这时就需要实现将每个模块做成树,在每个节点前加上预览和编辑的按钮,这样可以根据数据库的某个字段给每个角色赋权限。

必须必须吐槽的是,这部分的功能在网上没找到类似的,所以花了我好长的时间去研究,不过这事已经过去很久了,最近测试代码的时候拿出来看看,当时有些遗留的问题都豁然开朗了。当然这么写我一直都觉得不好,特别是最后跟据按钮icon名称选择节点信息,总觉得不好,但是又实在没想到好办法,希望有大佬指教。

需求:

Ztree节点前添加编辑和预览按钮

实现效果:

实现步骤:
前提是对ztree有些了解。

使用的是ztree官方文档里的addDiyDom,下图是该方法介绍。

附上Ztree官方文档地址:点击这里

然后我们模仿该方法可以将节点前面加上自己想要的按钮,官方文档里只加了一个,我这边加上了两个,因为分了预览和编辑的权限。

function addDiyDom(treeId, treeNode) {
var aObj = $("#" + treeNode.tId + "_a");
var preview = "<image src='"+seeCloseIcon+"' class='diyBtn1' id='diyBth_"+ treeNode.module_code + "' onclick='preview(this)'></image>";
var compile = "<image src='"+editCloseIcon+"' class='diyBtn2' id='diyBth_"+ treeNode.id + "' onclick='compile(this)'></image>";
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名称为选中还是未选中,选中的话就获得其节点信息,多个节点用逗号隔开拼接成字符串存放在隐藏域中。参考代码如下(总觉得这个方法不好,但又想不出什么好办法,后续有好办法再记录):

function zTreeOnCheck() {
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.length) {
id = id.substring(0, id.length - 1);
}
if(0 < id2.length) {
id2 = id2.substring(0, id2.length - 1)
}
$("#perm_id").val(id);
$("#perm_id2").val(id2);
}

Ztree节点前加上两个自定义按钮的更多相关文章

  1. 常用样式制作思路 自定义按钮~自适应布局~常见bug seajs简记 初学者必知的HTML规范 不容忽略的——CSS规范

    常用样式制作思路   学习常用样式总结参考来自这里 带点文字链接列表利用:before实现 1 <!DOCTYPE html> 2 <html lang="en" ...

  2. 自定义按钮~自适应布局~常见bug

    一.元件 自定义按钮可用button或a   display为 inline-block 方便设置格式,通过 padding,height,line-height,font-size设置按钮的大小 & ...

  3. Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  4. C# Winform 实现Ajax效果自定义按钮

    技术看点 WinForm自定义控件的使用 自定义控件gif动画的播放 需求及效果 又来一波 C# GDI自定义控件show .这个控件已经使用几年了,最近找出来重构一下.原来是没有边框的,那么导致导航 ...

  5. 基于element-ui的后台系统表格、dialog、筛选、自定义按钮、分页的一次性封装

    方便基础业务开发封装的一套组件,基于vue2.5.x和element-ui,可以通过配置自动生成表格展示,表格新增.编辑功能.分页.筛选项.自定义显示表格数据等功能. 先上演示图片 --------- ...

  6. zTree节点排序、jsTree节点排序

    项目中遇到了这个问题,网上也没找到比较清晰的答案,索性提供一个方案吧. 原理:将整个树形插件的数据源进行排序,插件在构造UI时,自然也是按照顺序来排列的,目前这种思路适用于 zTree 和 jsTre ...

  7. springboot2.0整合springsecurity前后端分离进行自定义权限控制

    在阅读本文之前可以先看看springsecurity的基本执行流程,下面我展示一些核心配置文件,后面给出完整的整合代码到git上面,有兴趣的小伙伴可以下载进行研究 使用maven工程构建项目,首先需要 ...

  8. wordpress优化之结合prism.js为编辑器自定义按钮转化代码

    原文链接 http://ymblog.net/2016/07/24/wordpress-prism/ 继昨天花了一天一夜的时间匆匆写了主题Jiameil3.0之后,心中一直在想着优化加速,体验更好,插 ...

  9. WPF自定义控件与样式(2)-自定义按钮FButton

    一.前言.效果图 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 还是先看看效果 ...

随机推荐

  1. UVa 1161 Objective: Berlin (最大流)

    题意:给定一些航班,每个航班有人数,和起始终止时间,每次转机要花半小时,问限制时间内最多能有多少人从起始城市到终点城市. 析:差不多是裸板网络流的最大流问题,把每个航班都拆成两个点,这两个点之间连接一 ...

  2. Linux 系统管理命令 - iftop - 动态显示网络接口流量信息

    命令详解 重要星级: ★★★★☆ 功能说明: iftop 是一款实时流量监控工具,可用于监控 TCP/IP 连接等,必须以 root 用户的身份运行.一般最小化安装系统是没有这个命令的,需要使用 yu ...

  3. 点击button传递消息,但是页面不跳转的解决方法

    最近在做一个物联网的项目时遇到的问题:界面上有很多控制开/关灯的button,通过点击button来控制各个灯的亮灭.我需要将获取的不同的点击事件消息,以Socket通信的方式发送给硬件端的服务监听程 ...

  4. bzoj 1089: [SCOI2003]严格n元树【dp+高精】

    设f[i]为深度为i的n元树数目,s为f的前缀和 s[i]=s[i-1]^n+1,就是增加一个根,然后在下面挂n个子树,每个子树都有s[i-1]种 写个高精就行了,好久没写WA了好几次-- #incl ...

  5. bzoj 3894 文理分科【最小割+dinic】

    谁说这道和2127是双倍经验的来着完全不一样啊? 数组开小会TLE!数组开小会TLE!数组开小会TLE! 首先sum统计所有收益 对于当前点\( (i,j) \)考虑,设\( x=(i-1)*m+j ...

  6. Element-wise operations

    Element-wise operations An element-wise operation operates on corresponding elements between tensors ...

  7. UCOSII学习 - 创建任务

    本人刚刚学习UCOSII,平台为正点原子的STM32F103战舰开发板,写这篇博客主要是为了学习UCOSII,也方便自己能够一点一点的进步,话不多说直入正题吧. 第一步:在STM32上移植好UCOSI ...

  8. [Usaco2006 Open]County Fair Events 参加节日庆祝

    Description Farmer John has returned to the County Fair so he can attend the special events (concert ...

  9. _bzoj2049 [Sdoi2008]Cave 洞穴勘测【LCT】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=2049 裸的LCT,保存LCT模版.说一下出bug的几个地方叭: ①,rotate时,没有判断 ...

  10. BitCoin工作原理

    1.加密货币 公共账本-信任+加密算法=加密货币 BitCoin是第一个被是实现出来的加密货币. 首先理解比特币是什么,在考虑要不要买入?(人人都想一夜暴富,美哉) 2.发送.接收.创造比特币的时候电 ...