bootstrap-table 行合並和列合並,以及固定列寬度等問題


列合並和列寬度固定:

 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});
        }
 });

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM