首頁 > web前端 > js教程 > 值得分享的輕量級Bootstrap Table表格插件

值得分享的輕量級Bootstrap Table表格插件

高洛峰
發布: 2017-01-04 11:06:32
原創
3067 人瀏覽過

基於Bootstrap的輕量級表格外掛程式Bootstrap Table只需簡單的配置,就可以擁有強大的支援固定表頭、單/複選、排序、分頁、搜尋及自訂表頭等功能,更好的提升開發效率和減少開發時間。

值得分享的轻量级Bootstrap Table表格插件

1、插件描述:Bootstrap Table顯示資料表格格式,提供了豐富的支援,單選框、複選框、排序、分頁等

2、特點:

支援Bootstrap 2)

響應式介面

固定表頭

完全可設定

支援data屬性

顯示/隱藏列

頭點擊簡單的進行排序

支援自訂列顯示

支援單/複選

強大的分頁功能

支援名片版面

支援多語言

3、使用方法:

支援多語言

3、使用方法:

1)、 head標籤中引入Bootstrap函式庫(如果你的專案還沒使用)和bootstrap-table.css。

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">
登入後複製

   

2)、在head標籤或在body標籤閉合前(比較推薦)引入jQuery庫和Bootstrap庫(假如你的專案還沒使用)和bootstrap-table.js。

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
 <script src="bootstrap-table.js"></script>
登入後複製

   

3)、指定資料來源,這裡有兩種方式

方式1:透過data屬性標籤
在一個普通的表格中設定data-toggle="table"可以在不寫JavaScript的情況下啟用Bootstrap Table。

<table data-toggle="table" data-url="data.json">
   <thead>
    ...
   </thead>
  </table>
登入後複製

   

方式2:透過JavaScript設定資料來源

透過JavaScript啟用帶有id屬性的Table。 📜性別
1)、原因:

bootstrap-table.js第399行,程式碼中只判斷了formatter typeof 為function的情況

2)、解決方法:

修改第399行程式碼區塊:

修改前

$(&#39;#table&#39;).bootstrapTable({
   url: &#39;data.json&#39;
  });:
登入後複製

   

值得分享的轻量级Bootstrap Table表格插件

修改後:

if (typeof that.header.formatters[j] === &#39;function&#39;) {
 value = that.header.formatters[j](value, item);
}
登入後複製

   




以上就是為大家分享的Bootstrap Table使用方法,希望使用方法,希望使用方法,能對大家有所幫助。

更多值得分享的輕量級Bootstrap Table表格插件相關文章請關注PHP中文網!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板