快捷導(dǎo)航

值得分享的輕量級(jí)Bootstrap Table表格插件

更新時(shí)間：2016年05月30日 10:02:07 投稿：lijiao

這篇文章為大家分享了輕量級(jí)Bootstrap Table表格插件，以表格的形式顯示的數(shù)據(jù)，支持單選，復(fù)選框，排序，分頁(yè),顯示/隱藏列等操作，感興趣的小伙伴們可以參考一下

基于Bootstrap的輕量級(jí)表格插件Bootstrap Table只需簡(jiǎn)單的配置，就可以擁有強(qiáng)大的支持固定表頭、單/復(fù)選、排序、分頁(yè)、搜索及自定義表頭等功能，更好的提高開(kāi)發(fā)效率和減少開(kāi)發(fā)時(shí)間。

1、插件描述：Bootstrap Table顯示數(shù)據(jù)表格格式,提供了豐富的支持,單選框、復(fù)選框、排序、分頁(yè)等，插件下載。

2、特點(diǎn)：

基于Bootstrap 3開(kāi)發(fā)（同時(shí)支持 Bootstrap 2）

響應(yīng)式界面

固定表頭

完全可配置

支持data屬性

顯示/隱藏列

顯示/隱藏表頭

使用AJAX獲取JSON數(shù)據(jù)

點(diǎn)擊表頭可簡(jiǎn)單的進(jìn)行排序

支持自定義列顯示

支持單/復(fù)選

強(qiáng)大的分頁(yè)功能

支持名片布局

支持多語(yǔ)言

3、使用方法：

1）、在html頁(yè)面的head標(biāo)簽中引入Bootstrap庫(kù)（假如你的項(xiàng)目還沒(méi)使用）和bootstrap-table.css。

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">

2）、在head標(biāo)簽或者在body標(biāo)簽閉合前（比較推薦）引入jQuery庫(kù)和Bootstrap庫(kù)（假如你的項(xiàng)目還沒(méi)使用）和bootstrap-table.js。

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
 <script src="bootstrap-table.js"></script>

3）、指定數(shù)據(jù)源，這里有兩種方式
方式1：通過(guò)data屬性標(biāo)簽
在一個(gè)普通的表格中設(shè)置data-toggle="table"可以在不寫(xiě)JavaScript的情況下啟用Bootstrap Table。

<table data-toggle="table" data-url="data.json">
   <thead>
    ... 
   </thead>
  </table>

方式2：通過(guò)JavaScript設(shè)置數(shù)據(jù)源
通過(guò)JavaScript來(lái)啟用帶有id屬性的Table。

$('#table').bootstrapTable({
   url: 'data.json' 
  });:

4、Bug描述：

用標(biāo)簽屬性方式設(shè)置字段formatter時(shí)，發(fā)現(xiàn)沒(méi)有效果，圖片不清楚，大家可以直接下載實(shí)例進(jìn)行研究，下載地址。
如：<th data-field="sex" data-formatter="format_sex">性別</th>
1)、原因：
bootstrap-table.js第399行，代碼中只判斷了formatter typeof 為function的情況
2)、解決辦法：
修改第399行代碼塊：
修改前

if (typeof that.header.formatters[j] === 'function') {
 value = that.header.formatters[j](value, item);
}

修改后：

if (typeof that.header.formatters[j] === 'function') {
     value = that.header.formatters[j](value, item);
    }else if(typeof that.header.formatters[j] === 'string') {
     if(typeof window[that.header.formatters[j]] === 'function') {
     value = window[that.header.formatters[j]](value, item);
     }
    }

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap插件使用教程

以上就是為大家分享的Bootstrap Table使用方法，希望對(duì)大家熟練掌握Bootstrap Table使用方法有所幫助。

您可能感興趣的文章: