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权限 ...
随机推荐
- 构造方法、封装、关键字（this、static）和代码块的介绍
1.构造方法 1.1 构造方法与成员方法的区别 构造方法分为无参构造和有参构造,其中有参构造方法和无参构造方法为方法的重载关系. 构造方法在初始化一个类的对象时进行调用,它没有返回值,方法名与类名相同 ...
- GraphQL 的前世今生
GraphQL是什么 GraphQL是一种新的API标准,它提供了一种更高效.强大和灵活的数据提供方式.它是由Facebook开发和开源,目前由来自世界各地的大公司和个人维护.GraphQL本质上是一 ...
- ubuntu 修改网卡名称 更改设备网卡名称 修改eno16777736为eth0 ubuntu 15.10网卡名称为eno16777736
ubuntu linux 进入root用户,管理员模式 编辑这个文件需要管理员模式 在GRUB_CMD_LINUX后面增加图中所示 看到这个地方了没,有提示信息的,想要改变这个文件,记得运行 upda ...
- Ruby数组(1)：基本用法
数组 Ruby中的数组是一个容器,数组中的每个元素都是一个对象的引用. 注意,Array类中包含了Enumerable模块,所以Enumerable中的方法也都能使用,例如Enumerable中的re ...
- 第8章 概述 - Identity Server 4 中文文档(v1.0.0)
快速入门提供了各种常见IdentityServer方案的分步说明.他们从基础到复杂 - 建议您按顺序完成它们. 将IdentityServer添加到ASP.NET Core应用程序 配置Identit ...
- Vs Code 插件配置教程
1 Vs Code 下载地址:https://code.visualstudio.com/ 2 安装好Vs Code,点击启动,点击File-> Open Folder 打开项目 3 点击E ...
- VS项目发布到本地IIS
一.项目介绍 ①web项目,开发工具Visual Studio,语言C# ②本地IIS,手机上或其他用户在和本地在同一个局域网(并不绝对是指同一个WIFI)内访问,同时要把防火墙关掉 ③IIS全名In ...
- 将excel按照某一列拆分成多个文件（方案整理）
1解决方案:将excel按照某一列拆分成多个文件 https://blog.csdn.net/ntotl/article/details/79141314 2遇到的问题:解决vbe6ext.olb不能 ...
- Java的几道面试题目以及简短回答做个记录保存
最近没有继续用CSDN写博客了,转到博客园,什么时候自己搭建一个博客就好了. 一 谈谈你对Spring的工作原理的理解 引用一篇博客的讲解,https://www.cnblogs.com/xdp- ...
- 01-html介绍和head标签
[转]01-html介绍和head标签 主要内容 web标准 浏览器介绍 开发工具介绍 HTML介绍 HTML颜色介绍 HTML规范 HTML结构详解 一.web标准 web准备介绍: w3c:万维网 ...