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权限 ...
随机推荐
- 《HelloGitHub月刊》第 11 期
<HelloGitHub>第 11 期 兴趣是最好的老师,<HelloGitHub>就是帮你找到兴趣! 简介 最开始我只是想把自己在浏览 GitHub 过程中,发现的有意思.高 ...
- Chapter 4 Invitations——24
"How do you do that?" I asked in amazed irritation. “你是怎么做到的?”我惊讶的问道. "Do what?" ...
- Java——多态浅析
前言 在面向对象程序设计语言中,多态是继数据抽象和继承之后的第三种基本特性.多态的含义是什么,有什么作用以及在Java中是怎么实现的?下面将做介绍. 什么是多态 简单点说就是"一个接口,多种 ...
- babel版本兼容报错处理：Plugin/Preset files are not allowed to export objects
原文地址: https://www.cnblogs.com/jiebba/p/9618930.html 1.为什么会报错 ? 这里抱着错误是因为 babel 的版本冲突. 多是因为你的 babel 依 ...
- 第54章 身份资源 - Identity Server 4 中文文档(v1.0.0)
此类为身份资源建模. Enabled 指示此资源是否已启用且可以请求.默认为true. Name 标识资源的唯一名称.这是客户端将用于授权请求中的scope参数的值. DisplayName 该值将用 ...
- [PHP] 魔术方法__get __set __sleep __wakeup的实际使用
1.__get __set是在给不可访问属性赋值和读取时,调用 2.__sleep 是在序列化对象的时候调用 3.__wakeup是在反序列化对象的时候调用 4.可以在序列化对象的时候 , 只序列化指 ...
- PHP中的Define和Const区别
我们经常把不经常变的值定义成常量,常量一般用全部大写来表示,前面不加美元符号,那么define和const有什么区别呢? 常量是一个简单的标识符.在脚本执行期间该值不能改变(除了所谓的魔术常量,他们其 ...
- mysql删除重复记录，只保留最大ID的记录(非重复也保留)
目前网上搜索的删除重复记录,大部分都是where子查询,本人感觉看上去不美观,故亲自手写了一个,如下: delete from mst_sku using mst_sku,( select dist ...
- jQuery each和js forEach用法比较
本文实例分析了jQuery each和js forEach用法.分享给大家供大家参考,具体如下: 对于遍历数组的元素,js代码和jquery都有类似的方法,js用的是forEach而jquery用的是 ...
- 亚马逊 amazon connect（呼叫中心）
背景 公司为提高客服部门沟通效率对接电话呼叫中心,调研后选择了亚马逊的Amazon Connect服务,因为是国外业务没有选择用阿里云,怕有坑. Amazon Connect后台 需要在后台创建“联系 ...