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>

完整代码