表格-基于Bootstrap的可展开表格行的jQuery表格插件 | 蓝文资源库

bootstrap-table-expandable是一款非常实用的基于Bootstrap的可展开表格行的jQuery表格插件。该表格插件通过设置可以使每一行都具有展开和收缩的功能，行展开时可以显示额外的信息。而且该插件使用非常简单。

使用方法

使用这个可扩展表格插件要引入jQuery和Bootstrap的相关文件。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">              
<script src="js/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap-table-expandable.css">
<script src="js/bootstrap-table-expandable.js"></script>             

HTML结构

使用这个可扩展表格行的表格插件，文件的存放结构要如下所示：

bootstrap-table-expandable/
├── css/
│   ├── bootstrap-table-expandable.css
├── example/
│   ├──img.png
│   ├──index.html
├── images/
│   ├──arrows.png
└── js/
│   ├── bootstrap-table-expandable.js

该表格的基本HTML结构如下：

<table class="table table-expandable">
  <thead>
    <tr>
      <th>Country</th>
      <th>Population</th>
      <th>Area</th>
      <th>Official languages</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>United States of America</td>
      <td>306,939,000</td>
      <td>9,826,630 km2</td>
      <td>English</td>
    </tr>
    <tr>
      <td colspan="5">
        <!-- CONTENT -->
      </td>
    </tr>
  </tbody>
</table>                

引入文件和添加上面的HTML结构之后，该表格插件就可以正常工作了。

在线预览网盘下载

郑重声明：

1 本资源来源于互联网，资源的版权归资源原作者所持有，受《中华人民共和国著作权法》等相关法律保护。

2 由于无法和原作者取得联系，所以上传的部分资源无法先通过原作者的同意就分享给大家了，如本资源侵犯了您（原作者）的权益，请联系我们（微信号 xiaohaimei1989），我们会立马删除您的资源，并向您表达诚挚的歉意！

3 本站是一个公益型网站，分享资源的目的在于传播知识，分享知识，收取一点点打赏的辛苦费是用于网站的日常运营开支，并非用于商业用途。

4 本站资源只提供学习和参考研究使用，使用过后请在第一时间内删除。本站不承担资源被单位或个人商用带来的法律责任。

一	二	三	四	五	六	日
« 12月
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

使用方法

HTML结构

郑重声明：

相关文章

发表评论 取消回复

发表评论取消回复