Django-CRM项目学习（七）-权限组件的设置以及权限组件的应用
开始今日份整理
1.利用自定制标签，增加展示权限，权限分级设定
1.1 在权限组件中创建自定义标签
使用自定义标签的目的，使各个数据进行分离
1.2 导入自定义标签包
自定义标签复习（自定义标签有三种）
1.3 自定义标签语法糖
这个为固定用法，将函数返回的内容，传入到用于转接的html文档中，然后在传入到前端的html中，这样，前端就是接收了一个已经渲染好的元素
1.4 获取人员的权限
结果
1.5 自定义标签的固定用法
2. 权限树插件的使用
2.1 权限树插件的设置
权限树插件是bootstrarp插件库中的treeview插件
<div id="treeview" class="small"></div> <script src="/static/bootstrap-treeview/js/bootstrap-treeview.js"></script>
{#<script src="/static/js/jquery.js"></script>#}
<script type="text/javascript">
// API文档参数列表: https://www.cnblogs.com/tangzeqi/p/8021637.html $(function() { var defaultData ={{ permission_tree|safe }} var alternateData = [
{
text: 'Parent 1',
tags: [''],
nodes: [
{
text: 'Child 1',
tags: [''],
nodes: [
{
text: 'Grandchild 1',
tags: ['']
},
{
text: 'Grandchild 2',
tags: ['']
}
]
},
{
text: 'Child 2',
tags: ['']
}
]
},
{
text: 'Parent 2',
tags: ['']
},
{
text: 'Parent 3',
icon: 'glyphicon glyphicon-earphone',
href: '#demo',
tags: ['']
},
{
text: 'Parent 4',
icon: 'glyphicon glyphicon-cloud-download',
href: '/demo.html',
tags: [''],
selected: true
},
{
text: 'Parent 5',
icon: 'glyphicon glyphicon-certificate',
color: 'pink',
backColor: 'green',
href: 'http://www.tesco.com',
tags: ['available','']
}
]; var options = {
// data:defaultData , //data属性是必须的，是一个对象数组 Array of Objects.
color: "", //所有节点使用的默认前景色，这个颜色会被节点数据上的backColor属性覆盖. String
backColor: "#000000", //所有节点使用的默认背景色，这个颜色会被节点数据上的backColor属性覆盖. String
borderColor: "#000000", //边框颜色。如果不想要可见的边框，则可以设置showBorder为false。 String
nodeIcon: "glyphicon glyphicon-stop", //所有节点的默认图标
checkedIcon: "glyphicon glyphicon-check", //节点被选中时显示的图标 String
collapseIcon: "glyphicon glyphicon-minus", //节点被折叠时显示的图标 String
expandIcon: "glyphicon glyphicon-plus", //节点展开时显示的图标 String
emptyIcon: "glyphicon", //当节点没有子节点的时候显示的图标 String
enableLinks: false, //是否将节点文本呈现为超链接。前提是在每个节点基础上，必须在数据结构中提供href值。 Boolean
highlightSearchResults: true, //是否高亮显示被选中的节点 Boolean
levels: 2, //设置整棵树的层级数 Integer
multiSelect: false, //是否可以同时选择多个节点 Boolean
onhoverColor: "#F5F5F5", //光标停在节点上激活的默认背景色 String
selectedIcon: "glyphicon glyphicon-stop", //节点被选中时显示的图标 String searchResultBackColor: "", //当节点被选中时的背景色
searchResultColor: "", //当节点被选中时的前景色 selectedBackColor: "", //当节点被选中时的背景色
selectedColor: "#FFFFFF", //当节点被选中时的前景色 showBorder: true, //是否在节点周围显示边框
showCheckbox: false, //是否在节点上显示复选框
showIcon: true, //是否显示节点图标
showTags: false, //是否显示每个节点右侧的标记。前提是这个标记必须在每个节点基础上提供数据结构中的值。
uncheckedIcon: "glyphicon glyphicon-unchecked", //未选中的复选框时显示的图标，可以与showCheckbox一起使用
}; $('#treeview').treeview({ color: "#4F4F4F",
expandIcon: 'glyphicon glyphicon-chevron-right',
collapseIcon: 'glyphicon glyphicon-chevron-down',
nodeIcon: 'glyphicon glyphicon-bookmark',
data: defaultData,
enableLinks: true,
levels: 1,
showIcon:false,
selectedBackColor: "",
selectedColor: "#333" }); $('#treeview').on('nodeSelected',function(event, data) {
console.log(data);
}) });
</script>
权限树插件
2.2 html接收自定制标签对内容及虚拟性渲染，然后在返回html
2.3 加载顺序
3. 基于权限树，定制多级侧边栏菜单
3.1 接收session，重新设置key，valuse
3.1.1 权限数据重新设定，增加type类型，用此分辨标签类型
3.2 过滤所有的button标签，因为无法展示编辑和删除，add加了没有意义
重新整理字典的主键为pk，values为整理的字典的内容的值：目的为了方便自调用
结果
3.3 自调用的应用，这里主要用于数据的转换
3.3.1 实例
3.3.2 操作列表的数据,可以对结果统一改变
解释:
如果没有父级pid ,则为1级菜单, 如果有pid 则,调用父级的pk 对应的valuse 的值,进行修改,这样循环的时候,被循环列表会
做对应的变更，如果父级中没有nodes 属性,则增加一个nodes 属性,用来存放下一级的数据,
注意： 因为并没有比查看书籍,查看出版社更低的,即他们没有儿子级的，所有if not ......esle ,轮不到他们. 即他们不会有nodes 属性,也不会有箭头.
3.3.3 按照插件内容配置，nodes，nodes为是否有下一级的数据以及图标功能
插件内容
permission_dict:
{
1: {
'text': '查看书籍',
'nodes': [],
'href': '/stark/app01/book/',
'pk': 1,
'pid': 10
},
9: {
'text': '信息管理',
'nodes': [
{
'text': '书籍管理',
'nodes': [
{
'text': '查看书籍',
'nodes': [],
'href': '/stark/app01/book/',
'pk': 1,
'pid': 10
}
],
'href': '',
'pk': 10,
'pid': 9
}, {
'text': '出版社管理',
'nodes': [
{
'text': '查看出版社',
'nodes': [],
'href': '/stark/app01/publish/',
'pk': 5,
'pid': 11
}
],
'href': '',
'pk': 11,
'pid': 9
} ],
'href': '',
'pk': 9,
'pid': None
},
插件内容
3.4 按照插件内容配置，设置当前的着重显示，以及父级展开
展示如下
4.展示效果的完善
4.1 显示当前操作位置的颜色着重
当前操作的位置切换界面父级展开功能
4.2 如果有父级,那么使父级展开,让父级等于父级的父级
permisson_tree 内容
效果图：
父级展开,以及当前操作,着重效果.
完整代码：
<div id="treeview" class="small"></div> <script src="/static/bootstrap-treeview/js/bootstrap-treeview.js"></script>
{#<script src="/static/js/jquery.js"></script>#}
<script type="text/javascript">
// API文档参数列表: https://www.cnblogs.com/tangzeqi/p/8021637.html $(function() { var defaultData ={{ permission_tree|safe }} var alternateData = [
{
text: 'Parent 1',
tags: [''],
nodes: [
{
text: 'Child 1',
tags: [''],
nodes: [
{
text: 'Grandchild 1',
tags: ['']
},
{
text: 'Grandchild 2',
tags: ['']
}
]
},
{
text: 'Child 2',
tags: ['']
}
]
},
{
text: 'Parent 2',
tags: ['']
},
{
text: 'Parent 3',
icon: 'glyphicon glyphicon-earphone',
href: '#demo',
tags: ['']
},
{
text: 'Parent 4',
icon: 'glyphicon glyphicon-cloud-download',
href: '/demo.html',
tags: [''],
selected: true
},
{
text: 'Parent 5',
icon: 'glyphicon glyphicon-certificate',
color: 'pink',
backColor: 'green',
href: 'http://www.tesco.com',
tags: ['available','']
}
]; var options = {
// data:defaultData , //data属性是必须的，是一个对象数组 Array of Objects.
color: "", //所有节点使用的默认前景色，这个颜色会被节点数据上的backColor属性覆盖. String
backColor: "#000000", //所有节点使用的默认背景色，这个颜色会被节点数据上的backColor属性覆盖. String
borderColor: "#000000", //边框颜色。如果不想要可见的边框，则可以设置showBorder为false。 String
nodeIcon: "glyphicon glyphicon-stop", //所有节点的默认图标
checkedIcon: "glyphicon glyphicon-check", //节点被选中时显示的图标 String
collapseIcon: "glyphicon glyphicon-minus", //节点被折叠时显示的图标 String
expandIcon: "glyphicon glyphicon-plus", //节点展开时显示的图标 String
emptyIcon: "glyphicon", //当节点没有子节点的时候显示的图标 String
enableLinks: false, //是否将节点文本呈现为超链接。前提是在每个节点基础上，必须在数据结构中提供href值。 Boolean
highlightSearchResults: true, //是否高亮显示被选中的节点 Boolean
levels: 2, //设置整棵树的层级数 Integer
multiSelect: false, //是否可以同时选择多个节点 Boolean
onhoverColor: "#F5F5F5", //光标停在节点上激活的默认背景色 String
selectedIcon: "glyphicon glyphicon-stop", //节点被选中时显示的图标 String searchResultBackColor: "", //当节点被选中时的背景色
searchResultColor: "", //当节点被选中时的前景色 selectedBackColor: "", //当节点被选中时的背景色
selectedColor: "#FFFFFF", //当节点被选中时的前景色 showBorder: true, //是否在节点周围显示边框
showCheckbox: false, //是否在节点上显示复选框
showIcon: true, //是否显示节点图标
showTags: false, //是否显示每个节点右侧的标记。前提是这个标记必须在每个节点基础上提供数据结构中的值。
uncheckedIcon: "glyphicon glyphicon-unchecked", //未选中的复选框时显示的图标，可以与showCheckbox一起使用
}; $('#treeview').treeview({ color: "#4F4F4F",
expandIcon: 'glyphicon glyphicon-chevron-right',
collapseIcon: 'glyphicon glyphicon-chevron-down',
nodeIcon: 'glyphicon glyphicon-bookmark',
data: defaultData,
enableLinks: true,
levels: 1,
showIcon:false,
selectedBackColor: "",
selectedColor: "#333" }); $('#treeview').on('nodeSelected',function(event, data) {
console.log(data);
}) });
</script>
完整代码
a
Django-CRM项目学习（七）-权限组件的设置以及权限组件的应用的更多相关文章
- django——CRM项目
1.引言 CRM,客户关系管理系统(Customer Relationship Management).企业用CRM技术来管理与客户之间的关系,以求提升企业成功的管理方式,其目的是协助企业管理销售循环 ...
- day 71 crm(8) 权限组件的设置,以及权限组件的应用
---恢复内容开始--- 前情提要: strak 组件是增删改查组件 , 生活中,需求权限组件, 不足: 1,前后端不分离, 2, 空url也会刷新界面,造成资源浪费 3,如果角色忘记设置权 ...
- Django - CRM项目（3）
一.CRM项目的业务逻辑与表结构梳理 1.分析业务逻辑 (1) 引流(sem) (2) 网络咨询师(客服):添加客户信息和查看客户,分配销售 (3) 销售:查看私户 添加跟进记录 失败:加入公户 成功 ...
- Django - CRM项目（2）Q查询（模糊查询）
一.CRM项目(2) 利用Q查询中的q对象完成条件筛选功能. 批量删除.公户转私户功能. 新增一张跟进记录表ConsultRecord,迁移数据库并添加测试数据,实现跟进记录列表页面. 客户列表新增跟 ...
- Django ---- blog项目学习所得
一.登录功能 1.采用ajax 提交form表单的方式 2.后台生成随机验证码,登录时提交验证码 3.用PLI库生成随机验证码,置于session中,登录时与前台提交的code进行upeer()的验证 ...
- Win7下运行VC程序UAC权限问题 VC2010设置UAC权限方法
https://msdn.microsoft.com/en-us/library/bb756929.aspx 我使用的是VS2010,设为连接器清单文件的uac执行级别 直接项目右键---属性---配 ...
- django(权限、认证)系统——第三方组件实现Object级别权限控制
在我的系列blog<Django中内置的权限控制>中明确提及到,Django默认并没有提供对Object级别的权限控制,而只是在架构上留了口子.在这篇blog中,我们探讨一个简单流行的Dj ...
- C#设置文件权限
在开发中,我们经常会使用IO操作,例如创建,删除文件等操作.在项目中这样的需求也较多,我们也会经常对这些操作进行编码,但是对文件的权限进行设置,这样的操作可能会手动操作,现在介绍一种采用代码动态对文件 ...
- 『学了就忘』Linux权限管理 — 53、ACL权限详解
目录 1.什么是ACL权限 2.开启ACL 3.ACL权限的相关命令 (1)设定ACL权限 (2)查询文件的ACL权限 (3)设置文件ACL权限给用户组 (4)给文件夹和里边的文件同时赋予ACL权限 ...
随机推荐
- Java架构师趣谈Hbase之宏观架构
相关文章 五分钟轻松了解Hbase列式存储 Hbase给初学者的“下马威” Hbase王国游记之:Hbase客户端API初体验
- 15分钟在阿里云Kubernetes服务上快速建立Jenkins X Platform并运用GitOps管理应用发布
本文主要介绍如何在阿里云容器服务Kubernetes上快速安装部署Jenkins X Platform并结合demo实践演示GitOps的操作流程. 注意:本文中使用的jx工具.cloud-envir ...
- 基于SpringMVC+Spring+MyBatis实现秒杀系统【业务逻辑】
前言 该篇主要实现秒杀业务层,秒杀业务逻辑里主要包括暴露秒杀接口地址.实现秒杀业务逻辑.同时声明了三个业务类:Exposer.SeckillExecution.SeckillResult. Expos ...
- MySQL递归查询_函数语法检查_GROUP_CONCAT组合结果集的使用
1-前言: 在Mysql使用递归查询是很不方便的,不像Sqlserver可以直接使用声明变量,使用虚拟表等等.如:DECLARE,BEGIN ... END ,WHILE ,IF 等等. 在My ...
- [PHP] assert()断言检测函数
assert_options函数 设置断言的参数 assert 函数 ,检测一个断言 <?php // 激活断言,并设置它为 quiet assert_options(ASSERT_ACTIVE ...
- 【Docker】基础学习及在.Net Core应用
一.Docker基础 Docker 是一个开源的应用容器引擎,基于 Go 语言 Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行的 Linux 机器上 ...
- 由AbstractQueuedSynchronizer和ReentrantLock来看模版方法模式
在学完volatile和CAS之后,近几天在撸AbstractQueuedSynchronizer(AQS)的源代码,很多并发工具都是基于AQS来实现的,这也是并发专家Doug Lea的初衷,通过写一 ...
- CANVAS画布与SVG的区别
CANVAS是html5提供的新元素<canvas>,而svg存在的历史要比canvas久远,svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或属 ...
- installation failed with message INSTALL_FAILED_INSUFFICIENT_STORG
在安装APK的时候有时候会出现这种错误,原因是卸载之前的APK不彻底,有残余,手动删除android目录下相关的文件.
- Flutter数据持久化入门以及与Web开发的对比
对于大部分安卓或者IOS开发人员来说,App的数据持久化可能是很平常的一个话题.但是对于Web开发人员来说,可能紧紧意味着localStorage和sessionStorage. Web开发 loca ...