bootstrap-table 插件文檔

時間 2019-12-05

原文原文鏈接

簡單介紹

官方地址：Bootstrap Table · An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation)css

bootstrap table 是一款基於 Bootstrap 的 jQuery 表格插件，功能比較完備，可以實現數據異步獲取，編輯，排序等一系列功能，最難得的是，只須要一些簡單的配置就能夠實現一個功能完備的在線表格。html

HTML 部分

bootstrap-table 具有異步獲取數據功能，而後在前臺渲染出表格。因此，前臺只須要一句代碼就解決了：前端

<table id="table"></table>

雖然它也支持將參數寫在 HTML 頁面中，可是我建議直接寫在 JS 文件裏，便於管理。java

引入文件

因爲 bootstrap-table 除了自身提供的功能外，還支持不少第三方的插件，因此，引入文件的部分就顯得尤爲重要了，沒準你調試半天的 Bug，只是由於忘了引入某個庫文件。jquery

首先關注 3 個文件，dist 目錄下的 bootstrap-table.css、bootstrap-table.js，若是使用中文，還要引用 locale/bootstrap-table-zh-CN.js，注意每一個文件均提供了min版本以及正常版本，建議在開發測試階段引入正常版本，便於調試。固然最後不要忘了引入 bootstrap 以及 jQuery，最終效果以下：git

<!-- CSS 部分 -->
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="/bootstrap/dist/css/bootstrap.min.css">
<!-- Bootstrap table -->
<link rel="stylesheet" href="/bootstrap-table/dist/css/booststrap-table.min.css">

js 文件建議放到頁面最底下，在 </body> 以前引入便可，以下所示：github

<!-- JS 部分 -->
<!-- jQuery 3 -->
<script src="/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- bootstrap-table -->
<script src="/bootstrap-table/dist/bootstrap-table.js"></script>
<script src="/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>

注意：1. 順序不要亂；2. 根目錄依據本身項目而定ajax

JS 調用

前臺放一個 table 標籤便可，表格的結構，甚至於表格的操做都放到JS中實現，以下代碼便可生成一個表格：bootstrap

$('#table').bootstrapTable({
    url: '/bootstrap-table/data',        // 表格數據來源
    columns: [{
        field: 'id',
        title: 'Item ID'
    }, {
        field: 'name',
        title: 'Item Name'
    }, {
        field: 'price',
        title: 'Item Price'
    },{
        field: 'column1',
        title: '列1'
    },{
        field: 'column2',
        title: '列2' 
    },{
        field: 'column3',
        title: '列3'
    },{
        field: 'column4',
        title: '列4'
    } ]
});

url 中定義了表格的數據來源，返回數據的格式依然是包含數據對象的數組。因爲該框架提供的參數比較多，而實際項目並用不着這麼多配置，這裏給出，我建議的一個方案，供參考。

右上角的一些功能，經過配置一些參數便可實現，無需多餘的代碼。這個查看官方文檔，基本沒有什麼問題，這裏很少介紹了。

左上角是一些自定義的一些功能，這裏有添加數據，篩選數據（本地&異步），再加上編輯數據，基本就完成了表格的增刪改查需求，這個我在後面會一一介紹。

添加功能

根據一些實際項目的經驗，採用彈出模態框的方式，是最優雅的添加方式。以下圖所示：

這個是bootstrap自帶的一個插件，直接引入頁面中便可，至於表單的提交方式是採用form原生提交，仍是使用ajax異步提交，就取決於你的喜愛了。這塊內容不在文章範圍內，就很少介紹了。

須要注意的是：假如你採用的是ajax異步提交表單，那麼就須要調用bootstrap-table的refresh方法，用來更新表格數據。

$('#table').bootstrapTable('refresh');

導入功能

每次在作信息化類項目的時候，導出功能是我最不肯意去作，但也必需要實現的功能。不肯作並非由於很難實現，這是一個原則問題，信息化就是爲了減小或是廢除線下操做，然而在傳統企業卻根本行不通，由於無論你的用戶體驗作得有多好，也改變不了用戶「不肯嘗試改變」的劣根性。

bootstrap-table提供了導出擴展模塊，簡單配置就能夠輕鬆實現導出功能。首先須要引入兩個文件，一個是bootstrap-table中extensions中的bootstrap-table-export擴展；另外一個是tableExport的插件。效果以下：

<!-- bootstrap-table export -->
<script src="/bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js"></script>
<script src="/tableexport.jquery.plugin/tableExport.min.js"></script>

引入擴展文件後，在表格參數中加入以下一句配置便可：

showExport: true

篩選功能

這個是在線表格最重要的功能之一。由於咱們不可能一次性將後臺全部數據都拉到前臺展現。若是你以前使用過bootstrap-table，你可能知道它提供了一個sidePagination的參數，這個參數是定義在哪裏進行分頁，可選值爲 client 或者 server。默認爲client，當你設置爲 server時，每次請求後臺服務器，都會加上limit, offset, search, sort, order這幾個參數，傳到後臺讓你去處理數據分頁。

這裏我想告訴你，徹底沒有必要這麼麻煩，實際項目中，咱們都是經過參數條件，篩選一部分數據展現到前臺。因此你定義好默認的參數就能夠了，分頁的事就交給前端處理便可。那麼參數如何自定義呢？使用queryParams表格參數便可。舉個例子：

