“MVC+Nhibernate+Jquery-EasyUI” 信息發布系統 第五篇(用戶管理之“用戶權限分配”)


一、在做權限分配之前,首先先了解“ZTree”這個插件,我的這個系統沒有用Jquery-EasyUI的Tree。用的是”ZTree“朋友們可以試試,也很強大。點擊下載ZTree插件

      1、介紹“ZTree”,在目錄:\zTree\demo\cn\index.html,有個Demo,打開看一看。

                  

 

              2、這個是最簡單的“不顯示”節點圖標的樹。如果想用的話,點擊右鍵“此框架-查看源代碼”的方式。和查看Jquery-UI的方式一樣。                                    

                   

                3、下面這個是顯示圖標的樹,我的系統用的就是這種樣式!

                  

               4、接下來就看看是怎么使用吧。

               (1)、右鍵查看源代碼,看到引用插件的JS、CSS

    <link href="@Url.Content("~/zTree/css/zTreeStyle/zTreeStyle.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/zTree/js/jquery.ztree.core-3.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/zTree/js/jquery.ztree.excheck-3.1.js")" type="text/javascript"></script>
 (2)、系統演示:帶圖標的那種樣式。

                   (3)、ZTree的屬性:建議看看:http://www.ztree.me/v3/api.php ,下面是Demo中的源代碼部分

                
<SCRIPT type="text/javascript">
        <!--
        var setting = {
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        var zNodes =[
            { id:1, pId:0, name:"展開、折疊 自定義圖標不同", open:true, iconOpen:"../../../css/zTreeStyle/img/diy/1_open.png", iconClose:"../../css/zTreeStyle/img/diy/1_close.png"},
            { id:11, pId:1, name:"葉子節點1", icon:"../../../css/zTreeStyle/img/diy/2.png"},
            { id:12, pId:1, name:"葉子節點2", icon:"../../../css/zTreeStyle/img/diy/3.png"},
            { id:13, pId:1, name:"葉子節點3", icon:"../../../css/zTreeStyle/img/diy/5.png"},
            { id:2, pId:0, name:"展開、折疊 自定義圖標相同", open:true, icon:"../../../css/zTreeStyle/img/diy/4.png"},
            { id:21, pId:2, name:"葉子節點1", icon:"../../../css/zTreeStyle/img/diy/6.png"},
            { id:22, pId:2, name:"葉子節點2", icon:"../../../css/zTreeStyle/img/diy/7.png"},
            { id:23, pId:2, name:"葉子節點3", icon:"../../../css/zTreeStyle/img/diy/8.png"},
            { id:3, pId:0, name:"不使用自定義圖標", open:true },
            { id:31, pId:3, name:"葉子節點1"},
            { id:32, pId:3, name:"葉子節點2"},
            { id:33, pId:3, name:"葉子節點3"}

        ];

        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });
        //-->
    </SCRIPT>
前台JS代碼

                   (4)、看到上面的JS部分,是寫在前台的,但是這個系統中是在后台中寫的,方便結合數據庫進行權限分配的操作然后用

 @Html.Raw(ViewData["tree"].ToString())的方式渲染出來。 
(5)、把“operate”拼接到一塊,使用StringBuider效率更高。
              
//TX:使用ZTree樹顯示權限
        public ActionResult ZTreeList(int userId)
        {
            //var user = this.user();
            limits = userPriviligeBLL.listPrivilige(userId);
            string operate = string.Empty;
            //var listLimtAll = userLimitBll.GetAllLimits();
            var listModul = userModuleBll.pagedGetAllList();
            operate += "<script type=\"text/javascript\">var setting = {check: {enable: true},data: {simpleData: {enable: true}}};var zNodes =[";
            int i = 0;
            foreach (var item in listModul)
            {
                i++;
                operate += "{ id:" + item.ID + ", pId:0, name:\"" + item.Name + "\", open:true,nocheck:true,iconSkin:\"pIcon0" + i + "\"},";
                operate += GetChild(item.ID);
            }
            if (listModul != null) //有功能項 去除最后一個逗號
                operate = operate.Substring(0, operate.Length - 1);
            operate += "];$(document).ready(function(){$.fn.zTree.init($(\"#treeDemo\"), setting, zNodes);});</script>";
            ViewData["tree"] = operate;
            ViewData["uid"] = userId;
            return View();
        }      
