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

feat(BC): 增加弹窗出现 Table 示例代码

This commit is contained in:
Argo-PD 2020-04-18 10:36:57 +08:00
parent 4131b5e51d
commit 842827ad22
3 changed files with 137 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/client/Bootstrap.Client/Controllers/HomeController.cs
View File

@ -29,6 +29,12 @@ namespace Bootstrap.Client.Controllers
/// <returns></returns>
public IActionResult Dummy() => View(new NavigatorBarModel(this));
/// <summary>
/// 演示视图
/// </summary>
/// <returns></returns>
public IActionResult Table() => View(new NavigatorBarModel(this));
/// <summary>
/// About 视图
/// </summary>

84
src/client/Bootstrap.Client/Views/Home/Table.cshtml Normal file
View File

@ -0,0 +1,84 @@
@model NavigatorBarModel
@{
ViewData["Title"] = "演示视图";
Layout = "_Default";
}
@section css {
<link href="~/lib/longbow-select/longbow-select.css" rel="stylesheet" />
}
@section javascript {
<script src="~/lib/longbow-select/longbow-select.js"></script>
<script src="~/js/table.js"></script>
}
@section toolbar {
<button class='info btn btn-sm btn-info'><i class='fa fa-info'></i><span>弹窗</span></button>
}
@section query {
<form class="form-inline">
<div class="row">
<div class="form-group col-12">
<label class="control-label" for="item_query_1">演示属性1</label>
<input type="text" class="form-control" id="item_query_1" data-provide="typeahead" data-default-val="" />
</div>
<div class="form-group col-12">
<label class="control-label" for="item_query_2">演示属性2</label>
<input type="text" class="form-control" id="item_query_2" data-default-val="" />
</div>
<div class="form-group col-12">
<label class="control-label" for="item_query_3">演示属性3</label>
<input class="form-control" data-toggle="lgbSelect" data-default-val="" />
<select data-toggle="lgbSelect" class="d-none" id="item_query_3">
<option value="">全部</option>
<option value="0">系统使用</option>
<option value="1">自定义</option>
</select>
</div>
</div>
</form>
}
@section modal {
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">演示视图编辑窗口</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body">
<form class="form-inline">
<div class="row">
<input type="hidden" id="dummyID" />
<div class="form-group col-sm-6">
<label class="control-label" for="item1">演示属性1</label>
<input type="text" class="form-control" id="item1" placeholder="不可为空，50字以内" maxlength="50" data-valid="true" />
</div>
<div class="form-group col-sm-6">
<label class="control-label" for="item2">演示属性2</label>
<input type="text" class="form-control" id="item2" placeholder="不可为空，50字以内" maxlength="50" data-valid="true" />
</div>
<div class="form-group col-sm-6">
<label class="control-label" for="item3">演示属性3</label>
<input class="form-control" data-toggle="lgbSelect" />
<select data-toggle="lgbSelect" class="d-none" data-default-val="1" id="item3">
<option value="0">系统使用</option>
<option value="1">自定义</option>
</select>
</div>
</div>
</form>
</div>
}
<div class="modal fade" id="tableDemo" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myTableDemo" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myTableDemo">查询条件</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body modal-query">
<table id="modalTable"></table>
</div>
<div class="modal-footer">
<button type="button" id="btn_reset" class="btn btn-info btn-fill"><i class="fa fa-trash-o" aria-hidden="true"></i><span>重置</span></button>
<button type="button" id="btn_query" class="btn btn-primary btn-fill"><i class="fa fa-search" aria-hidden="true"></i><span>查询</span></button>
</div>
</div>
</div>
</div>

47
src/client/Bootstrap.Client/wwwroot/js/table.js Normal file
View File

@ -0,0 +1,47 @@
$(function () {
$('#modalTable').smartTable({
search: false,
columns: [
{ title: "示例属性1", field: "Item1", sortable: true },
{ title: "示例属性2", field: "Item2", sortable: true },
{ title: "示例属性3", field: "Item3", sortable: true, formatter: function (value) { return value === 0 ? "系统使用" : "自定义"; } }
],
});
$('table:first').lgbTable({
url: 'api/Dummy',
dataBinder: {
map: {
Id: "#dummyID",
Item1: "#item1",
Item2: "#item2",
Item3: "#item3"
},
events: {
'.info': function (row) {
$('#tableDemo').modal('show');
},
}
},
smartTable: {
search: true,
sortName: 'item1',
queryParams: function (params) {
return $.extend(params, {
item1: $('#item_query_1').val(),
item2: $("#item_query_2").val(),
item3: $("#item_query_3").val()
});
},
columns: [
{ title: "示例属性1", field: "Item1", sortable: false },
{ title: "示例属性2", field: "Item2", sortable: false },
{ title: "示例属性3", field: "Item3", sortable: true, formatter: function (value) { return value === 0 ? "系统使用" : "自定义"; } }
],
exportOptions: {
fileName: "下载示例文件",
ignoreColumn: [0, 5]
}
}
});
});