3 分鐘使用Bootstrap-Table實現滿意的表格功能-Bootstrap教程-PHP中文網

首頁

web前端

Bootstrap教程

3 分鐘使用Bootstrap-Table實現滿意的表格功能

青灯夜游

Apr 30, 2021 am 11:00 AM

bootstrap表格

本篇文章跟大家分享一下基於Bootstrap和jQuery的表格外掛程式Bootstrap-Table的用法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

3 分鐘使用Bootstrap-Table實現滿意的表格功能

一、介紹

從專案名稱就可以知道，這是一款 Bootstrap 的表格外掛程式。表格的展示的形式所有的前端幾乎在工作中都有涉及過，Bootstrap Table 提供了快速的建表、查詢、分頁、排序等一系列功能。【相關推薦：《bootstrap教學》】

專案網址：https://github.com/wenzhixin/bootstrap-table

#可能Bootstrap 和jQuery 技術有些過時了，但如果因為歷史的技術選型或者舊的項目還在用這兩個庫的話，那這個項目一定會讓你的嘴角慢慢上揚，拿下表格展示方面的需求易如反掌！

二、模式

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

客戶端：透過資料介面將伺服器需要載入的資料一次展現出來，然後裝換成 json 然後產生 table。我們可以自己定義顯示行數，分頁等，此時就不再會向伺服器發送請求了。
伺服器：根據設定的每頁記錄數和目前顯示頁，傳送資料到伺服器進行查詢。

三、實戰操作

#Tips： 解釋說明皆在程式碼中以註解方式展示，請大家注意閱讀。

我們採用的是最簡單的 CDN 引入方式，程式碼可直接運作。複製程式碼並將配置好 json 檔案的路徑即可看到效果。

3.1 快速上手

註解中的星號表示該參數必寫，話不多說上程式碼。範例程式碼：

<!DOCTYPE html>
<html>
<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 = {
            // 当点击 时触发
            &#39;click .delete&#39;: function (e,value,row,index) {
                // 在 console 打印出整行数据
                console.log(row);
            }
        };

        $(&#39;#tb_departments&#39;).bootstrapTable({
            url: &#39;/frontend/bootstrap-table/user.json&#39;,         //请求后台的 URL（*）
            method: &#39;get&#39;,                      //请求方式（*）
            // data: data,                      //当不使用上面的后台请求时，使用data来接收数据
            toolbar: &#39;#toolbar&#39;,                //工具按钮用哪个容器
            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&#39;, &#39;all&#39;, &#39;selected&#39;.
            columns: [{
                checkbox: true     //复选框标题，就是我们看到可以通过复选框选择整行。
            }, {
                field: &#39;id&#39;, title: &#39;ID&#39;       //我们取json中id的值，并将表头title设置为ID
            }, {
                field: &#39;username&#39;, title: &#39;用户名&#39;         //我们取 json 中 username 的值，并将表头 title 设置为用户名
            },{
                field: &#39;sex&#39;, title: &#39;性别&#39;                //我们取 json 中 sex 的值，并将表头 title 设置为性别
            },{
                field: &#39;city&#39;, title: &#39;城市&#39;               //我们取 json 中 city 的值，并将表头 title 设置为城市
            },{
                field: &#39;sign&#39;, title: &#39;签名&#39;               //我们取 json 中 sign 的值，并将表头 title 设置为签名
            },{
                field: &#39;classify&#39;, title: &#39;分类&#39;           //我们取 json 中 classify 的值，并将表头 title 设置为分类
            },{
                //ormatter:function(value,row,index) 对后台传入数据 进行操作 对数据重新赋值 返回 return 到前台
                // events 触发事件
                field: &#39;Button&#39;,title:"操作",align: &#39;center&#39;,events:operateEvents,formatter:function(value,row,index){
                    var del = &#39;<button type="button" class="btn btn-danger delete">删除</button>&#39;
                    return del;
                }
            }
            ],
            responseHandler: function (res) {
                return res.data      //在加载远程数据之前，处理响应数据格式.
                // 我们取的值在data字段中，所以需要先进行处理，这样才能获取我们想要的结果
            }
        });
</script>
</body>
</html>

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

#3.2 拆解講解

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

3.2.1 初始化部分

