• Bootstrap教程-table合并单元格
  • 阿迪王 发表于 2016/2/23 11:10:00 | 分类标签: Bootstrap教程 合并单元格
  • 表格的行列合并功能不用引用其他的js文件,只需要在cshtml页面使用table的colspan和rowspan即可实现。
    1、cshtml页面
    <table id="tb_report">
    <thead>
    <tr>
    <th colspan="4" data-valign="middle" data-align="center">第一季度</th>
    <th colspan="4" data-valign="middle" data-align="center">第二季度</th>
    <th colspan="4" data-valign="middle" data-align="center">第三季度</th>
    <th colspan="4" data-valign="middle" data-align="center">第四季度</th>
    <th data-field="TotalCount" rowspan="2" data-valign="middle" data-align="center">年度汇总</th>
    </tr>
    <tr>
    <th data-field="JanCount" data-align="center">一月</th>
    <th data-field="FebCount" data-align="center">二月</th>
    <th data-field="MarCount" data-align="center">三月</th>
    <th data-field="FirstQuarter" data-align="center">第一季度</th>

    <th data-field="AprCount" data-align="center">四月</th>
    <th data-field="MayCount" data-align="center">五月</th>
    <th data-field="JunCount" data-align="center">六月</th>
    <th data-field="SecondQuarter" data-align="center">第二季度</th>

    <th data-field="JulCount" data-align="center">七月</th>
    <th data-field="AguCount" data-align="center">八月</th>
    <th data-field="SepCount" data-align="center">九月</th>
    <th data-field="ThirdQuarter" data-align="center">第三季度</th>

    <th data-field="OctCount" data-align="center">十月</th>
    <th data-field="NovCount" data-align="center">十一月</th>
    <th data-field="DecCount" data-align="center">十二月</th>
    <th data-field="ForthQuarter" data-align="center">第四季度</th>

    </tr>
    </thead>
    </table>
    2、js初始化并无特殊
    $('#tb_report').bootstrapTable({
    url: '/GroupColumns/GetReport', //请求后台的URL(*)
    method: 'get', //请求方式(*)
    toolbar: '#toolbar', //工具按钮用哪个容器
    striped: true, //是否显示行间隔色
    cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
    pagination: true, //是否显示分页(*)
    sortOrder: "asc", //排序方式
    queryParams: oTableInit.queryParams,//传递参数(*)
    sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
    pageNumber: 1, //初始化加载第一页,默认第一页
    pageSize: 10, //每页的记录行数(*)
    pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
    });
    怎么样,有没有很简单。当然,有人说了,你都可以不用js初始化,直接在cshtml里面用table的属性去设置url、分页等信息。确实,如果我们看过它的api,会发现它初始化的每一个属性都对应一个table的属性。型如
    如果你的表格没有一些特殊的事件需要处理,这样是完全没有问题的。
  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款

  • 感谢本文作者
  • 作者头像
  • 昵称:阿迪王
  • 加入时间:2013/6/13 0:00:00
  • TA的签名
  • 这家伙很懒,虾米都没写
  • +进入TA的空间
  • 以下内容也很赞哦
分享按钮