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

refactor: 健康检查明细使用弹窗代替popover

This commit is contained in:
Argo Zhang 2019-08-14 16:30:55 +08:00
parent 8f17092b00
commit f21e26d26a
No known key found for this signature in database
GPG Key ID: 152E398953DDF19F
2 changed files with 47 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
Bootstrap.Admin/Views/Admin/Healths.cshtml
View File

@ -10,8 +10,11 @@
<link href="~/lib/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
</environment>
<style>
.popover-body .bootstrap-table tbody td:first-child {
white-space: nowrap;
@@media (min-width: 768px) {
.card-body .bootstrap-table tr td:last-child {
width: 78px;
text-align: center;
}
}
</style>
}
@ -26,12 +29,33 @@
</environment>
<script src="~/js/healths.js" asp-append-version="true"></script>
}
@section modal {
<div class="modal fade" id="dialogNew" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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="myModalLabel">健康检查明细窗口</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body">
<table id="checkDetail"></table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
<i class="fa fa-times"></i>
<span>关闭</span>
</button>
</div>
</div>
</div>
</div>
}
<div class="card">
<div class="card-header">
健康检查结果
</div>
<div class="card-body">
<div>耗时：<span id="checkTotalEplsed">--</span></div>
<table></table>
<table id="tbCheck"></table>
</div>
</div>

31
Bootstrap.Admin/wwwroot/js/healths.js
View File

@ -9,7 +9,7 @@
return cate[value];
};
var $table = $('table').smartTable({
var $table = $('#tbCheck').smartTable({
sidePagination: "client",
showToggle: false,
showRefresh: false,
@ -22,21 +22,18 @@
{ title: "检查结果", field: "Status", formatter: StatusFormatter },
{
title: "明细数据", field: "Data", formatter: function (value, row, index) {
return '<a tabindex="0" role="button" class="detail btn btn-info" data-trigger="focus" data-container="body" data-toggle="popover" data-placement="left"><i class="fa fa-info"></i><span>明细</span></a>';
return '<button class="detail btn btn-info"><i class="fa fa-info"></i><span>明细</span></button>';
},
events: {
'click .detail': function (e, value, row, index) {
if ($.isEmptyObject(row.Data)) return;
var $button = $(e.currentTarget);
if (!$button.data($.fn.popover.Constructor.DATA_KEY)) {
var content = $.map(row.Data, function (v, name) {
return $.format("<tr><td>{0}</td><td>{1}</td></tr>", name, v);
}).join("");
content = $.format('<div class="bootstrap-table"><div class="fixed-table-container"><div class="fixed-table-body"><table class="table table-bordered table-hover table-sm"><thead><tr><th><div class="th-inner"><b>检查项</b><div></th><th><div class="th-inner"><b>检查值</b></div></th></tr></thead><tbody>{0}</tbody></table></div></div></div>', content);
$button.popover({ title: cate[row.Name], html: true, content: content, placement: $(window).width() < 768 ? "bottom" : "left" });
}
$button.popover('show');
var content = $.map(row.Data, function (v, name) {
return { name: name, value: v };
});
// 弹出 modal 健康检查明细窗口
$checkDetail.bootstrapTable('load', content);
$('#dialogNew').modal('show');
}
}
}
@ -57,4 +54,16 @@
$.footer();
}
});
// init detail Table
var $checkDetail = $('#checkDetail').smartTable({
sidePagination: "client",
showToggle: false,
showRefresh: false,
showColumns: false,
columns: [
{ title: "检查项", field: "name" },
{ title: "值", field: "value" }
]
});
});