删除SubMenu与SubMenuTree两个视图，菜单相关页面均由js来加载，重写菜单Order排序方法

Bootstrap.Admin/Bootstrap.Admin.csproj

@@ -309,8 +309,6 @@
     <Content Include="Views\Shared\MenuTree.cshtml" />
     <Content Include="Views\Shared\NavigatorConfig.cshtml" />
     <Content Include="Views\Shared\SubNavigation.cshtml" />
-    <Content Include="Views\Shared\SubMenu.cshtml" />
-    <Content Include="Views\Shared\SubMenuTree.cshtml" />
     <Content Include="Views\Home\Lock.cshtml" />
     <Content Include="Views\Home\Register.cshtml" />
     <Content Include="Views\Admin\Notifications.cshtml" />

Bootstrap.Admin/Content/css/jquery.nestable.css

@@ -182,6 +182,12 @@
             cursor: pointer;
         }
 
+    .dd3-content > span {
+        position: absolute;
+        right: 15px;
+        top: 6px;
+    }
+
 .dd-dragel > .dd3-item > .dd3-content {
     margin: 0;
 }

Bootstrap.Admin/Content/js/common-scripts.js

@@ -1,4 +1,43 @@
-$(function () {
+(function ($) {
+    var cascadeMenu = function (menus) {
+        var html = "";
+        $.each(menus, function (index, menu) {
+            if (menu.Menus.length == 0) {
+                html += $.format('<li class="dd-item dd3-item" data-id="{0}" data-order="{4}" data-category="{3}"><div class="dd-handle dd3-handle"></div><div class="dd3-content"><label><input type="checkbox" value="{0}"><span><i class="{1}"></i>{2}</span></label><label><input type="radio" name="menu" value="{0}"><span><i class="{1}"></i>{2}</span></label><span>{4}</span></div></li>', menu.ID, menu.Icon, menu.Name, menu.Category, menu.Order);
+            }
+            else {
+                html += $.format('<li class="dd-item dd3-item" data-id="{0}" data-order="{5}" data-category="{3}"><div class="dd-handle dd3-handle"></div><div class="dd3-content"><label><input type="checkbox" value="{0}"><span><i class="{1}"></i>{2}</span></label><label><input type="radio" name="menu" value="{0}"><span><i class="{1}"></i>{2}</span></label><span>{5}</span></div><ol class="dd-list">{4}</ol></li>', menu.ID, menu.Icon, menu.Name, menu.Category, cascadeSubMenu(menu.Menus), menu.Order);
+            }
+        });
+        return html;
+    };
+
+    var cascadeSubMenu = function (menus) {
+        var html = ""
+        $.each(menus, function (index, menu) {
+            html += $.format('<li class="dd-item dd3-item" data-id="{0}" data-order="{4}" data-category="{3}"><div class="dd-handle dd3-handle"></div><div class="dd3-content"><label><input type="checkbox" value="{0}"><span><i class="{1}"></i>{2}</span></label><label><input type="radio" name="menu" value="{0}"><span><i class="{1}"></i>{2}</span></label><span>{4}</span></div></li>', menu.ID, menu.Icon, menu.Name, menu.Category, menu.Order);
+        });
+        return html;
+    };
+
+    $.fn.extend({
+        nestMenu: function (callback) {
+            var $this = $(this);
+            $.bc({
+                Id: 0, url: Menu.url, data: { type: "user" }, swal: false,
+                callback: function (result) {
+                    var html = "";
+                    if ($.isArray(result)) html = cascadeMenu(result);
+                    $this.find('ol:first').html(html);
+                    $this.nestable();
+                    callback();
+                }
+            });
+        }
+    });
+})(jQuery);
+
+$(function () {
     var $sidebar = $("#sidebar");
     var $main = $('#main-content');
     var $breadNav = $('#breadNav');

Bootstrap.Admin/Scripts/Menus.js

@@ -16,10 +16,14 @@
     var $parentMenuID = $('#parentId');
     var $parentMenuName = $('#parentName');
     var $category = $('#category');
-    $nestMenuInput.find('label:first').hide();
+
+    var initNestMenu = function () {
+        $nestMenuInput = $nestMenu.find('div.dd3-content');
+        $nestMenuInput.find('label:first').hide();
+    }
 
     var bsa = new BootstrapAdmin({
-        url: '../api/Menus',
+        url: Menu.url,
         dataEntity: new DataEntity({
             map: {
                 ID: "menuID",
@@ -64,41 +68,11 @@
         callback: function (result) {
             if (!result.success) return;
             if ((result.oper == "save") || result.oper == "del") {
-                $.bc({
+                $nestMenu.nestMenu(initNestMenu);
-                    Id: 0, url: Menu.url, data: { type: "user" }, swal: false,
-                    callback: function (result) {
-                        var html = "";
-                        if ($.isArray(result)) html = cascadeMenu(result);
-                        $nestMenu.find('ol:first').html(html);
-                        $nestMenuInput = $nestMenu.find('div.dd3-content');
-                        $nestMenuInput.find('label:first').hide();
-                    }
-                });
             }
         }
     });
 
-    var cascadeMenu = function (menus) {
-        var html = "";
-        $.each(menus, function (index, menu) {
-            if (menu.Menus.length == 0) {
-                html += $.format('<li class="dd-item dd3-item" data-id="{0}" data-category="{3}"><div class="dd-handle dd3-handle"></div><div class="dd3-content"><label><input type="checkbox" value="{0}"><span><i class="{1}"></i>{2}</span></label><label><input type="radio" name="menu" value="{0}"><span><i class="{1}"></i>{2}</span></label></div></li>', menu.ID, menu.Icon, menu.Name, menu.Category);
-            }
-            else {
-                html += $.format('<li class="dd-item dd3-item" data-id="{0}" data-category="{3}"><div class="dd-handle dd3-handle"></div><div class="dd3-content"><label><input type="checkbox" value="{0}"><span><i class="{1}"></i>{2}</span></label><label><input type="radio" name="menu" value="{0}"><span><i class="{1}"></i>{2}</span></label></div></li><ol class="dd-list">{4}</ol>', menu.ID, menu.Icon, menu.Name, menu.Category, cascadeSubMenu(menu.Menus));
-            }
-        });
-        return html;
-    };
-
-    var cascadeSubMenu = function (menus) {
-        var html = ""
-        $.each(menus, function (index, menu) {
-            html += $.format('<li class="dd-item dd3-item" data-id="{0}" data-category="{3}"><div class="dd-handle dd3-handle"></div><div class="dd3-content"><label><input type="checkbox" value="{0}"><span><i class="{1}"></i>{2}</span></label><label><input type="radio" name="menu" value="{0}"><span><i class="{1}"></i>{2}</span></label></div></li>', menu.ID, menu.Icon, menu.Name, menu.Category);
-        });
-        return html;
-    }
-
     $('table').smartTable({
         url: Menu.url,            //请求后台的URL（*）
         sortName: 'Order',
@@ -178,8 +152,8 @@
 
     $dialogIcon.find('div.modal-footer').on('click', 'button:last', function () {
         var icon = $pickIcon.attr('class');
-        $('#icon').val(icon);
+        $inputIcon.val(icon);
-        $('#btnIcon').find('i').attr('class', icon);
+        $btnPickIcon.find('i').attr('class', icon);
     });
 
     // 排序按钮
@@ -196,7 +170,7 @@
             var menuName = $('#name').val();
             var menuCate = $category.selectval();
             if (menuName == "") menuName = "新建菜单-未命名";
-            $nestMenu.find('ol.dd-list:first').append($.format('<li class="dd-item dd3-item" data-id="0" data-category="{1}"><div class="dd-handle dd3-handle"></div><div class="dd3-content"><label><span>{0}</span></label></div></li>', menuName, menuCate));
+            $nestMenu.find('ol.dd-list:first').append($.format('<li class="dd-item dd3-item" data-id="0" data-order="10" data-category="{1}"><div class="dd-handle dd3-handle"></div><div class="dd3-content"><label><span>{0}</span></label></div></li>', menuName, menuCate));
         }
         $nestMenu.find('li[data-id="' + did + '"] > div.dd3-content span').addClass('active');
         $dialogMenu.show().adjustDialog();
@@ -227,15 +201,17 @@
         var type = $(this).data('type');
         switch (type) {
             case "parent":
-                $('#parentId').val($('.dd3-content :radio:checked').val());
+                $parentMenuID.val($('.dd3-content :radio:checked').val());
-                $('#parentName').val($('.dd3-content :radio:checked').next('span').text());
+                $parentMenuName.val($('.dd3-content :radio:checked').next('span').text());
                 break;
             case "order":
-                var data = $('#nestable_menu').nestable('serialize');
+                var data = $nestMenu.find('li:visible');
                 var mid = $('#menuID').val();
                 for (index in data) {
-                    if (data[index].id == mid || data[index] == 0) {
+                    var $data = $(data[index]);
-                        $('#order').val(10 + index * 10);
+                    if ($data.attr('data-id') == mid || $data.attr('data-id') == 0) {
+                        if (index > 0) index--;
+                        $('#order').val($(data[index]).attr('data-order'));
                         break;
                     }
                 }
@@ -251,7 +227,8 @@
         if (icon == "") icon = "fa fa-dashboard";
         $btnPickIcon.find('i').attr('class', icon);
     });
-    $nestMenu.nestable();
+
+    $nestMenu.nestMenu(initNestMenu);
     // select
     $('.btn-select').select();
 });

Bootstrap.Admin/Scripts/Roles.js

@@ -11,7 +11,6 @@
     var $btnSubmitMenu = $('#btnSubmitMenu');
     var $nestMenu = $('#nestable_menu');
     var $nestMenuInput = $nestMenu.find('div.dd3-content');
-    $nestMenuInput.find('label:last').hide();
 
     var bsa = new BootstrapAdmin({
         url: Role.url,
@@ -113,8 +112,6 @@
         }
     });
 
-    $nestMenu.nestable();
-
     $('table').smartTable({
         url: Role.url,            //请求后台的URL（*）
         sortName: 'RoleName',
@@ -134,11 +131,14 @@
         }
     });
 
-    $nestMenuInput.on('click', ':checkbox', function () {
+    $nestMenu.nestMenu(function () {
-        var val = $(this).prop('checked');
+        $nestMenuInput = $nestMenu.find('div.dd3-content');
-        var child = $(this).parent().parent().next();
+        $nestMenuInput.on('click', ':checkbox', function () {
-        if (child.hasClass('dd-list')) {
+            var val = $(this).prop('checked');
-            child.find(':checkbox').prop('checked', val);
+            var child = $(this).parent().parent().next();
-        }
+            if (child.hasClass('dd-list')) {
+                child.find(':checkbox').prop('checked', val);
+            }
+        }).find('label:last').hide();
     });
 });

Bootstrap.Admin/Views/Admin/Menus.cshtml

@@ -99,6 +99,7 @@
                     <div class="input-group">
                         <input type="text" class="form-control" id="order" name="order" data-default-val="10" placeholder="默认为10" maxlength="8" />
                         <span class="input-group-btn">
+                            <button id="btnClearIcon" class="btn btn-default" type="button"><i class="fa fa-remove"></i></button>
                             <button id="btnMenuOrder" class="btn btn-default" type="button"><i class="fa fa-list-ol"></i>调整</button>
                         </span>
                     </div>
@@ -162,5 +163,5 @@
             <button type="button" class="btn btn-primary" id="btnSubmitIcon">保存</button>
         </div>
     </div>
-    @Html.Partial("MenuTree", Model.Navigations.Union(Model.Menus))
+    @Html.Partial("MenuTree")
 }

Bootstrap.Admin/Views/Admin/Roles.cshtml

@@ -81,5 +81,5 @@
 @section customModal{
     @Html.Partial("UserConfig")
     @Html.Partial("GroupConfig")
-    @Html.Partial("NavigatorConfig", Model.Navigations.Union(Model.Menus))
+    @Html.Partial("NavigatorConfig")
 }

Bootstrap.Admin/Views/Shared/MenuTree.cshtml

@@ -1,17 +1,13 @@
-@model IEnumerable<Menu>
+<div id="dialogSubMenu" class="modal-dialog">
-<div id="dialogSubMenu" class="modal-dialog">
     <div class="modal-content menu-content">
         <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             <h4 class="modal-title" id="myMenuModalLabel">请选择菜单</h4>
         </div>
         <div class="modal-body">
-            @if (Model.Count() > 0)
+            <div class="dd" id="nestable_menu">
-            {
+                <ol class="dd-list"></ol>
-                <div class="dd" id="nestable_menu">
+            </div>
-                    @Html.Partial("SubMenuTree", @Model)
-                </div>
-            }
         </div>
         <div class="modal-footer">
             <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

Bootstrap.Admin/Views/Shared/NavigatorConfig.cshtml

@@ -1,6 +1,5 @@
-@model IEnumerable<Menu>
+<div class="modal fade" id="dialogMenu" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myMenuModalLabel" aria-hidden="true">
-<div class="modal fade" id="dialogMenu" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myMenuModalLabel" aria-hidden="true">
     <div class="modal-dialog">
-        @Html.Partial("MenuTree", Model)
+        @Html.Partial("MenuTree")
     </div>
 </div>

Bootstrap.Admin/Views/Shared/SubMenu.cshtml

@@ -1,11 +0,0 @@
-@model Menu
-<ul>
-    <li>
-        <p>@Model.Name</p>
-    </li>
-    @foreach (var menu in Model.Menus)
-    {
-        <li><a href="@Url.Content(menu.Url)" target="@menu.Target"><i class="@menu.Icon"></i>@menu.Name</a></li>
-    }
-</ul>
-

Bootstrap.Admin/Views/Shared/SubMenuTree.cshtml

@@ -1,14 +0,0 @@
-@model IEnumerable<Menu>
-<ol class="dd-list">
-    @foreach (var menu in Model)
-    {
-        <li class="dd-item dd3-item" data-id="@menu.ID" data-category="@menu.Category">
-            <div class="dd-handle dd3-handle"></div>
-            <div class="dd3-content"><label><input type="checkbox" value="@menu.ID" /><span><i class="@menu.Icon"></i>@menu.Name</span></label><label><input type="radio" name="menu" value="@menu.ID" /><span><i class="@menu.Icon"></i>@menu.Name</span></label></div>
-            @if (menu.Menus.Count() > 0)
-            {
-                @Html.Partial("SubMenuTree", menu.Menus)
-            }
-        </li>
-    }
-</ol>

Bootstrap.Client/Bootstrap.Client.csproj

@@ -101,7 +101,9 @@
   <ItemGroup>
     <Content Include="Global.asax" />
     <Content Include="Login\Login.html" />
-    <Content Include="Web.config" />
+    <Content Include="Web.config">
+      <SubType>Designer</SubType>
+    </Content>
     <Content Include="Views\Shared\_Layout.cshtml" />
     <Content Include="Views\Home\Index.cshtml" />
   </ItemGroup>