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

Bootstrap.Admin/Views/Admin/Healths.cshtml

@@ -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 {
+        @@media (min-width: 768px) {
-            white-space: nowrap;
+            .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>

Bootstrap.Admin/wwwroot/js/healths.js

@@ -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);
+                        var content = $.map(row.Data, function (v, name) {
-                        if (!$button.data($.fn.popover.Constructor.DATA_KEY)) {
+                            return { name: name, value: v };
-                            var content = $.map(row.Data, function (v, name) {
+                        });
-                                return $.format("<tr><td>{0}</td><td>{1}</td></tr>", name, v);
+                        // 弹出 modal 健康检查明细窗口
-                            }).join("");
+                        $checkDetail.bootstrapTable('load', content);
-                            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);
+                        $('#dialogNew').modal('show');
-                            $button.popover({ title: cate[row.Name], html: true, content: content, placement: $(window).width() < 768 ? "bottom" : "left" });
-                        }
-                        $button.popover('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" }
+        ]
+    });
 });