bootstrap-table 行合并和列合并,以及固定列宽度等问题

时间:2021-11-09 14:47:11

列合并和列宽度固定:

 1  .setWidth {
 2         table-layout: fixed;
 3     }
 4 
 5         .setWidth > thead > tr > th {
 6             width: 80px;
 7         }
 8 <table class="setWidth" id="EstateTable" data-mobile-responsive="true">
 9                                     <colgroup>
10                                         <col style="width:36px;" />
11                                         <col style="width:17%" />
12                                         <col style="width:48px;" />
13                                         <col style="width:60px;" />
14                                         <col style="width:12%;" />
15                                         @*<col style="width:7%;" />
16                                             <col style="width:7%;" />*@
17                                         <col style="width:6%;" />
18                                         <col style="width:144px;" />
19                                         <col style="width:48px;" />
20                                         <col style="width:48px;" />
21                                         <col style="width:6%;" />
22                                         <col style="" />
23                                     </colgroup>
24                                     <thead>
25 
26                                         <tr>
27                                             <th data-field="state" style="width:36px;" data-checkbox="true"></th>
28                                             <th data-field="EstateType" data-visible="false">盘源类型ID</th>
29                                             <th data-field="ID" data-visible="false">ID</th>
30                                             <th data-field="EstateName" data-formatter="nameFormatter">楼盘名称</th>
31                                             <th data-field="EstateTypeDisplay">类型</th>
32                                             <th data-field="Address" style="width:60px;" align="center">城区</th>
33                                             <th data-field="Developer">发展商</th>
34 
35                                             @*<th data-field="EstateModeDisplay">楼宇类型</th>*@
36                                             @*<th data-field="Area">占地面积</th>
37                                                 <th data-field="ConstrctionArea">建筑面积</th>*@
38                                             @*<th data-field="ProjectProxyModeDisplay">代理类型</th>*@
39                                             <th data-field="RegisterName">跟进人</th>
40                                             <th data-field="RegisteDate">登记时间</th>
41                                             <th data-field="FollowLevelDisplay">评级</th>
42                                             <th data-field="BusinessCard" data-formatter="imgFormatter">名片</th>
43                                             <th data-field="AuthStatusDisplay" data-formatter="actionFormatter">状态</th>
44                                             <th data-field="operation" width="120px;" data-formatter="operateFormatter">操作</th>
45 
46                                         </tr>
47                                     </thead>
48                                 </table>

行合并:

$('#EstateTable').bootstrapTable({
            url: '/table/tableStyle',
            method:'post',
            pagination: true, //分页
            pageNumber:1,                       //初始化加载第一页,默认第一页
            pageSize: 10,                       //每页的记录行数(*)
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
            search: false, //显示搜索框
            sidePagination: "server"
      
onLoadSuccess: function (data) {
        $('#EstTable').bootstrapTable('mergeCells', {index: 1, field: 'name', rowspan: 3});
        }
 });