??本文學習并分析App.Hosting項目中后臺管理頁面的角色管理頁面。
??角色管理頁面用于顯示、檢索、新建、編輯、刪除角色數據同時支持按角色分配菜單權限,以便按角色控制后臺管理頁面的菜單訪問權限。角色管理頁面附帶一新建及編輯頁面,以支撐新建和編輯角色數據,同時還附帶權限分配頁面,以設置每個角色的菜單權限。整個頁面使用了layui中的表格、表單等樣式或模塊,同時使用zTree組件,并未使用獨立的js文件,而是直接在頁面內嵌js代碼,并調用SystemManage/RoleController的相關函數處理數據。
??角色管理頁面的上半部分顯示搜索框,下半部分以表格形式顯示全部角色數據或者檢索結果。
??內置的js代碼主要用于設置表格樣式及處理事件,同時處理搜索事件。調用layui的table.render函數設置表格樣式,主要包括:
??1)用elem屬性設置表格容器元素,同時用url設置調用SystemManage/RoleController的Index函數分頁獲取所有角色數據;
??2)用limit、limits、page屬性設置數據分頁顯示;
??3)用toolbar屬性設置頭部工具欄,指定的元素id定義在_AminLayout.cshtml內,且根據不同的頁面顯示不同的工具欄內容,在本頁面中工具欄中有添加按鈕(按鈕在系統管理->按鈕管理中配置);
??4)用where屬性設置調用Index時附加的其它參數;
??5)用cols屬性設置表格顯示列,其中第一列采用type:‘number’設置為序號列,其它列對應Index函數返回值的屬性并以sort屬性設置可排序性,角色狀態列(源代碼應該是忘了改列名稱,對應字段EnableMark)采用templet屬性以模版函數方式設置以表單中的開關樣式顯示屬性值,最后一列用templet屬性以模版選擇器形式指定_AminLayout.cshtml文件中定義的按鈕模版(按鈕在系統管理->按鈕管理中配置)。
??除上述設置之外,還定義了工具欄、操作按鈕、排序事件、檢索按鈕的響應函數,排序和檢索的處理邏輯類似,使用table.reload調用SystemManage/RoleController的Index函數獲取并顯示結果,其余的添加、編輯和刪除按鈕中,刪除按鈕的事件處理函數邏輯為調用SystemManage/RoleController的Delete函數刪除數據,然后使用table.reload重載頁面數據。
??調用form.on('switch(enabled)'設置表格中角色狀態列開關事件的事件處理函數,其內部調用tools.submitConfrim函數提示用戶是否在啟用和禁用間切換,確定的話則調用SystemManage/RoleController的Enable函數更新標簽狀態,同時更新頁面數據,取消的話則還原角色狀態列之前的顯示值。
??新建和編輯角色數據使用的同一頁面,位置為SystemManage\Views\Role\Form.cshtml頁面,使用layui的表單組件設置樣式。如果是新建角色,則直接彈出頁面填寫信息,而編輯數據的話,主頁面會通過url傳遞key參數,在編輯頁面中調用SystemManage/RoleController的GetForm函數獲取角色數據初始化編輯頁面的對應元素數據。新建或編輯完成后,主頁面的js中設置了回調函數,最終調用SystemManage/RoleController的Form函數新增或更新數據。
??角色管理頁面支持按角色設置后臺頁面(頁面管理中定義)及頁面按鈕(按鈕管理中定義)的訪問權限,權限設置頁面位于為SystemManage\Views\Permission\Index.cshtml頁面,使用layui的表單組件設置樣式,同時采用ztree組件通過勾選方式顯示并設置樹形菜單數據。主頁面會通過url傳遞key參數(角色標識),頁面內置的js調用SystemManage/PermissionController的GetAuthorization函數獲取角色權限數據初始化ztree組件。編輯完成后,主頁面的js中設置了回調函數,最終調用SystemManage/PermissionController的Index函數更新數據。
參考文獻:
[1]https://gitee.com/miss_you/Blog
[2]https://layui.dev/docs/2/
[3]https://www.treejs.cn/v3/main.php#_zTreeInfo