本文作者：HelloGitHub-kalifun
這是 HelloGitHub 推出的《講解開源項目》系列，今天給大家推薦一個基於 Bootstrap 和 jQuery 的表格插件：Bootstrap-Table
一、介紹
從項目名稱就可以知道，這是一款 Bootstrap 的表格插件。表格的展示的形式所有的前端幾乎在工作中都有涉及過，Bootstrap Table 提供了快速的建表、查詢、分頁、排序等一系列功能。
項目地址：https://github.com/wenzhixin/bootstrap-table
可能 Bootstrap 和 jQuery 技術有些過時了，但如果因為歷史的技術選型或者舊的項目還在用這兩個庫的話，那這個項目一定會讓你的嘴角慢慢上揚，拿下錶格展示方面的需求易如反掌！
二、模式
Boostatrp Table 分為兩種模式：客戶端（client）模式、服務端（server）模式。
- 客戶端 ：通過數據接口將服務器需要加載的數據一次性展現出來，然後裝換成 json 然後生成 table。我們可以自己定義顯示行數，分頁等，此時就不再會向服務器發送請求了。
- 服務器：根據設定的每頁記錄數和當前顯示頁，發送數據到服務器進行查詢。
三、實戰操作
Tips： 解釋說明均在代碼中以註釋方式展示，請大家注意閱讀。
我們採用的是最簡單的 CDN 引入方式，代碼可直接運行。複製代碼並將配置好 json 文件的路徑即可看到效果。
3.1 快速上手
註釋中的星號表示該參數必寫，話不多說上代碼。示例代碼：
<table>
<title>Hello, Bootstrap Table!/<title>
// 引入 css
<link>
<link>
<link>
// 需要填充的表格
// 引入js
上面的代碼展示通過基本 API 實現基礎的功能，示例代碼並沒有羅列所有的 API。該庫還有很多好玩的功能等著大家去發現，正所謂師父領進門修行靠個人～
3.2 拆解講解
下面對關鍵點進行闡述，為了更方便使用的小夥伴清楚插件的用法。
3.2.1 初始化部分
選擇需要初始化表格。<table>
$('#tb_departments').bootstrapTable({})
這個就像table的入口一樣。
3.2.2 閱讀數據部分
columns:[{field: 'Key', title: '文件路徑',formatter: function(value,row,index){} }]- field json 中鍵值對中的 Key
- title 是表格頭顯示的內容
- formatter 是一個函數類型，當我們對數據內容需要修改時會用它。例：編碼轉換
3.2.3 事件觸發器
events:operateEvents
window.operateEvents = {
'click .download': function (e,value,row,index) {
console.log(row);
}
}
因為很多時候我們需要針對表格進行處理，所以事件觸發器是一個不錯的選擇。比如：它可以記錄我們的行數據，可以利用觸發器進行定製函數的執行等。
四、擴展
介紹幾個擴展可以讓我們便捷的實現更多的表格功能，而不需要自己造輪子讓我們的工作更加高效（也可以進入官網查看擴展的具體使用方法，官方已經收集了大量的擴展）。老規矩直接上代碼：
4.1 表格導出
showExport: true, //是否顯示導出
exportDataType: basic,\t\t\t\t\t\t\t\t //導出數據類型，支持：'基本'，'全部'，'選中'
exportTypes:['json', 'xml', 'csv', 'txt', 'sql', 'excel'] //導出類型
4.2 自動刷新
autoRefresh: true, \t\t\t\t\t\t\t //設置 true 為啟用自動刷新插件。這並不意味著啟用自動刷新
autoRefreshStatus: true,\t\t\t\t\t\t//設置 true 為啟用自動刷新。這是表加載時狀態自動刷新
autoRefreshInterval: 60,\t\t\t\t\t\t//每次發生自動刷新的時間（以秒為單位）
autoRefreshSilent: true\t\t\t\t\t\t\t//設置為靜默自動刷新
4.3 複製行
showCopyRows: true,\t\t\t\t\t\t\t\t\t//設置 true 為顯示覆制按鈕。此按鈕將所選行的內容複製到剪貼板
copyWithHidden: true,\t\t\t\t\t\t\t\t//設置 true 為使用隱藏列進行復制
copyDelimiter: ', ',\t\t\t\t\t\t\t\t//複製時，此分隔符將插入列值之間
copyNewline: '\\n'\t\t\t\t\t\t\t\t\t//複製時，此換行符將插入行值之間
五、總結
本篇文章只是簡單的闡述 Bootstrap-Table 如何使用，正在對錶格功能實現而憂愁的小夥伴，可以使用 HelloGitHub 推薦的這款插件。你會發現網頁製作表格還可以如此快捷，期待小夥伴挖掘出更加有意思的功能哦。
注：上面 js 部分並沒有採用函數形式，建議在使用熟悉之後還是採用函數形式，這樣也方便複用及讓代碼看起來更加規範。
[1]《講解開源項目》: https://github.com/HelloGitHub-Team/Article
[2]Bootstrap-Table 項目地址: https://github.com/wenzhixin/bootstrap-table
[3]Bootstrap-Table 官方文檔: https://bootstrap-table.com/docs/getting-started/introduction/
『講解開源項目系列』——讓對開源項目感興趣的人不再畏懼、讓開源項目的發起者不再孤單。跟著我們的文章，你會發現編程的樂趣、使用和發現參與開源項目如此簡單。歡迎留言聯繫我們、加入我們，讓更多人愛上開源、貢獻開源～
閱讀更多 HelloGitHub 的文章
