zoukankan      html  css  js  c++  java
  • bootstrap-table 行合并和列合并,以及固定列宽度等问题

    列合并和列宽度固定:

     1  .setWidth {
     2         table-layout: fixed;
     3     }
     4 
     5         .setWidth > thead > tr > th {
     6              80px;
     7         }
     8 <table class="setWidth" id="EstateTable" data-mobile-responsive="true">
     9                                     <colgroup>
    10                                         <col style="36px;" />
    11                                         <col style="17%" />
    12                                         <col style="48px;" />
    13                                         <col style="60px;" />
    14                                         <col style="12%;" />
    15                                         @*<col style="7%;" />
    16                                             <col style="7%;" />*@
    17                                         <col style="6%;" />
    18                                         <col style="144px;" />
    19                                         <col style="48px;" />
    20                                         <col style="48px;" />
    21                                         <col style="6%;" />
    22                                         <col style="" />
    23                                     </colgroup>
    24                                     <thead>
    25 
    26                                         <tr>
    27                                             <th data-field="state" style="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="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});
            }
        });
  • 相关阅读:
    [摘录]第9章 解密优势谈判高手
    [摘录]第8章 与非美国人谈判的技巧
    [摘录]第7章 谈判压力点
    [摘录]第6章 解决棘手问题的谈判艺术
    [摘录]第5章 谈判原则
    [摘录]第4章 不道德的谈判策略
    [摘录]第3章 终局谈判策略
    [摘录]第2章 中场谈判技巧
    [摘录]第1章 开局谈判技巧
    SQL Server 视图索引
  • 原文地址:https://www.cnblogs.com/toloe/p/7927997.html
Copyright © 2011-2022 走看看