用這個庫 3 分鐘實現讓你滿意的表格功能：Bootstrap-Table

文作者：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 快速上手

注釋中的星號表示該參數必寫，話不多說上代碼。示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Hello, Bootstrap Table!</title>
 // 引入 css
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
</head>
<body>
 // 需要填充的表格
 <table id="tb_departments" data-filter-control="true" data-show-columns="true"></table>
// 引入js
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
<script>
 window.operateEvents = {
 // 當點擊 class=delete 時觸發
 'click .delete': function (e,value,row,index) {
 // 在 console 打印出整行數據
 console.log(row);
 }
 };

 $('#tb_departments').bootstrapTable({
 url: '/frontend/bootstrap-table/user.json', //請求后臺的 URL（*）
 method: 'get', //請求方式（*）
 // data: data, //當不使用上面的后臺請求時，使用data來接收數據
 toolbar: '#toolbar', //工具按鈕用哪個容器
 striped: true, //是否顯示行間隔色
 cache: false, //是否使用緩存，默認為 true，所以一般情況下需要設置一下這個屬性（*）
 pagination: true, //是否顯示分頁（*）
 sortable: false, //是否啟用排序
 sortOrder: "asc", //排序方式
 sidePagination: "client", //分頁方式：client 客戶端分頁，server 服務端分頁（*）
 pageNumber:1, //初始化加載第一頁，默認第一頁
 pageSize: 6, //每頁的記錄行數（*）
 pageList: [10, 25, 50, 100], //可供選擇的每頁的行數（*）
 search: true, //是否顯示表格搜索，此搜索是客戶端搜索，不會進服務端，所以個人感覺意義不大
 strictSearch: true, //啟用嚴格搜索。禁用比較檢查。
 showColumns: true, //是否顯示所有的列
 showRefresh: true, //是否顯示刷新按鈕
 minimumCountColumns: 2, //最少允許的列數
 clickToSelect: true, //是否啟用點擊選中行
 height: 500, //行高，如果沒有設置 height 屬性，表格自動根據記錄條數覺得表格高度
 uniqueId: "ID", //每一行的唯一標識，一般為主鍵列
 showToggle:true, //是否顯示詳細視圖和列表視圖的切換按鈕
 cardView: false, //是否顯示詳細視圖
 detailView: false, //是否顯示父子表
 showExport: true, //是否顯示導出
 exportDataType: "basic", //basic', 'all', 'selected'.
 columns: [{
 checkbox: true //復選框標題，就是我們看到可以通過復選框選擇整行。
 }, {
 field: 'id', title: 'ID' //我們取json中id的值，并將表頭title設置為ID
 }, {
 field: 'username', title: '用戶名' //我們取 json 中 username 的值，并將表頭 title 設置為用戶名
 },{
 field: 'sex', title: '性別' //我們取 json 中 sex 的值，并將表頭 title 設置為性別
 },{
 field: 'city', title: '城市' //我們取 json 中 city 的值，并將表頭 title 設置為城市
 },{
 field: 'sign', title: '簽名' //我們取 json 中 sign 的值，并將表頭 title 設置為簽名
 },{
 field: 'classify', title: '分類' //我們取 json 中 classify 的值，并將表頭 title 設置為分類
 },{
 //ormatter:function(value,row,index) 對后臺傳入數據 進行操作 對數據重新賦值 返回 return 到前臺
 // events 觸發事件
 field: 'Button',title:"操作",align: 'center',events:operateEvents,formatter:function(value,row,index){
 var del = '<button type="button" class="btn btn-danger delete">刪除</button>'
 return del;
 }
 }
 ],
 responseHandler: function (res) {
 return res.data //在加載遠程數據之前，處理響應數據格式.
 // 我們取的值在data字段中，所以需要先進行處理，這樣才能獲取我們想要的結果
 }
 });
</script>
</body>
</html>

上面的代碼展示通過基本 API 實現基礎的功能，示例代碼并沒有羅列所有的 API。該庫還有很多好玩的功能等著大家去發現，正所謂師父領進門修行靠個人～

3.2 拆解講解

下面對關鍵點進行闡述，為了更方便使用的小伙伴清楚插件的用法。

