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

 

转载于:https://www.cnblogs.com/toloe/p/7927997.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap Table 是一款非常流的 jQuery 表格插件,它不仅提供了丰富的功能和样式,还支持动态合并。在使用 Bootstrap Table 时,如果需要对表格的标题(即表头)进合并,可以通过以下方法实现: 1. 使用 colspan 属性 在表格中,可以使用 colspan 属性将多个单元格合并为一个单元格。因此,如果需要合并表头中的多个单元格,只需在 HTML 代码中设置相应的 colspan 值即可。 例如,如果需要将第一和第二的表头合并成一个单元格,可以这样写: ```html <thead> <tr> <th colspan="2">姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> ``` 2. 使用表格插件 API Bootstrap Table 提供了一些 API 方法,可以通过 JavaScript 代码动态地合并。其中,`mergeCells(options)` 方法可以用于合并单元格,它接受一个选项对象作为参数,可以设置要合并的单元格的起始、起始、结束和结束。 例如,如果需要将第一的第一和第二合并成一个单元格,可以这样写: ```javascript $('#table').bootstrapTable('mergeCells', { index: 0, field: 'name', colspan: 2, }); ``` 其中,`index` 属性表示要操作的的索引(从 0 开始),`field` 属性表示要操作的的字段名,`colspan` 属性表示要合并数。 类似地,`mergeCells(options)` 方法也可以用于合并,只需将 `colspan` 属性改为 `rowspan` 即可。此外,还可以使用 `mergeCells(options, mergeFooter)` 方法合并表格底部的,其中 `mergeFooter` 参数表示是否合并底部。 总之,Bootstrap Table 提供了多种方法用于动态合并,可以根据实际需求选择合适的方法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值