最近悟出來一個道理，在這兒分享給大家：學歷代表你的過去，能力代表你的現在，學習代表你的將來。
十年河東十年河西，莫欺少年窮
學無止境，精益求精
本節和大家探討下C#使用EasyUI樹形結構/Tree構造權限管理模塊
今天是2016年最后一天，在此祝大家新年快樂，辭舊迎新，接下來的2017，希望大家步步高升，發大財！
本節先貼出前端的代碼
首先，你需要引入您的相應的JS/CSS文件
然后，咱們使用靜態HTML構造一個樹形結構：
<div title="健康醫療"> <div style="clear: both; height: 5px;"></div> <ul class="easyui-tree" id="myTree" style="padding-left: 5px;"> <li> <span>在此設置權限</span> <ul> <li data-options="state:'open'"> <span>系統管理</span> <ul> <li data-options="state:'open'"> <span>系統統計</span> <ul> <li> <span> <label for="Checkbox_271">超級管理員</label>： <input id="Checkbox_271" name="checkbox" type="checkbox" value="1_17_3" checked="checked" /> </span> </li> <li> <span> <label for="Checkbox_272">健康醫生</label>： <input id="Checkbox_272" name="checkbox" type="checkbox" value="1_17_2"/> </span> </li> <li> <span> <label for="Checkbox_273">健康師</label>： <input id="Checkbox_273" name="checkbox" type="checkbox" value="1_17_1"/> </span> </li> <li> <span> <label for="Checkbox_274">會員</label>： <input id="Checkbox_274" name="checkbox" type="checkbox" value="1_17_0"/> </span> </li> </ul> </li> <li data-options="state:'open'"> <span>管理員列表</span> <ul> <li> <span> <label for="Checkbox_281">超級管理員</label>： <input id="Checkbox_281" name="checkbox" type="checkbox" value="1_18_3" checked="checked" /> </span> </li> <li> <span> <label for="Checkbox_282">健康醫生</label>： <input id="Checkbox_282" name="checkbox" type="checkbox" value="1_18_2"/> </span> </li> <li> <span> <label for="Checkbox_283">健康師</label>： <input id="Checkbox_283" name="checkbox" type="checkbox" value="1_18_1"/> </span> </li> <li> <span> <label for="Checkbox_284">會員</label>： <input id="Checkbox_284" name="checkbox" type="checkbox" value="1_18_0"/> </span> </li> </ul> </li> <li data-options="state:'open'"> <span>角色管理</span> <ul> <li> <span> <label for="Checkbox_291">超級管理員</label>： <input id="Checkbox_291" name="checkbox" type="checkbox" value="1_19_3" checked="checked" /> </span> </li> <li> <span> <label for="Checkbox_292">健康醫生</label>： <input id="Checkbox_292" name="checkbox" type="checkbox" value="1_19_2"/> </span> </li> <li> <span> <label for="Checkbox_293">健康師</label>： <input id="Checkbox_293" name="checkbox" type="checkbox" value="1_19_1"/> </span> </li> <li> <span> <label for="Checkbox_294">會員</label>： <input id="Checkbox_294" name="checkbox" type="checkbox" value="1_19_0"/> </span> </li> </ul> </li> <li data-options="state:'open'"> <span>權限管理</span> <ul> <li> <span> <label for="Checkbox_321">超級管理員</label>： <input id="Checkbox_321" name="checkbox" type="checkbox" value="1_22_3" checked="checked" /> </span> </li> <li> <span> <label for="Checkbox_322">健康醫生</label>： <input id="Checkbox_322" name="checkbox" type="checkbox" value="1_22_2"/> </span> </li> <li> <span> <label for="Checkbox_323">健康師</label>： <input id="Checkbox_323" name="checkbox" type="checkbox" value="1_22_1"/> </span> </li> <li> <span> <label for="Checkbox_324">會員</label>： <input id="Checkbox_324" name="checkbox" type="checkbox" value="1_22_0"/> </span> </li> </ul> </li> </ul> </li> <li data-options="state:'closed'"> <span>新聞中心</span> <ul> <li data-options="state:'closed'"> <span>新聞種類</span> <ul> <li> <span> <label for="Checkbox_411">超級管理員</label>： <input id="Checkbox_411" name="checkbox" type="checkbox" value="2_21_3" checked="checked" /> </span> </li> <li> <span> <label for="Checkbox_412">健康醫生</label>： <input id="Checkbox_412" name="checkbox" type="checkbox" value="2_21_2" checked="checked" /> </span> </li> <li> <span> <label for="Checkbox_413">健康師</label>： <input id="Checkbox_413" name="checkbox" type="checkbox" value="2_21_1" checked="checked" /> </span> </li> <li> <span> <label for="Checkbox_414">會員</label>： <input id="Checkbox_414" name="checkbox" type="checkbox" value="2_21_0"/> </span> </li> </ul> </li> <li data-options="state:'closed'"> <span>新聞列表</span> <ul> <li> <span> <label for="Checkbox_401">超級管理員</label>： <input id="Checkbox_401" name="checkbox" type="checkbox" value="2_20_3" checked="checked" /> </span> </li> <li> <span> <label for="Checkbox_402">健康醫生</label>： <input id="Checkbox_402" name="checkbox" type="checkbox" value="2_20_2" checked="checked" /> </span> </li> <li> <span> <label for="Checkbox_403">健康師</label>： <input id="Checkbox_403" name="checkbox" type="checkbox" value="2_20_1" checked="checked" /> </span> </li> <li> <span> <label for="Checkbox_404">會員</label>： <input id="Checkbox_404" name="checkbox" type="checkbox" value="2_20_0"/> </span> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> <div style="clear: both; height: 20px;"></div> <div style="padding-left: 35px;"> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="mysub()">提 交</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="over()">取消</a> </div>
其實上述HTML是我動態生成的，大家初學的話，還是先觀察HTML的結構，然后在逐步加入程序，實現動態化
好，截止到這兒，咱們就創建了一個樹形結構，如下：
看到上圖了吧，上圖就是生成的樹形結構，那么：文件夾后面的文字代表的是欄目名稱<諸如：系統管理，系統統計，管理員列表等>，下面代表四個角色，分別為：超級管理員，健康醫師，健康師，會員四個角色！
到這兒，我設計的權限管理思路想必大家基本清晰了，下面我稍作簡述：
將欄目權限分配給不同角色，不同角色人員登錄后台后，會看到不同的欄目！
是不是很簡單，嘻嘻~！
OK，下面我們探討下數據庫的設計及理念
數據庫中應該有一張角色表和欄目表
角色表很簡單，如下：
大致說下字段含義：ID，角色名稱，角色取值，添加時間，備注一，備注二，排序
欄目表如下：
大致說下字段含義：ID，欄目名稱，欄目路徑，父親Id，權限值，添加時間，備注1，備注2，備注3，是否啟用，排序
OK，到此，數據庫部分也就KO了，是不是很簡單？嘻嘻~
下面我們用MVC新建個控制器，配合數據庫並動態加載上述HTML，如下：
#region 權限管理 /// <summary> /// 權限管理視圖 /// </summary> /// <returns></returns> public ActionResult sys_RightManger() { sys_RightModel models = new sys_RightModel(0); return View(models); } /// <summary> /// 編輯權限 /// </summary> /// <param name="Art"></param> /// <returns></returns> public string EditRight(string[] Art) { sys_RightModel models = new sys_RightModel(); return models.EditRight(Art); } #endregion
由上述代碼可知，需要一個名字為：sys_RightModel 的模型，如下：
public class sys_RightModel { public List<Maticsoft.Model.YX_Role> RoleList = new List<Maticsoft.Model.YX_Role>(); public List<Maticsoft.Model.YX_Menus> F_MenusList = new List<Maticsoft.Model.YX_Menus>(); private Maticsoft.BLL.YX_Menus menusbll = new Maticsoft.BLL.YX_Menus(); private Maticsoft.BLL.YX_Role rolebll = new Maticsoft.BLL.YX_Role(); public sys_RightModel() { } public sys_RightModel(int i) { if (i == 0) { //加載角色列表 RoleList = rolebll.GetModelList(0, "", " Flat1 desc"); //加載一級欄目 F_MenusList = menusbll.GetModelList(0, " FID=0 and Flat1=0", " flat2 desc"); } } /// <summary> /// 根據一級欄目ID，加載一級欄目對應的子欄目 /// </summary> /// <param name="Fid">父親ID</param> /// <returns></returns> public List<Maticsoft.Model.YX_Menus> GetChildMenus(int Fid) { return menusbll.GetModelList(0, " FID=" + Fid + " and Flat1=0", " flat2 desc"); } /// <summary> /// 編輯權限~~此為本篇的重頭大戲，不過大家也可以根據自己的設想進行代碼的編輯 /// </summary> /// <param name="Ary">從前端傳遞過來的數組</param> /// <returns>在此聲明，本方法是我個人所寫，可能不盡完善，大家也可嘗試用自己的方法來寫</returns> public string EditRight(string[] Ary) { if (Ary != null) { List<string> Fmenu = new List<string>(); List<string> Cmenu = new List<string>(); for (int i = 0; i < Ary.Length; i++) { string menusInfo = Ary[i].ToString(); string[] childAry = menusInfo.Split('_'); if (childAry.Length == 3) { string Fid = childAry[0]; string Cid = childAry[1]; string Role = childAry[2]; Fmenu.Add(Fid+"_"+Role); Cmenu.Add(Cid+"_"+Role); } } // HashSet<string> Fhs = new HashSet<string>(Fmenu);//除去重復項 HashSet<string> Chs = new HashSet<string>(Cmenu);//除去重復項 List<string> newFmenu = Fhs.ToList(); List<string> newCmenu = Chs.ToList();//轉化為List<T>類型 if (menusbll.setRight(newFmenu, newCmenu)) { return "200"; } else { return "編輯權限失敗"; } } else { return "編輯權限失敗"; } } }
上述方法中諸如GetModelList()方法，大家可根據動軟代碼器生成，也可以自己編寫，在此不作累述！
不過，除了動態生成的方法外，在此說明自己寫的兩個方法：
第一個是JS方法，在此，把整個動態HTML代碼貼出來，如下：
@using WebApi.Models.Manger; @model sys_RightModel @{ ViewBag.Title = "sys_RightManger"; Layout = "~/Views/Shared/_Easy.cshtml"; } <div title="健康醫療"> <div style="clear: both; height: 5px;"></div> <ul class="easyui-tree" id="myTree" style="padding-left: 5px;"> <li> <span>在此設置權限</span> <ul> @foreach (var item in Model.F_MenusList) { if (Model.F_MenusList.IndexOf(item) == 0) { <li data-options="state:'open'"> <span>@item.menuName</span> <ul> @foreach (var childMenuItem in Model.GetChildMenus(item.ID)) { <li data-options="state:'open'"> <span>@childMenuItem.menuName</span> <ul> @foreach (var roleItem in Model.RoleList) { <li> <span> <label for="Checkbox_@(item.ID * 100 + childMenuItem.ID * 10 + roleItem.ID)">@roleItem.RightName</label>： @if (childMenuItem.rightID.Contains(roleItem.RightVle.ToString())) { <input id="Checkbox_@(item.ID * 100 + childMenuItem.ID * 10 + roleItem.ID)" name="checkbox" type="checkbox" value="@(item.ID + "_" + childMenuItem.ID + "_" + roleItem.RightVle)" checked="checked" /> } else { <input id="Checkbox_@(item.ID * 100 + childMenuItem.ID * 10 + roleItem.ID)" name="checkbox" type="checkbox" value="@(item.ID + "_" + childMenuItem.ID + "_" + roleItem.RightVle)"/> } </span> </li> } </ul> </li> } </ul> </li> } else { <li data-options="state:'closed'"> <span>@item.menuName</span> <ul> @foreach (var childMenuItem in Model.GetChildMenus(item.ID)) { <li data-options="state:'closed'"> <span>@childMenuItem.menuName</span> <ul> @foreach (var roleItem in Model.RoleList) { <li> <span> <label for="Checkbox_@(item.ID * 100 + childMenuItem.ID * 10 + roleItem.ID)">@roleItem.RightName</label>： @if (childMenuItem.rightID.Contains(roleItem.RightVle.ToString())) { <input id="Checkbox_@(item.ID * 100 + childMenuItem.ID * 10 + roleItem.ID)" name="checkbox" type="checkbox" value="@(item.ID + "_" + childMenuItem.ID + "_" + roleItem.RightVle)" checked="checked" /> } else { <input id="Checkbox_@(item.ID * 100 + childMenuItem.ID * 10 + roleItem.ID)" name="checkbox" type="checkbox" value="@(item.ID + "_" + childMenuItem.ID + "_" + roleItem.RightVle)"/> } </span> </li> } </ul> </li> } </ul> </li> } } </ul> </li> </ul> </div> <div style="clear: both; height: 20px;"></div> <div style="padding-left: 35px;"> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="mysub()">提 交</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="over()">取消</a> </div> @section scripts{ <script type="text/javascript"> function mysub() { var cek = document.getElementsByName("checkbox"); var aryList = new Array(); for (var i = 0; i < cek.length; i++) { if (cek[i].checked) { aryList.push(cek[i].value); } } $(document).ready(function (data) { $.ajax({ url: "/Manger/EditRight", type: "post", contentType: "application/json", dataType: "text", data: JSON.stringify({ Art: aryList }), success: function (result, status) { if (result == "200") { alert("編輯成功"); window.location.href = "/Manger/sys_RightManger"; } else { alert(result); } }, error: function (error) { alert(error); } }); }); } </script> }
JS方法大家自己看，很簡單，就是像后端傳遞一個數組，后端接收，然后處理！
最后，自己寫的數據庫方法如下：
/// <summary> /// 編輯權限 /// </summary> /// <param name="Fhs">過濾后的List 針對一級欄目</param> /// <param name="Chs">過濾后的List 針對二級欄目</param> /// <returns></returns> public bool setRight(List<string> Fhs, List<string> Chs) { StringBuilder sb = new StringBuilder(""); sb.Append("update YX_Menus set rightID='';"); for (int i = 0; i < Fhs.Count; i++) { string[] Ary = Fhs[i].Split('_'); if (Ary.Length == 2) { sb.Append("update YX_Menus set rightID=rightID+'"+Ary[1]+",' where ID=" + Ary[0] + ";"); } } for (int i = 0; i < Chs.Count; i++) { string[] Ary = Chs[i].Split('_'); if (Ary.Length == 2) { sb.Append("update YX_Menus set rightID=rightID+'" + Ary[1] + ",' where ID=" + Ary[0] + ";"); } } int K = imp.GetSqlCount(CommandType.Text, sb.ToString()); if (K != 0) return true; else return false; }
數據庫方法的大致思路是這樣的，再點擊提交按鈕后，首先將數據表中所有欄目對應的權限設為空，然后通過傳遞的List，進行一個個編輯/Update操作！
至此，整個權限編輯就可以使用了！如下圖：
OK，就這么多，廢了我一上午啊！
如果您覺得贊，就給個贊吧！
參考博客：http://www.cnblogs.com/Mryjp/p/easyui_tree.html
@陳卧龍的博客