3.2.1 初始化部分

選擇需要初始化表格。
$('#tb_departments').bootstrapTable({})
這個就像table的入口一樣。
<table id="tb_departments" data-filter-control="true" data-show-columns="true"></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 表格導出

<script src="js/bootstrap-table-export.js"></script> 
showExport: true, //是否顯示導出
exportDataType: basic,								 //導出數據類型，支持：'基本'，'全部'，'選中'
exportTypes:['json', 'xml', 'csv', 'txt', 'sql', 'excel'] //導出類型

4.2 自動刷新

<script src="extensions/auto-refresh/bootstrap-table-auto-refresh.js"></script>
autoRefresh: true, 							 //設置 true 為啟用自動刷新插件。這并不意味著啟用自動刷新
autoRefreshStatus: true,						//設置 true 為啟用自動刷新。這是表加載時狀態自動刷新
autoRefreshInterval: 60,						//每次發生自動刷新的時間（以秒為單位）
autoRefreshSilent: true							//設置為靜默自動刷新

4.3 復制行

<script src="extensions/copy-rows/bootstrap-table-copy-rows.js"></script>
showCopyRows: true,									//設置 true 為顯示復制按鈕。此按鈕將所選行的內容復制到剪貼板
copyWithHidden: true,								//設置 true 為使用隱藏列進行復制
copyDelimiter: ', ',								//復制時，此分隔符將插入列值之間
copyNewline: '\n'									//復制時，此換行符將插入行值之間

五、總結

本篇文章只是簡單的闡述 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/

『講解開源項目系列』——讓對開源項目感興趣的人不再畏懼、讓開源項目的發起者不再孤單。跟著我們的文章，你會發現編程的樂趣、使用和發現參與開源項目如此簡單。歡迎留言聯系我們、加入我們，讓更多人愛上開源、貢獻開源～

紹

exceljs是一個讀取，操作和編寫電子表格數據和樣式到XLSX和JSON，從Excel電子表格文件逆向工程設計的項目。之所以稱它最強，是因為它的功能強大，簡直就是專門為Excel打造的前端處理插件，到目前為止，筆者還尚未見過比這個更強大的前端插件，由于其強悍的前端處理能力，這就意味著有很多操作將減輕服務器端壓力，而且性能更加出色！

Github地址

https://github.com/exceljs/exceljs

安裝

安裝我們當然是首選npm

npm install exceljs

創建工作簿

var workbook = new Excel.Workbook();

設置工作簿屬性

workbook.creator = 'Me';
workbook.lastModifiedBy = 'Her';
workbook.created = new Date(1985, 8, 30);
workbook.modified = new Date();
workbook.lastPrinted = new Date(2016, 9, 27);

// 將工作簿日期設置為1904日期系統
workbook.properties.date1904 = true;

工作簿視圖

“工作簿”視圖控制Excel在查看工作簿時打開多少個單獨的窗口。

workbook.views = [
  {
    x: 0, y: 0, width: 10000, height: 20000,
    firstSheet: 0, activeTab: 1, visibility: 'visible'
  }
]

添加工作表

var sheet = workbook.addWorksheet('My Sheet');

用addWorksheet函數的第二個參數設置工作表的選項。

例如：

// 創建一個紅色標簽顏色的工作表
var sheet = workbook.addWorksheet('My Sheet', {properties:{tabColor:{argb:'FFC0000'}}});

// 創建一個隱藏網格線的工作表
var sheet = workbook.addWorksheet('My Sheet', {properties: {showGridLines: false}});

// 創建一個第一行和列凍結的工作表
var sheet = workbook.addWorksheet('My Sheet', {views:[{xSplit: 1, ySplit:1}]});

刪除工作表

使用工作表id從工作簿中刪除工作表。

例如：

// 創建工作表
var sheet = workbook.addWorksheet('My Sheet');

// 使用工作表ID刪除工作表
workbook.removeWorksheet(sheet.id)

訪問工作表

// 迭代所有sheet
// 注意：workbook.worksheets.forEach仍然可以工作，但這個方式更好
workbook.eachSheet(function(worksheet, sheetId) {
  // ...
});

