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>

權限樹插件

 

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: ['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>

完整代碼

 

 

a