选择需要初始化表格。
$(&#39;#tb_departments&#39;).bootstrapTable({})
这个就像table的入口一样。
<table id="tb_departments" data-filter-control="true" data-show-columns="true"></table>

#3.2.2 讀取資料部分

columns:[{field: &#39;Key&#39;, title: &#39;文件路径&#39;,formatter: function(value,row,index){} }]

#field json 中鍵值對中的Key
title 是表格頭顯示的內容
formatter 是函數類型，當我們需要修改資料內容時會用它。範例：編碼轉換

3.2.3 事件觸發器

events:operateEvents
 window.operateEvents = {
        &#39;click .download&#39;: function (e,value,row,index) {
            console.log(row);
        }
   }

因為很多時候我們需要針對表格進行處理，所以事件觸發器是不錯的選擇。例如：它可以記錄我們的行數據，可以利用觸發器進行自訂函數的執行等。

四、擴展

介紹幾個擴展可以讓我們便捷的實現更多的表格功能，而不需要自己造輪子讓我們的工作更有效率（也可以進入官網查看擴展的具體使用方法，官方已經收集了大量的擴展）。舊規矩直接上程式碼：

4.1 表格匯出

<script src="js/bootstrap-table-export.js"></script> 
showExport: true,                                           //是否显示导出
exportDataType: basic,								        //导出数据类型，支持：&#39;基本&#39;，&#39;全部&#39;，&#39;选中&#39;
exportTypes:[&#39;json&#39;, &#39;xml&#39;, &#39;csv&#39;, &#39;txt&#39;, &#39;sql&#39;, &#39;excel&#39;]   //导出类型

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: &#39;, &#39;,								//复制时，此分隔符将插入列值之间
copyNewline: &#39;\n&#39;									//复制时，此换行符将插入行值之间

五、總結

#這篇文章只是簡單的闡述Bootstrap-Table 如何使用，正在對錶格功能實現而憂愁的小伙伴，可以使用HelloGitHub 推薦的這款插件。你會發現網頁製作表格還可以如此快捷，期待小夥伴挖掘出更有趣的功能哦。

註：上面 js 部分並沒有採用函數形式，建議在使用熟悉之後還是採用函數形式，這樣也方便復用及讓程式碼看起來更規範。

更多程式相關知識，請造訪：程式設計入門！！

以上是3 分鐘使用Bootstrap-Table實現滿意的表格功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：掘金社区。如有侵權，請聯絡admin@php.cn刪除

Bootstrap：使網頁設計更容易Apr 13, 2025 am 12:10 AM

Bootstrap讓網頁設計更容易的原因是其預設組件、響應式設計和豐富的社區支持。 1)預設組件庫和样式讓開發者無需編寫複雜的CSS代碼；2)內置網格系統簡化了響應式佈局的創建；3)社區支持提供了豐富的資源和解決方案。

Bootstrap的影響：加速網絡開發Apr 12, 2025 am 12:05 AM

Bootstrap加速了Web開發，通過提供預定義的樣式和組件，開發者可以快速搭建響應式網站。 1)它縮短了開發時間，例如在項目中幾天內完成基本佈局。 2)通過Sass變量和mixins，Bootstrap允許定製樣式以滿足特定需求。 3)使用CDN版本可以優化性能，提高加載速度。

理解引導：核心概念和功能Apr 11, 2025 am 12:01 AM

Bootstrap是一個開源的前端框架，主要作用是幫助開發者快速構建響應式網站。 1)它提供了預定義的CSS類和JavaScript插件，方便實現複雜的UI效果。 2)Bootstrap的工作原理依賴於其CSS和JavaScript組件，通過媒體查詢實現響應式設計。 3)使用示例包括基本用法，如創建按鈕，以及高級用法，如自定義樣式。 4)常見錯誤包括類名拼寫錯誤和未正確引入文件，建議使用瀏覽器開發者工具調試。 5)性能優化可通過自定義構建工具實現，最佳實踐包括使用語義化HTML和Bootstrap的預定義

Bootstrap Deep Dive：響應式設計和高級佈局技術Apr 10, 2025 am 09:35 AM

Bootstrap通過網格系統和媒體查詢實現響應式設計，使網站適應不同設備。 1.使用預定義類（如col-sm-6）定義列寬。 2.網格系統基於12列，需注意總和不超12。3.使用斷點（如sm、md、lg）定義不同屏幕尺寸下的佈局。

Bootstrap面試問題：降落您夢想的前端工作Apr 09, 2025 am 12:14 AM

Bootstrap是一套開源的前端框架，用於快速開發響應式網站和應用。 1.它提供了響應式設計、一致的UI組件和快速開發的優勢。 2.網格系統使用flexbox佈局，基於12列結構，通過.container、.row和.col-sm-6等類實現。 3.自定義樣式可以通過修改SASS變量或覆蓋CSS實現。 4.常用JavaScript組件包括模態框、輪播圖和折疊。 5.優化性能可以通過只加載必要組件、使用CDN和壓縮合併文件來實現。

Bootstrap＆JavaScript集成：動態功能和功能Apr 08, 2025 am 12:10 AM

Bootstrap和JavaScript可以無縫整合，賦予網頁動態功能。 1）使用JavaScript操作Bootstrap組件，如模態框和導航欄。 2）確保jQuery正確加載，避免常見集成問題。 3）通過事件監聽和DOM操作實現複雜用戶交互和動態效果。

bootstrap搜索欄怎麼獲取Apr 07, 2025 pm 03:33 PM

如何使用 Bootstrap 獲取搜索欄的值：確定搜索欄的 ID 或名稱。使用 JavaScript 獲取 DOM 元素。獲取元素的值。執行所需的操作。

bootstrap怎麼插入圖片Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

See all articles