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虚拟机【2】—— GC策略
前言 前面我们已经知道了Java虚拟机所做的事情就是回收那些不用的垃圾,那些不用的对象.那么问题来了,我们如何知道一个对象我们不需要使用了呢?程序在使用的过程中会不断的创建对象,这些所创建的对象指不定 ...
- 贝叶斯个性化排序(BPR)算法小结
在矩阵分解在协同过滤推荐算法中的应用中,我们讨论过像funkSVD之类的矩阵分解方法如何用于推荐.今天我们讲另一种在实际产品中用的比较多的推荐算法:贝叶斯个性化排序(Bayesian Personal ...
- 【Java基础】【18Map集合&模拟斗D主X排和F排】
18.01_集合框架(Map集合概述和特点) A:Map接口概述 查看API可以知道: 将键映射到值的对象 一个映射不能包含重复的键 每个键最多只能映射到一个值 B:Map接口和Collection接 ...
- leetcode — candy
/** * Source : https://oj.leetcode.com/problems/candy/ * * There are N children standing in a line. ...
- Node.js 进程平滑离场剖析
本文由云+社区发表 作者:草小灰 使用 Node.js 搭建 HTTP Server 已是司空见惯的事.在生产环境中,Node 进程平滑重启直接关系到服务的可靠性,它的重要性不容我们忽视.既然是平滑重 ...
- Spring Boot 2.x(十四):整合Redis,看这一篇就够了
目录 Redis简介 Redis的部署 在Spring Boot中的使用 Redis缓存实战 寻找组织 程序员经典必备枕头书免费送 Redis简介 Redis 是一个开源的使用 ANSI C 语言编写 ...
- #6 ipdb模块源代码解读
前言 好久不见,大家最近可好
- 【.NET Core项目实战-统一认证平台】第十二章 授权篇-深入理解JWT生成及验证流程
[.NET Core项目实战-统一认证平台]开篇及目录索引 上篇文章介绍了基于Ids4密码授权模式,从使用场景.原理分析.自定义帐户体系集成完整的介绍了密码授权模式的内容,并最后给出了三个思考问题,本 ...
- [争什么! 掺在一起做撒尿牛丸啊! 笨蛋]ASP.NET Core 2.0 + EF6 + Linux +MySql混搭
好消息!特好消息!同时使用ASP.NET Core 2.0和.NET Framework类库还能运行在linux上的方法来啦! 是的,你没有看错!ASP.NET Core 2.0,.NET Frame ...
- linux下tomcat启动很慢的解决办法
1.用vim编辑器打开tomcat的bin目录下的catalina.sh [root@iz09a32x1sghz3z bin]# vi /usr/local/src/java/tomcats/tomc ...