浙江 杭州

基于Bootstrap的可展开表格行的jQuery表格插件

系统分类: 网页特效 - jquery插件 - jQuery表格插件 2016-07-13

人气35728

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


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

基于Bootstrap的可展开表格行的表格

使用方法

使用这个可扩展表格插件要引入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结构之后,该表格插件就可以正常工作了。

查看演示
下载资源:12
下载资源
错误提交:

格式:zip 大小:66.00KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1872.html 非特殊说明,本文版权归原作者所有,转载请注明出处
基于Bootstrap的可展开表格行的jQuery表格插件

我当前G币余额:0 已下载次数:12

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有4 评论)