首页 > html5资讯 > 正文

基于Bootstrap的可展开表格行的jQuery表格插件
2015-08-06 19:19:53   来源:   评论:0 点击:

  简要教程  bootstrap-table-expandable是一款非常实用的基于Bootstrap的可展开表格行的jQuery表格插件。该表格插件通过设置可以使每
  简要教程
  bootstrap-table-expandable是一款非常实用的基于Bootstrap的可展开表格行的jQuery表格插件。该表格插件通过设置可以使每一行都具有展开和收缩的功能,行展开时可以显示额外的信息。而且该插件使用非常简单。
02a.jpg
  使用方法
  使用这个可扩展表格插件要引入jQuery和Bootstrap的相关文件。
  1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">              
  2. <script src="js/jquery-1.11.1.min.js"></script>
  3. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  4. <link rel="stylesheet" href="css/bootstrap-table-expandable.css">
  5. <script src="js/bootstrap-table-expandable.js"></script>        
复制代码

  HTML结构
  使用这个可扩展表格行的表格插件,文件的存放结构要如下所示:
  1. bootstrap-table-expandable/
  2. ├── css/
  3. │   ├── bootstrap-table-expandable.css
  4. ├── example/
  5. │   ├──img.png
  6. │   ├──index.html
  7. ├── images/
  8. │   ├──arrows.png
  9. └── js/
  10. │   ├── bootstrap-table-expandable.js
复制代码

  该表格的基本HTML结构如下:
  引入文件和添加上面的HTML结构之后,该表格插件就可以正常工作了。
  1. <table class="table table-expandable">
  2.   <thead>
  3.     <tr>
  4.       <th>Country</th>
  5.       <th>Population</th>
  6.       <th>Area</th>
  7.       <th>Official languages</th>
  8.     </tr>
  9.   </thead>
  10.   <tbody>
  11.     <tr>
  12.       <td>United States of America</td>
  13.       <td>306,939,000</td>
  14.       <td>9,826,630 km2</td>
  15.       <td>English</td>
  16.     </tr>
  17.     <tr>
  18.       <td colspan="5">
  19.         <!-- CONTENT -->
  20.       </td>
  21.     </tr>
  22.   </tbody>
  23. </table>               
复制代码
  查看演示请点击     下载插件请点击\02插件.zip

相关热词搜索:

上一篇:7款超酷HTML5 3D动画精选应用及源码
下一篇:基于HTML5 canvas的jQuery刮刮卡效果

分享到: 收藏
评论排行