增加父级菜单与菜单顺序弹窗功能

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

@@ -159,6 +159,24 @@
         background: #d5d5d5;
     }
 
+    .dd3-content label {
+        display: block;
+        cursor: pointer;
+    }
+
+        .dd3-content label span {
+            position: absolute;
+        }
+
+            .dd3-content label span.active {
+                color: darkred;
+            }
+
+        .dd3-content label input {
+            margin-right: 6px;
+            cursor: pointer;
+        }
+
 .dd-dragel > .dd3-item > .dd3-content {
     margin: 0;
 }

Bootstrap.Admin/Scripts/Menus.js

@@ -95,18 +95,68 @@
         $('#btnIcon i').attr('class', icon);
     });
 
-    $('#btnMenu').click(function () {
+    // 排序按钮
+    $('#btnMenuOrder').click(function () {
+        $('li.dd-item').remove('[data-id="0"]');
         $('#dialogNew div.modal-dialog').hide();
+        $('.menu-content button:last').data('type', 'order');
+        // handler new menu
+        if ($('#menuID').val() == "") {
+            var menuName = $('#name').val();
+            if (menuName == "") menuName = "新建菜单-未命名";
+            $('.dd-list').append($.format('<li class="dd-item dd3-item" data-id="0"><div class="dd-handle dd3-handle"></div><div class="dd3-content"><label><span>{0}</span></label></div></li>', menuName));
+        }
+        var did = $('#menuID').val();
+        if (did == "") did = 0;
+        $('.dd-list li[data-id="' + did + '"] span').addClass('active');
         $('.menu-content').show();
+        $('div.dd3-content input').hide();
+    });
+
+    // 选择父节点按钮
+    $('#btnMenuParent').click(function () {
+        $('li.dd-item').remove('[data-id="0"]');
+        $('#dialogNew div.modal-dialog').hide();
+        $('.menu-content button:last').data('type', 'parent');
+        $('.menu-content').show();
+        $('div.dd3-content :checkbox').hide();
+        $('div.dd3-content :radio').show();
     });
 
     $('.menu-content button').click(function () {
+        // remove active css
+        $('.dd3-content span').removeClass('active');
         $('.menu-content').hide();
         $('#dialogNew div.modal-dialog').show();
     });
 
-    $('.menu-content button:last').click(function () {
+    //$('.dd3-content label').click(function (e) {
+    //    var c = $(this).parents('div').children('label').children('input:not(:hidden)');
+    //    if (c.length == 1) c.get(0).click();
+    //    window.console.log($(this).html());
+    //});
 
+    $('.menu-content button:last').click(function () {
+        var type = $('.menu-content button:last').data('type');
+        switch (type) {
+            case "parent":
+                $('#parentId').val($('.dd3-content :radio:checked').val());
+                $('#parentName').val($('.dd3-content :radio:checked').next('span').text());
+                break;
+            case "order":
+                var data = $('#nestable_menu').nestable('serialize');
+                var mid = $('#menuID').val();
+                for (index in data) {
+                    window.console.log(index);
+                    if (data[index].id == mid || data[index] == 0) {
+                        $('#order').val(10 + index * 10);
+                        break;
+                    }
+                }
+                break;
+            default:
+                break;
+        }
     });
 
     $('#nestable_menu').nestable();

Bootstrap.Admin/Views/Admin/Menus.cshtml

@@ -45,8 +45,14 @@
     <div class="modal-body">
         <form class="form-inline" id="dataForm" name="dataForm" role="form">
             <div class="form-group col-lg-6">
-                <label class="control-label" for="parentId">父级ID</label>
+                <label class="control-label" for="parentId">父级菜单</label>
-                <input type="text" class="form-control" id="parentId" name="parentId" maxlength="50" />
+                <div class="input-group">
+                    <input type="text" class="form-control hide" id="parentId" name="parentId" />
+                    <input type="text" class="form-control disabled" disabled id="parentName" />
+                    <span class="input-group-btn">
+                        <button id="btnMenuParent" class="btn btn-default" type="button">选择</button>
+                    </span>
+                </div>
             </div>
             <div class="form-group col-lg-6">
                 <label class="control-label" for="name">菜单名称</label>
@@ -58,7 +64,7 @@
                 <div class="input-group">
                     <input type="text" class="form-control" id="order" name="order" />
                     <span class="input-group-btn">
-                        <button id="btnMenu" class="btn btn-default" type="button"><i></i>调整</button>
+                        <button id="btnMenuOrder" class="btn btn-default" type="button">调整</button>
                     </span>
                 </div>
             </div>
@@ -79,7 +85,7 @@
                 <label class="control-label" for="category">类别</label>
                 <!-- Split button -->
                 <div class="btn-group">
-                    <input type="text" class="form-control hide" id="category" name="category" value="0" />
+                    <input type="text" class="form-control hide" id="category" name="category" value="1" />
                     <button type="button" class="btn btn-default">自定义菜单</button>
                     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                         <span class="caret"></span>

Bootstrap.Admin/Views/Shared/MenuTree.cshtml

@@ -11,7 +11,7 @@
                 {
                     <li class="dd-item dd3-item" data-id="@menu.ID">
                         <div class="dd-handle dd3-handle"></div>
-                        <div class="dd3-content">@menu.Name</div>
+                        <div class="dd3-content"><label><input name="menuParent" type="checkbox" value="@menu.ID" /><input type="radio" name="menu" value="@menu.ID" /><span>@menu.Name</span></label></div>
                     </li>
                 }
             </ol>