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

時間 2019-11-21

標籤這個分鐘實現讓你滿意表格功能 bootstrap table 欄目 Bootstarp 简体版

原文原文鏈接

本文做者：HelloGitHub-kalifunjavascript

這是 HelloGitHub 推出的《講解開源項目》系列，今天給你們推薦一個基於 Bootstrap 和 jQuery 的表格插件：Bootstrap-Tablecss

1、介紹

從項目名稱就能夠知道，這是一款 Bootstrap 的表格插件。表格的展現的形式全部的前端幾乎在工做中都有涉及過，Bootstrap Table 提供了快速的建表、查詢、分頁、排序等一系列功能。html

項目地址：github.com/wenzhixin/b…前端

可能 Bootstrap 和 jQuery 技術有些過期了，但若是由於歷史的技術選型或者舊的項目還在用這兩個庫的話，那這個項目必定會讓你的嘴角慢慢上揚，拿下錶格展現方面的需求易如反掌！java

2、模式

Boostatrp Table 分爲兩種模式：客戶端（client）模式、服務端（server）模式。jquery

客戶端：經過數據接口將服務器須要加載的數據一次性展示出來，而後裝換成 json 而後生成 table。咱們能夠本身定義顯示行數，分頁等，此時就再也不會向服務器發送請求了。git
服務器：根據設定的每頁記錄數和當前顯示頁，發送數據到服務器進行查詢。github

3、實戰操做

Tips： 解釋說明均在代碼中以註釋方式展現，請你們注意閱讀。ajax

咱們採用的是最簡單的 CDN 引入方式，代碼可直接運行。複製代碼並將配置好 json 文件的路徑便可看到效果。sql

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、擴展

介紹幾個擴展可讓咱們便捷的實現更多的表格功能，而不須要本身造輪子讓咱們的工做更加高效（也能夠進入官網查看擴展的具體使用方法，官方已經收集了大量的擴展）。老規矩直接上代碼：

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'									//複製時，此換行符將插入行值之間
複製代碼