DaleCloud（原NFine）介绍二：系统菜单及菜单按钮权限控制

第一次写这种技术性博客，写的不好请多包含。

言归正传，众所周知NFine框架是NFine团队出品的一款.NET MVC框架，前端用的Bootstrap。但是由于NFine框架夭折了，团队也没出过什么教程文档之类的。于是我拿来改了改，改成了现在的DaleCloud框架，前端主框架依然沿用Bootstrap，表单和表格用了easyUI。

很多人拿到这套框架不知道怎么用，我摸索了一段时间后搞懂了设计逻辑，我会将我搞懂的内容一一给大家分享。今天先将框架的菜单和按钮控制权限的配置；

一、系统初始化及菜单配置

1.1系统菜单前端加载：

前端页面框架页初始化时主要引用了framework-ui.js，framework-clientdata.js，index.js，indextab.js。分别说说每个JS脚本的作用：

framework-ui.js：整个前端框架的UI实现脚本。包括弹出层，对话框，请求参数获取，表单提交，select样式等等。

framework-clientdata.js：前端需要用到系统数据的获取，包括数据字典，组织结构，角色，部门职位，当前角色的菜单，每个框架页的按钮权限等。

index.js：用于初始化系统首页的，包括菜单初始化，皮肤样式初始化等；

indextab.js：用于tab页初始化以及菜单列单击事件初始化。

1.2前端菜单加载原理：

首先通过framework-clientdata.js从服务器后台获取当前用户角色对应的菜单列表authorizeMenu；然后在通过index初始化页面后加载GetLoadNav()初始化菜单列表。

GetLoadNav()代码如下：

function GetLoadNav() {
    var data = top.clients.authorizeMenu;
    var _html = "";
    $.each(data, function (i) {
        var row = data[i];
        if (row.F_ParentId == "0") {
            _html += '<li>';
            _html += '<a data-id="' + row.F_Id + '" href="#" class="dropdown-toggle"><i class="' + row.F_Icon + '"></i><span>' + row.F_FullName + '</span><i class="fa fa-angle-right drop-icon"></i></a>';
            var childNodes = row.ChildNodes;
            if (childNodes.length > 0) {
                _html += '<ul class="submenu">';
                $.each(childNodes, function (i) {
                    var subrow = childNodes[i];
                    _html += '<li>';
                    _html += '<a class="menuItem" data-id="' + subrow.F_Id + '" href="' + subrow.F_UrlAddress + '" data-index="' + subrow.F_SortCode + '">' + subrow.F_FullName + '</a>';
                    _html += '</li>';
                });
                _html += '</ul>';
            }
            _html += '</li>';
        }
    });
    $("#sidebar-nav ul").prepend(_html);
}

最后通过indextab.js中的 $.nfinetab.init();来完成菜单项的tab事件初始化；

1.3系统菜单后台配置说明：

系统菜单配置很简单，在系统管理→系统菜单中进行“新建菜单”即可。在选项一栏中，除了“有效”复选框，其他选项在原框架中并没有卵用，所以可以不用管；目标一栏，如果是一级菜单请选择“无页面”，二级菜单选择“框架页”。

原框架图标选择按钮不可用，我增加了一个可以选择fontawesome icon图标的弹出框可供选择，但只支持一级目录有图标，二级目录不显示图标，原框架就这样，我也懒得去改了。

 

二、框架页按钮菜单控制

我们在后台系统菜单管理列表中会发现有“按钮管理”功能，选中一个菜单行，点击按钮管理可以配置页面对应的按钮；

在按钮管理页面可以对按钮进行增删改查，也可以通过克隆选项克隆复制也有的其他菜单的按钮。添加按钮页面中，一定要记住你每个按钮的填写的编号，事件和连接，需要和前端页面的按钮保持一致。

前端index页面中的菜单按钮代码视图，<a>标签按钮代码中的authorize="yes"表示该按钮需要被判断是否有权限。其中<a>标签的id就需要和上面配置的按钮的编号保持一致，否则运行后你将看不到你这个按钮，因为被删除了。

页面中的<a>标签按钮需要放在一个指定的div容器里面，并通过调用脚本<script>$('#toolbar').authorizeButton()</script>来执行判断你页面中带有authorize="yes"属性的<a>标签按钮是否在后台配置的按钮列表中，如果没有则直接删除。

authorizeButton如何判断的呢？

首先获取当前index页面的iframe框架页id，此id就是后台配置的该菜单页面的id,然后通过id获取对应的按钮权限列表（js代码：var dataJson = top.clients.authorizeButton[moduleId]），然后循环判断，具体请看代码：

$.fn.authorizeButton = function () {
    var moduleId = top.$(".NFine_iframe:visible").attr("id").substr(6);
    var dataJson = top.clients.authorizeButton[moduleId];
    var $element = $(this);
    $element.find('a[authorize=yes]').attr('authorize', 'no');
    if (dataJson != undefined) {
        $.each(dataJson, function (i) {
            $element.find("#" + dataJson[i].F_EnCode).attr('authorize', 'yes');
        });
    }
    $element.find("[authorize=no]").parents('li').prev('.split').remove();
    $element.find("[authorize=no]").parents('li').remove();
    $element.find('[authorize=no]').remove();
}

当然，针对不同用户可以分配不同的角色，而角色可以设置不同的菜单及菜单对应的权限，然后每次登陆成功后，先通过登陆账户的角色ID来获取对应的菜单及按钮列表，关于角色的配置，下一篇文章再将。

以上就是该框架前端及后台对菜单及菜单按钮实现的说明，有什么阐述不清楚的地方，请加群交流，也欢迎留言指正拍砖。群 号：920900045。验证码：dalecloud