orga0063
/
BootstrapAdmin11
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

This commit is contained in:
Argo-Lenovo 2016-12-20 16:28:00 +08:00
parent f51237f9ea
commit b54bc19e81
12 changed files with 86 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Bootstrap.Admin/Bootstrap.Admin.csproj
View File

@ -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" />

6
Bootstrap.Admin/Content/css/jquery.nestable.css
View File

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

41
Bootstrap.Admin/Content/js/common-scripts.js
View File

@ -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');

61
Bootstrap.Admin/Scripts/Menus.js
View File

@ -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({
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();
}
});
$nestMenu.nestMenu(initNestMenu);
}
}
});
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);
$('#btnIcon').find('i').attr('class', icon);
$inputIcon.val(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());
$('#parentName').val($('.dd3-content :radio:checked').next('span').text());
$parentMenuID.val($('.dd3-content :radio:checked').val());
$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) {
$('#order').val(10 + index * 10);
var $data = $(data[index]);
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();
});

18
Bootstrap.Admin/Scripts/Roles.js
View File

@ -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 () {
var val = $(this).prop('checked');
var child = $(this).parent().parent().next();
if (child.hasClass('dd-list')) {
child.find(':checkbox').prop('checked', val);
}
$nestMenu.nestMenu(function () {
$nestMenuInput = $nestMenu.find('div.dd3-content');
$nestMenuInput.on('click', ':checkbox', function () {
var val = $(this).prop('checked');
var child = $(this).parent().parent().next();
if (child.hasClass('dd-list')) {
child.find(':checkbox').prop('checked', val);
}
}).find('label:last').hide();
});
});

3
Bootstrap.Admin/Views/Admin/Menus.cshtml
View File

@ -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")
}

2
Bootstrap.Admin/Views/Admin/Roles.cshtml
View File

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

12
Bootstrap.Admin/Views/Shared/MenuTree.cshtml
View File

@ -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">
@Html.Partial("SubMenuTree", @Model)
</div>
}
<div class="dd" id="nestable_menu">
<ol class="dd-list"></ol>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

5
Bootstrap.Admin/Views/Shared/NavigatorConfig.cshtml
View File

@ -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>

11
Bootstrap.Admin/Views/Shared/SubMenu.cshtml
View File

@ -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>

14
Bootstrap.Admin/Views/Shared/SubMenuTree.cshtml
View File

@ -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>

4
Bootstrap.Client/Bootstrap.Client.csproj
View File

@ -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>