queryParams: function(params){
  return {
    startDate: '2018/09/01',
    endDate: '2019/09/01'
  };
},

查看Chrome Network請求，能夠看出傳遞參數狀況。

經過上述自定義參數方式，就能夠篩選部分數據到前臺，而後經過配置分頁參數就能夠實現篩選功能了。那麼通常設置什麼參數篩選呢？其實就是想問一次性篩選多少條數據最合適呢？個人建議是在500之內，這樣既方便處理數據，也不會太影響性能。

前臺分頁的好處，主要體如今搜索這塊，徹底不用本身去實現代碼，簡單配置搜索框便可，並且提供的是全局搜索，很強大了。若是想配置個本地篩選也是很方便的，使用resetSearch方法便可。

// 本地篩選
$('#localFilter li a').click(function(e){
    e.preventDefault();
    var filter = $(this).data('filter');
    $table.bootstrapTable('resetSearch', filter);
});

有時候，我仍是想要從後臺篩選部分數據，經過前臺表單，使用 refresh方法便可。

// 異步篩選
$('#Filter').submit(function(e){
    e.preventDefault();
    var filter = $('input[name=filter]').val();
    $table.bootstrapTable('refresh',{
        query: {
          startDate: '2001/09/01',
          endDate: '2008/09/01',
          filter: filter
        }
    });
});

篩選功能就到這，這裏只是介紹了參數傳遞的方法，具體篩選，還須要結合後臺代碼去實現。

搜索功能

搜索分爲前臺搜索以及後臺搜索。

前臺搜索：學會使用5個表格參數（search、searchOnEnterKey、searchText、trimOnSearch、customSearch（自定義搜索）），2個列參數（searchable、searchFormatter），1個方法（resetSearch）便可
後臺搜索，就相似於篩選功能的傳參了，在後臺處理字符串，返回表格數據，此不在本文範圍內，很少贅述。

編輯功能

在線表格的編輯，實際上是最很差處理的一個功能。一方面，添加編輯功能須要增長不少額外的代碼量；另外一方面，從業務上來說，編輯並非一個好的用戶體驗。在作編輯功能以前，我老是問本身，這塊功能真的須要編輯嗎？刪除了從新添加行不行？

bootstrap-table 提供了 editable 編輯模塊，簡單配置便可實現表格的編輯，可是我仍是想要提醒，使用編輯功能須要有節制，越自由並不表明用戶體驗越好。

仍是老套路，引入3個文件（其中：1個css，2個js）：

<!-- X-editable -->
<link rel="stylesheet" href="/X-editable/dist/bootstrap3-editable/css/bootstrap-editable.css">

<!-- booststrap-table editable -->
<script src="/bootstrap-table/dist/extensions/editable/bootstrap-table-editable.js"></script>
<script src="/X-editable/dist/bootstrap3-editable/js/bootstrap-editable.min.js"></script>

引入以後，直接在列參數上加上editable: true，便可啓用該字段的標記功能，效果圖以下：

樣式沒有問題後，接下來看看如何使用，使用方法徹底沿用了X-editable插件，bootstrap-table-editable僅僅只是作了嵌入的工做，因此你須要查看X-editable的文檔，這裏我舉個簡單的例子介紹一下，以下爲其中一列的參數設置：

{
  field: 'column2',
  title: '列2',
  editable: {
    url: '/test',
  },
}

url參數用來異步訪問後臺，那麼傳遞的參數有哪些呢？

pk在X-editable中定義爲主鍵，在bootstrap-table中，經過設置表格參數idField: 'id'，能夠定義行數據的主鍵。若改爲idField: 'name'，再來看下：

明白瞭如何傳參數，相信你就知道後面如何處理了。

刪除功能

介紹完編輯功能，不知道你有沒有發現，假如咱們要編輯的字段很是多，這種處理方式會給後臺形成很大的工做量，能不能一個表單就解決編輯需求呢？固然是能夠的。

咱們在每一行的最後加上一列，放上一些功能按鈕，以下圖：

在columns表格參數中，加上一列以下：

{
    field: 'operator',
    title: '操做',
    align: 'center',
    valign: 'middle',
    width: '10%',
    // visible: false,
    formatter: function (value, row, index) {
        // var sid_code = base64encode(row.sid + '');   //  sid 加密處理
        // alert(sid_code);
        return '<a href="#">' + 
            '<i class="glyphicon glyphicon-eye-open" title="顯示"></i> ' + 
            '</a>'+ 
            '<a href="#editProject" data-toggle="modal" title="修改">' + 
            '<i class="glyphicon glyphicon-pencil"></i> ' + 
            '</a>'+
            '<a href="javascript:void(0)" title="刪除">' +
            '<i class="glyphicon glyphicon-trash text-danger"></i> ' + 
            '</a>';
    },
    events: {
      'click a[title=刪除]': function (e, value, row, index) {
          if(confirm('此操做不可逆，請確認是否刪除？')){
              $.ajax();
          }
      },
      'click a[title=修改]': function (e, value, row, index) {
          // e.preventDefault();
          alert('click change button');
      },
    }
}

4個參數分別是：