bootstrapTable插件的引入及簡單使用

bootstrap的元件過少，新項目中引入github上星數較多的bootstrapTable插件。

一.示範

先看看簡單的效果

元件已經比較完備，大部分正常功能都有了（分頁，搜尋，排序，篩選等），樣式略醜不過影響不大。

二.代碼

1.html部分

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

2.js部分

window.onload = () => {
    //先生成20個重複資料作為實際資料來使用
    let data = new Array(20).fill({
        id: 1,
        name: "Item 1",
        price: "$1"
    });

    $("#table").bootstrapTable({
        pagination: true, //獲得分頁功能
        pageSize: 15, //預設分頁數量
        pageList: [5, 10, 15, 20], //分頁數量選項
        search: true, //獲得一個搜尋框
        striped: true, //開啟斑馬線
        showColumns: true, //獲得一個能選擇顯示某些列的按鈕
        showRefresh: true, //獲得一個重新整理資料按鈕
        columns: [{
                field: "id",
                title: "Item ID"
            },
            {
                field: "name",
                title: "Item Name"
            },
            {
                field: "price",
                title: "Item Price"
            }
        ],
        data: data
    });
};
           

三.需要的js與css

1.先把我整理完下好的貼出來，大家可以自己去下載下傳（私聊也行）

<!-- bootstrap的css -->
    <link rel="stylesheet" href="helper/bootstrap/bootstrap.min.css" target="_blank" rel="external nofollow" >
    <!-- bootstrap-table的css -->
    <link rel="stylesheet" href="helper/bootstrap_table/bootstrap-table.min.css" target="_blank" rel="external nofollow" >
    <!-- 一個純css美化架構，可不要 -->
    <link rel="stylesheet" href="helper/purecss/pure-min.css" target="_blank" rel="external nofollow" >
    <!-- bootstrap基于jq -->
    <script src="helper/bootstrap/jquery-3.4.1.js"></script>
    <!-- bootstrap的js -->
    <script src="helper/bootstrap/bootstrap.min.js"></script>
    <!-- bootstrap-table的js -->
    <script src="helper/bootstrap_table/bootstrap-table.min.js"></script>
    <!-- bootstrap-table漢化包的js -->
    <script src="helper/bootstrap_table/bootstrap-table-cn.js"></script>
           

這裡有一點需要注意，它的部分圖示還是依賴于bootstrap，是以我們項目裡需要把bootstrap的font檔案夾放在bootstrap.min.css的上一級。

2.這是可以直接使用的連結，如果隻是想測試，直接引入這一堆就可以了

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" target="_blank" rel="external nofollow" >
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" target="_blank" rel="external nofollow" >
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" target="_blank" rel="external nofollow" >
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css" target="_blank" rel="external nofollow" >
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/bootstr[email protected]/dist/bootstrap-table.min.js"></script>
           

四.常用屬性

$("#table").bootstrapTable({
        pagination: true, //獲得分頁功能
        pageSize: 10, //預設分頁數量
        pageList: [5, 10, 15, 20], //分頁數量選項

        search: true, //獲得一個搜尋框
        searchOnEnterKey: true, //按下回車才進行搜尋（false的時候是即時搜尋）

        showColumns: true, //獲得一個能選擇顯示某些列的按鈕
        showRefresh: true, //獲得一個重新整理資料按鈕
        showToggle: true, //獲得一個切換為卡片式表格的按鈕

        toolbar: "#toolbar", //工具欄

        columns: [
            //開啟複選框列
            {
                checkbox: "true"
            },
            {
                field: "id", //字段
                title: "Item ID", //表頭名
                sortable: "false", //開啟排序按鈕
                order: "asc", //排序方式
                align: "center", //表内容居中
                halign: "center", //表頭居中
                width: 50,
                visible: "true" //是否可視，預設就為true
            },
            {
                field: "name",
                title: "Item Name"
            },
            {
                field: "price",
                title: "Item Price"
            }
        ],
        data: data
    });
           

五.相關文檔連結

官方文檔：https://bootstrap-table.com/

中文文檔：https://blog.csdn.net/yapengliu/article/details/80191699