// 按名稱獲取表格
var worksheet = workbook.getWorksheet('My Sheet');

// 按ID獲取表格
var worksheet = workbook.getWorksheet(1);

。。。。。。以上只是部分文檔中的介紹，感興趣的小伙伴可以移步Github直接查看詳細的文檔，完整功能了解可參考下一個標題

PS：提供了中文文檔

完整功能列表

創建工作簿

設置工作簿屬性

工作簿視圖

添加工作表

刪除工作表

訪問工作表

工作表狀態

工作表屬性

頁面設置

頁眉和頁腳

工作表視圖

凍結視圖
拆分視圖

Auto Filters

列

行

處理單個單元格

合并單元格

定義名稱

數據驗證

樣式

數字格式
字體
對準
邊框
填充
富文本

大綱級別

圖片

文件 I/O

XLSX：讀 XLSX寫 XLSX

CSV：讀 CSV寫 CSV

Streaming I/O：Streaming XLSX

瀏覽器

價類型

空值
合并單元格
數值
字符串值
日期值
超鏈接值
公式值
豐富的文本值
布爾值
錯誤值

雖然以上功能還不能包括了Excel的所有功能，但也已經相當的豐富了！

總結

在之前的文章中曾介紹過另一個不錯的前端Excel插件，感興趣的可以去看一看，exceljs擁有這么豐富的功能，如果你想開發一個功能強大的Web電子表格，不妨多嘗試嘗試！

ootstrap-Table文檔

接上一篇。上回簡單介紹了BootstrapTable的常用函數，這回主要介紹屬性設置。

<link href="*.css"><!--CSS 引用bootstrap.min.css和bootstrap-table.min.css-->
  <script src="*.js"><!--JS包引用， jquery.min.js，bootstrap.min.js，bootstrap-table.min.js-->

<table id="ID"></table>   <!--html代碼-->

$("#ID").bootstrapTable({鍵:值,鍵:值,鍵:值,鍵:值……}）//bootstrapTable函數

以上簡寫成“骨架”。分三步用，

1.引用，

注意點：js的引用順序，js包里面可以理解為從上到下的程序集，BootstrapTable以Jquery為基礎的，所以一定以Jquery引用為先，接著是bootsrtap.js,最后是Bootstrap-Table.js。

2.HTML標簽

注意點：一般寫在Table標簽里，數據放到哪個Table呢，這里用的Jquery獲取DOM id為ID的對象。當然也可以使用類選擇器，最好是唯一，建議用id選擇器標識。

3.使用函數

這里舉例的是其中一個最最常用的bootstrapTable({...})，以Ajax形式取數據的函數。

屬性Url:"路徑"。路徑。

可以是本地JSON文件，
可以是預定義的JSON數據，
也可以是路由到后端（后臺）取數據的方法，

例如通過服務器路由到達MVC中的Controller里的GetData(string id)

屬性queryParams，可選參數，如剛才所說GetData方法中的id

queryParams：function(){return id:"123"}//這里是一個function

也可以直接寫{id:"123"}

屬性columns:定是各列數據。是JSON格式[{},{},{}……]

定義每一列以這樣的形式{鍵:值}，

常用的有：

{field:"后臺返回JSON數據或對象的屬性名",

title:"顯示在表格上的列名",

}

以上定義列中還會有一些可選屬性formatter、editable，如editable需要另外引入相應的js文件。

Bootstrap-table的入門分享到這里，認為遠遠不止這些，動手才是入門的正式開始，一起加油吧！

建議看看文檔例子。

謝謝閱讀。下回繼續分享Bootstrap File Input上傳插件。

fileinput上傳插件

舉例工作中開發物流分車程序的代碼，代碼定義兩列“序號”、"車號"

在線咨詢

上一篇：PS之制作網頁翻轉按鈕
下一篇：web驗證碼的異步刷新實現

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

用這個庫 3 分鐘實現讓你滿意的表格功能：Bootstrap-Table

紹

Github地址

安裝

創建工作簿

設置工作簿屬性

工作簿視圖

添加工作表

刪除工作表

訪問工作表

完整功能列表

總結

您的項目需求