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

refactor: 根据最新的longbow-select替换下拉组合框

This commit is contained in:
Argo Zhang 2019-07-19 11:30:56 +08:00
parent f94a6b5f19
commit 0bd08c51b4
No known key found for this signature in database
GPG Key ID: 152E398953DDF19F
3 changed files with 90 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,6 +11,7 @@
<link href="~/lib/nestable2/jquery.nestable.min.css" rel="stylesheet" />
</environment>
<link href="~/lib/treegrid/css/jquery.treegrid.css" rel="stylesheet" />
<link href="~/lib/longbow-select/longbow-select.css" rel="stylesheet" />
<link href="~/css/fa.css" rel="stylesheet" asp-append-version="true" />
}
@section javascript {
@ -26,6 +27,7 @@
<script src="~/lib/treegrid/js/jquery.treegrid.min.js"></script>
<script src="~/lib/bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.min.js"></script>
</environment>
<script src="~/lib/longbow-select/longbow-select.js"></script>
<script src="~/js/menus.js" asp-append-version="true"></script>
}
@section query {
@ -39,41 +41,48 @@
<label class="control-label" for="txt_parent_menus_name">父级菜单</label>
<input type="text" class="form-control" id="txt_parent_menus_name" />
</div>
<div class="form-group form-group-dropdown col-sm-6 col-lg-auto">
<div class="form-group col-sm-6 col-lg-auto">
<label class="control-label" for="sel_menus_category">菜单类别</label>
<div class="dropdown">
<button id="sel_menus_category" class="btn btn-success dropdown-select dropdown-toggle" data-toggle="dropdown">全部</button>
<div class="form-select" data-toggle="lgbSelect">
<input type="hidden" data-toggle="lgbSelect" id="sel_menus_category" />
<input type="text" readonly="readonly" class="form-control form-select-input" placeholder="请选择 ...">
<span class="form-select-append"><i class="fa fa-angle-up"></i></span>
<div class="dropdown-menu-arrow"></div>
<div class="dropdown-menu">
<a href="#" data-val="">全部</a>
<div class="dropdown-divider"></div>
<a href="#" data-val="0">系统菜单</a>
<a href="#" data-val="1">外部菜单</a>
<a class="dropdown-item" href="#" data-val="">全部</a>
<a class="dropdown-item" href="#" data-val="0">系统菜单</a>
<a class="dropdown-item" href="#" data-val="1">外部菜单</a>
</div>
</div>
</div>
<div class="form-group form-group-dropdown col-sm-6 col-lg-auto">
<div class="form-group col-sm-6 col-lg-auto">
<label class="control-label" for="sel_menus_res">菜单类型</label>
<div class="dropdown">
<button id="sel_menus_res" class="btn btn-success dropdown-select dropdown-toggle" data-toggle="dropdown">全部</button>
<div class="form-select" data-toggle="lgbSelect">
<input type="hidden" data-toggle="lgbSelect" id="sel_menus_res" />
<input type="text" readonly="readonly" class="form-control form-select-input" placeholder="请选择 ...">
<span class="form-select-append"><i class="fa fa-angle-up"></i></span>
<div class="dropdown-menu-arrow"></div>
<div class="dropdown-menu">
<a href="#" data-val="">全部</a>
<div class="dropdown-divider"></div>
<a href="#" data-val="0">菜单</a>
<a href="#" data-val="1">资源</a>
<a href="#" data-val="2">按钮</a>
</div>
<a class="dropdown-item" href="#" data-val="">全部</a>
<a class="dropdown-item" href="#" data-val="0">菜单</a>
<a class="dropdown-item" href="#" data-val="1">资源</a>
<a class="dropdown-item" href="#" data-val="2">按钮</a>
</div>
</div>
</div>
<div class="form-group form-group-dropdown col-sm-6 col-lg-auto">
<div class="form-group col-sm-6 col-lg-auto">
<label class="control-label" for="sel_app">所属应用</label>
<div class="dropdown">
<button id="sel_app" class="btn btn-info dropdown-select dropdown-toggle" data-toggle="dropdown" data-default-val="0">未设置</button>
<div class="form-select" data-toggle="lgbSelect">
<input type="hidden" data-toggle="lgbSelect" id="sel_app" data-default-val="0" />
<input type="text" readonly="readonly" class="form-control form-select-input" placeholder="请选择 ...">
<span class="form-select-append"><i class="fa fa-angle-up"></i></span>
<div class="dropdown-menu-arrow"></div>
<div class="dropdown-menu">
@foreach (var kv in Model.Applications)
{
<a href="#" data-val="@kv.Key">@kv.Value</a>
<a class="dropdown-item" href="#" data-val="@kv.Key">@kv.Value</a>
}
</div>
</div>
</div>
</div>
<div class="form-group col-lg-auto flex-lg-fill justify-content-lg-end">
@ -151,47 +160,60 @@
<label class="control-label" for="url">路径</label>
<input type="text" class="form-control flex-sm-fill" id="url" placeholder="不可为空，4000字以内" maxlength="4000" data-valid="true" />
</div>
<div class="form-group form-group-dropdown col-sm-6">
<div class="form-group col-sm-6">
<label class="control-label" for="category">菜单类别</label>
<div class="dropup">
<button id="category" class="btn btn-success dropdown-select dropdown-toggle" data-toggle="dropdown" data-default-val="1">外部菜单</button>
<div class="form-select" data-toggle="lgbSelect">
<input type="hidden" data-toggle="lgbSelect" id="category" data-default-val="1" />
<input type="text" readonly="readonly" class="form-control form-select-input" placeholder="请选择 ...">
<span class="form-select-append"><i class="fa fa-angle-up"></i></span>
<div class="dropdown-menu-arrow"></div>
<div class="dropdown-menu">
<a href="#" data-val="0">系统菜单</a>
<a href="#" data-val="1">外部菜单</a>
<a class="dropdown-item" href="#" data-val="">全部</a>
<a class="dropdown-item" href="#" data-val="0">系统菜单</a>
<a class="dropdown-item" href="#" data-val="1">外部菜单</a>
</div>
</div>
</div>
<div class="form-group form-group-dropdown col-sm-6">
<div class="form-group col-sm-6">
<label class="control-label" for="target">目标</label>
<div class="dropup">
<button id="target" class="btn btn-info dropdown-select dropdown-toggle" data-toggle="dropdown" data-default-val="_self">本窗口</button>
<div class="form-select" data-toggle="lgbSelect">
<input type="hidden" data-toggle="lgbSelect" id="target" data-default-val="_self" />
<input type="text" readonly="readonly" class="form-control form-select-input" placeholder="请选择 ...">
<span class="form-select-append"><i class="fa fa-angle-up"></i></span>
<div class="dropdown-menu-arrow"></div>
<div class="dropdown-menu">
<a href="#" data-val="_self">本窗口</a>
<a href="#" data-val="_blank">新窗口</a>
<a href="#" data-val="_parent">父级窗口</a>
<a href="#" data-val="_top">顶级窗口</a>
<a class="dropdown-item" href="#" data-val="_self">本窗口</a>
<a class="dropdown-item" href="#" data-val="_blank">新窗口</a>
<a class="dropdown-item" href="#" data-val="_parent">父级窗口</a>
<a class="dropdown-item" href="#" data-val="_top">顶级窗口</a>
</div>
</div>
</div>
<div class="form-group form-group-dropdown col-sm-6">
<div class="form-group col-sm-6">
<label class="control-label" for="isRes">菜单类型</label>
<div class="dropup">
<button id="isRes" class="btn btn-success dropdown-select dropdown-toggle" data-toggle="dropdown" data-default-val="0">菜单</button>
<div class="form-select" data-toggle="lgbSelect">
<input type="hidden" data-toggle="lgbSelect" id="isRes" data-default-val="0" />
<input type="text" readonly="readonly" class="form-control form-select-input" placeholder="请选择 ...">
<span class="form-select-append"><i class="fa fa-angle-up"></i></span>
<div class="dropdown-menu-arrow"></div>
<div class="dropdown-menu">
<a href="#" data-val="0">菜单</a>
<a href="#" data-val="1">资源</a>
<a href="#" data-val="2">按钮</a>
<a class="dropdown-item" href="#" data-val="0">菜单</a>
<a class="dropdown-item" href="#" data-val="1">资源</a>
<a class="dropdown-item" href="#" data-val="2">按钮</a>
</div>
</div>
</div>
<div class="form-group form-group-dropdown col-sm-6">
<div class="form-group col-sm-6">
<label class="control-label" for="app">所属应用</label>
<div class="dropup">
<button id="app" class="btn btn-info dropdown-select dropdown-toggle" data-toggle="dropdown" data-default-val="0">未设置</button>
<div class="form-select" data-toggle="lgbSelect">
<input type="hidden" data-toggle="lgbSelect" id="app" data-default-val="0" />
<input type="text" readonly="readonly" class="form-control form-select-input" placeholder="请选择 ...">
<span class="form-select-append"><i class="fa fa-angle-up"></i></span>
<div class="dropdown-menu-arrow"></div>
<div class="dropdown-menu">
@foreach (var kv in Model.Applications)
{
<a href="#" data-val="@kv.Key">@kv.Value</a>
<a class="dropdown-item" href="#" data-val="@kv.Key">@kv.Value</a>
}
</div>
</div>

24
Bootstrap.Admin/wwwroot/js/menus.js
View File

@ -22,7 +22,6 @@ $(function () {
};
var state = [];
var menuResource = ['菜单', '资源', '按钮'];
var $table = $('table');
$table.lgbTable({
url: Menu.url,
@ -106,34 +105,17 @@ $(function () {
{ title: "菜单类别", field: "CategoryName", sortable: true },
{
title: "目标", field: "Target", sortable: true, formatter: function (value, row, index) {
var ret = value;
switch (value) {
case "_self":
ret = "本窗口";
break;
case "_blank":
ret = "新窗口";
break;
case "_parent":
ret = "父级窗口";
break;
case "_top":
ret = "顶级窗口";
break;
default:
break;
}
return ret;
return $('#target').getTextByValue(value);
}
},
{
title: "菜单类型", field: "IsResource", sortable: true, formatter: function (value, row, index) {
return menuResource[value];
return $('#isRes').getTextByValue(value);
}
},
{
title: "所属应用", field: "Application", sortable: true, formatter: function (value, row, index) {
return $('#app').next().find('[data-val="' + value + '"]:first').text();
return $('#app').getTextByValue(value);
}
}
],

48
Bootstrap.Admin/wwwroot/lib/longbow-select/longbow-select.js
View File

@ -50,6 +50,13 @@
if (this.$element.prop('nodeName') === 'SELECT') this.initBySelect();
else this.init();
if (this.options.borderClass) {
this.$input.addClass(this.options.borderClass);
}
this.$input.attr('placeholder', this.options.placeholder);
this.$element.data(lgbSelect.DataKey, this);
// bind event
this.$ctl.on('click', '.form-select-input', function (e) {
e.preventDefault();
@ -72,7 +79,20 @@
that.closeMenu();
});
this.$element.data(lgbSelect.DataKey, this);
var getUID = function (prefix) {
if (!prefix) prefix = 'lgb';
do prefix += ~~(Math.random() * 1000000);
while (document.getElementById(prefix));
return prefix;
};
// init for
var $for = this.$ctl.parent().find('[for="' + this.$element.attr('id') + '"]');
if ($for.length > 0) {
var id = getUID();
this.$input.attr('id', id);
$for.attr('for', id);
}
};
_proto.init = function () {
@ -83,10 +103,6 @@
this.$input = this.$ctl.find('.form-select-input');
this.$menus = this.$ctl.find('.dropdown-menu');
if (this.options.borderClass) {
this.$input.addClass(this.options.borderClass);
}
this.source = this.$menus.children().map(function (index, ele) {
return { value: $(ele).attr('data-val'), text: $(ele).text(), selected: $(ele).selected };
});
@ -102,13 +118,6 @@
};
_proto.initBySelect = function () {
var getUID = function (prefix) {
if (!prefix) prefix = 'lgb';
do prefix += ~~(Math.random() * 1000000);
while (document.getElementById(prefix));
return prefix;
};
var that = this;
// 原有控件
@ -121,19 +130,6 @@
this.$input = this.$ctl.find('.form-select-input');
this.$menus = this.$ctl.find('.dropdown-menu');
// init for
var $for = this.$element.parent().find('[for="' + this.$element.attr('id') + '"]');
if ($for.length > 0) {
var id = getUID();
this.$input.attr('id', id);
$for.attr('for', id);
}
if (this.options.borderClass) {
this.$input.addClass(this.options.borderClass);
}
this.$input.attr('placeholder', this.options.placeholder);
// init dropdown-menu data
var data = this.$element.find('option').map(function () {
return { value: this.value, text: this.text, selected: this.selected }
@ -154,7 +150,7 @@
// replace element select -> input hidden
this.$element.remove();
this.$element = $('<input type="hidden" />').val(that.val()).insertBefore(this.$input);
this.$element = $('<input type="hidden" data-toggle="lgbSelect" />').val(that.val()).insertBefore(this.$input);
// bind ori atts
attrs.forEach(function (v) {