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: ['2'],
                        nodes: [
                          {
                            text: 'Child 1',
                            tags: ['3'],
                            nodes: [
                              {
                                text: 'Grandchild 1',
                                tags: ['6']
                              },
                              {
                                text: 'Grandchild 2',
                                tags: ['3']
                              }
                            ]
                          },
                          {
                            text: 'Child 2',
                            tags: ['3']
                          }
                        ]
                      },
                      {
                        text: 'Parent 2',
                        tags: ['7']
                      },
                      {
                        text: 'Parent 3',
                        icon: 'glyphicon glyphicon-earphone',
                        href: '#demo',
                        tags: ['11']
                      },
                      {
                        text: 'Parent 4',
                        icon: 'glyphicon glyphicon-cloud-download',
                        href: '/demo.html',
                        tags: ['19'],
                        selected: true
                      },
                      {
                        text: 'Parent 5',
                        icon: 'glyphicon glyphicon-certificate',
                        color: 'pink',
                        backColor: 'green',
                        href: 'http://www.tesco.com',
                        tags: ['available','0']
                      }
                    ];

                    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>

权限树插件