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

This commit is contained in:
Argo-Lenovo 2016-11-03 16:28:05 +08:00
parent 7a6edef11b
commit a69d75e731
4 changed files with 81 additions and 7 deletions

View File

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

View File

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

View File

@ -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>
<input type="text" class="form-control" id="parentId" name="parentId" maxlength="50" />
<label class="control-label" for="parentId">父级菜单</label>
<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>

View File

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