调整管理成本的展示方式，增加表头固定和首列固定，优化用户体验

Bailun.DC.Web/Areas/Reports/Views/Finance/AdministrativeCost.cshtml

@@ -24,7 +24,7 @@
                     <div class="form-group">
                         <label>&nbsp;</label>
                         <select id="sel_paycompanyid" class="form-control" style="display:none;">
-                            <option value="">请选择付款主体</option> 
+                            <option value="">请选择付款主体</option>
                             <option value="1">广州百伦供应链科技有限公司</option>
                             <option value="2">香港百伦科技有限公司</option>
                             <option value="5">广州电子服装仓</option>
@@ -45,7 +45,7 @@
             <div class="bootstrap-table">
                 <div class="fixed-table-container">
                     <div class="fixed-table-body">
-                        <table id="roletable" style="table-layout: fixed;" class="table table-border table-bordered table-hover table-bg table-sort">
+                        <table id="roletable" style="table table-bordered" class="table table-border table-bordered table-hover table-bg table-sort" data-toggle="table" data-height="350">
                             <thead>
                                 <tr id="tb_head" class="text-c"></tr>
                             </thead>
@@ -54,28 +54,38 @@
                     </div>
                 </div>
             </div>
-         </div>
+        </div>
     </div>
 </div>
 
-@section css{ 
+@section css{
+    <link href="~/css/bootstrap-table-fixed-columns.css" rel="stylesheet" />
     <style>
-        .text-c {background-color:#f5f5f5 !important;text-align:center !important;}
-        .text-c th{height:30px !important;text-align:center;}
+        .text-c {
+            background-color: #f5f5f5 !important;
+            text-align: center !important;
+        }
+
+            .text-c th {
+                height: 30px !important;
+                text-align: center;
+            }
     </style>
 
 }
 
-@section scripts{ 
+@section scripts{
+    <script src="~/js/bootstrap-table-fixed-columns.js"></script>
     <script>
         var tbhead_;
         $(document).ready(function () {
             laydate.render({ elem: '#start' });
             laydate.render({ elem: '#end' });
 
+            $('#roletable').attr('data-height', document.body.clientHeight - 170);
+
             list();
 
-            $('.fixed-table-body').height(document.body.clientHeight - 170);
         })
 
         function list() {
@@ -100,6 +110,8 @@
                 return false;
             }
 
+            $('#roletable').bootstrapTable('destroy');
+
             var lindex = layer.load(1, { shade: false }); //0代表加载的风格，支持0-2
             $.submit({
                 url: '@Url.Content("~/Reports/Finance/AdministrativeCostJson")',
@@ -113,7 +125,7 @@
                         $('#tb_head').html('');
                         $('#tb_body').html('');
 
-                        var str = '<th style="width:100px;">费用类型</th>';
+                        var str = '<th style="width:130px;">费用类型</th>';
                         for (var h = 0; h < result.col.length; h++) {
                             str += '<th style="width:100px;">' + (result.col[h] == null ? "无部门" : result.col[h]) + '</th>';
                         }
@@ -126,7 +138,7 @@
                         for (var i = 0; i < dt.length - 1; i++) {
                             var rowamount = 0;
                             str = '<tr class="tr_' + i + '">';
-                            str += '<td style="width:100px"><span style="cursor:pointer;" onclick="getChildren(' + i + ',\'' + dt[i].item1 + '\')">' + (dt[i].item1) + '</span></td>';
+                            str += '<td style="width:130px"><span style="cursor:pointer;" onclick="getChildren(' + i + ',\'' + dt[i].item1 + '\')">' + (dt[i].item1) + '</span></td>';
 
                             var item2 = dt[i].item2;
                             for (var j = 0; j < item2.length - 1; j++) {
@@ -154,13 +166,31 @@
                         }
                         str += '<td></td></tr>';
 
-                        str += '<tr><td>合计：</td><td style="text-align:right;" colspan="' + (arrTotal.length + 1) + '">' + numFormat(result.amount) + '</td>'
+                        str += '<tr><td>合计：</td>';
+                        for (var a = 0; a < arrTotal.length; a++) {
+                            str += '<td></td>';
+                        }
+
+                        str += '<td>' + numFormat(result.amount) +'</td></tr>';
+
                         $('#tb_body').append(str);
 
                         if (result.isexport == 1) {
                             $('#btnexport').show();
                         }
 
+                        
+                        //初始化固定头和固定列
+                        $("#roletable").bootstrapTable({
+                            fixedColumns: true,
+                            fixedNumber: 1 //固定列数
+                        });
+
+                        $(window).resize(function () {
+                            $('#roletable').attr('data-height', document.body.clientHeight - 170);
+                            $('#roletable').bootstrapTable('resetView');
+                        });
+                        
                     }
                     else {
                         alert(result.msg);
@@ -194,7 +224,7 @@
                 layer.msg('利息支出没有子分类哦');
                 return false;
             }
-            
+
             var objTr = $('.tr_' + trindex + '_');
             if (objTr.length > 0) {
                 if (objTr.attr('ishide') == 1) {