ZTreeList

                    (6)、其中使用到“遞歸”算法,查詢下級的節點。

              
        // 查找下級節點        
        private string GetChild(int FID)
        {
            string child = string.Empty;
            var listLimtAll = userLimitBll.GetAllLimits();
            var items = listLimtAll.Where(a => a.Module.ID == FID);
            foreach (var item in items)
            {
                //child += "{ id:" + item.ID + ", pId:" + FID + ", name:\"" + item.Name + "\", open:true " + GetChecked(item.ID.ToString()) + "},";
                child += "{ id:" + -item.ID + ", pId:" + FID + ", name:\"" + item.Name + "\", open:true,iconSkin:\"icon01\"" + GetChecked(item.ID.ToString()) + "},";
            }
            //
            return child;
        } 
GetChild

                    (7)、在權限分配之前,先檢查這個權限是否有復選框的勾選。

             
        //判斷是否有權限 有復選框 勾選
        private string GetChecked(string FID)
        {
            StringBuilder list = new StringBuilder();
            foreach (var item in limits)
            {
                list.Append(item.ToString() + ",");
            }
            if (list != null)
            {
                if (Convert.ToInt32(FID).In(limits) == true)
                        return ",checked:true";                
            }
            return string.Empty;
        }
        #endregion
GetChecked

                    (8)、前台View:1、判斷前面的復選框是否有一個為選中,否則提示。2、遍歷選中的復選框的節點,把選中的ID,用,分割。3、Ajax的方式傳遞到后台進行權限的分配。4、分配成功之后,關閉分配權限的頁面。導向用戶管理頁面。5、注意:是使用@Html.Raw(ViewData["tree"].ToString())的方式渲染出來的樹。 

             
@{
    ViewBag.Title = "ZTreeList";
    Layout = "~/Areas/houtai/Views/Shared/_JS.cshtml";
}
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ZTree權限分配(田鑫)</title>
</head>
<body>
    <link href="@Url.Content("~/zTree/css/zTreeStyle/zTreeStyle.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/zTree/js/jquery.ztree.core-3.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/zTree/js/jquery.ztree.excheck-3.1.js")" type="text/javascript"></script>
    <script language="javascript">
        $(function () {
            $("#Canel").click(function () {
                 window.parent.afterSetRole();
             }); 
            $("#submit").click(function () {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                var nodes = zTree.getCheckedNodes(true);
                if (nodes.length == 0) {
                    alert("請至少選擇一項");
                    return false;
                }
                var Fid="";
                for (var i = 0; i < nodes.length; i++) {
                    Fid += nodes[i].id+",";
                }
                $.ajax({
                    type: 'post',
                    url: "@Url.Action("SetPrivilige","Privilige")",
                    data: "UID=@ViewData["uid"]&LimitID="+Fid,
                    success: function (data) {
                    if (data=="Yes") {
                         alert("分配權限成功!");
                         window.parent.afterSetRole();
                      }                        
                    },
                    error: function (error) {
                        alert("失敗");
                        window.parent.afterSetRole();
                    }
                })
            });
        });
    </script>

    <input type="button" value="保存權限" id="submit" />&nbsp;&nbsp;<input type="button" value="返 回" id="Canel"" />
    <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
    @Html.Raw(ViewData["tree"].ToString())    
</body>
</html>
View部分

                     (9)、點擊“保存權限”按鈕,彈出“分配權限成功”,點擊“確定“,關閉頁面,導向”用戶管理“的頁面。

                      

                   (10)、導向”用戶管理“頁面!

                      

三、總結:

         如果對您有一些幫助的話,請您繼續關注這個系列的內容吧,下面的“推薦”,也可以讓更多的朋友來了解。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM