Bootstrap Table使用教程（請求json數(shù)據(jù)渲染表格）

今天來寫一個關(guān)于Bootstrap Table使用教程（請求json數(shù)據(jù)渲染表格）
json數(shù)據(jù)來源于后端小伙伴的接口，我放在本地進行模擬了

涉及到的知識點
1：Bootstrap Table使用教程，基本請求，將請求過來的數(shù)據(jù)進行分頁，每頁5條內(nèi)容，也可以選擇每頁15條，20條或者更多

2： 定義刪除按鈕功能、獲得要刪除的數(shù)據(jù)，聲明一個數(shù)組，通過獲得別選中的來進行遍歷，cid為獲得到的整條數(shù)據(jù)中的一列，前端刪除就沒寫了，直接后端刪除，刪除掉數(shù)據(jù)庫內(nèi)容，在執(zhí)行刷新表格即可刪除。

3：編輯按鈕，編輯按鈕的時候會彈出form表單，節(jié)省篇幅，留一個編輯按鈕的點擊事件，可自行測試。

4：表格的內(nèi)容過長的時候，整個表格會變得不那么美觀，有些內(nèi)容會占據(jù)兩行，但是表格稀稀疏疏，優(yōu)化的時候做到將超過的內(nèi)容隱藏起來，以達到自適應(yīng)的要求。

5：將后端傳過來的性別等進行判斷，后端0，1渲染的時候判斷男女

6：格式化時間，將后端傳過來的時間轉(zhuǎn)化，比如后端傳的時間戳："visitTime": 1572502840091,通過代碼轉(zhuǎn)化成時分秒的格式2019-10-31 14:20

這里推薦一個時間戳轉(zhuǎn)換工具：https://tool.lu/timestamp 有興趣的小伙伴可以去看一下。

image.png

話不多說，上代碼，里面的引入文件可以直接去官網(wǎng)下載，這里為了使用方便，用的是cdn引入，建議將下載到本地哦。
示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Dashboard | Nadhif - Responsive Admin Template</title>
        <link rel="stylesheet" >
        <link rel="stylesheet" >
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/locale/bootstrap-table-zh-CN.min.js"></script>
    </head>
    <body>
        <a href="javascript:;"  id="remove"><span class="hidden-480">刪除</span></a>
        <table id="mytab" class="table table-hover"></table>
        <script>
            $('#mytab').bootstrapTable({
                method: 'get',
                url: "test.json", // 請求路徑
                striped: true, // 是否顯示行間隔色
                pageNumber: 1, // 初始化加載第一頁
                pagination: true, // 是否分頁
                sidePagination: 'client', // server:服務(wù)器端分頁|client：前端分頁
                pageSize: 5, // 單頁記錄數(shù)
                pageList: [5, 20, 30],
                // showRefresh : true,// 刷新按鈕
                queryParams: function(params) { // 上傳服務(wù)器的參數(shù)
                    var temp = {
                        name: $("#sname").val(),
                        viewReason: $("#viewReason").val(),
                    };
                    return temp;
                },
                columns: [{
                    checkbox: true
                }, {
                    title: 'id',
                    field: 'id',
                    visible: false
                }, {
                    title: '設(shè)備編號',
                    field: 'deviceId',

                }, {
                    title: '姓名',
                    field: 'name',

                }, {
                    title: '性別',
                    field: 'sex',
                    formatter: formatSex
                }, {
                    title: '證件號碼',
                    cellStyle: formatTableUnit,
                    formatter: paramsMatter,
                    field: 'card'
                }, {
                    title: '聯(lián)系電話',
                    field: 'phone'
                }, {
                    title: '被訪姓名',
                    field: 'viewPeople'
                }, {
                    title: '來訪事由',
                    field: 'viewReason',
                    formatter: formatReason
                }, {
                    title: '來訪時間',
                    field: 'visitTime',
                    
                    formatter: formatTime
                }, {
                    title: '是否離開',
                    field: 'isLeave',
                    formatter: formatIsLeave
                }, {
                    title: '操作',
                    field: 'id',
                    formatter: option
                }]
            })

            // 定義刪除、更新按鈕
            function option(value, row, index) {
                var htm = "";
                htm += '<button id="dupdevice" deviceId="' + value +
                    '" onclick="updDevice(' + value + ')">編輯</button>'
                return htm;
            }

            //表格超出寬度鼠標懸停顯示td內(nèi)容
            function paramsMatter(value, row, index) {
                var span = document.createElement("span");
                span.setAttribute("title", value);
                span.innerHTML = value;
                return span.outerHTML;
            }
            //td寬度以及內(nèi)容超過寬度隱藏
            function formatTableUnit(value, row, index) {
                return {
                    css: {
                        "white-space": "nowrap",
                        "text-overflow": "ellipsis",
                        "overflow": "hidden",
                        "max-width": "60px"
                    }
                }
            }

            // 格式化性別"sex": 0,是女  "sex": 1,是男
            function formatSex(value, row, index) {
                return value == 1 ? "男" : "女";
            }
            // 格式化在離廠//"isLeave": 0,是離場，"isLeave": 1,是在場
            function formatIsLeave(value, row, index) {
                return value == 1 ? "離廠" : "在廠";
            }

            // 格式化時間
            function formatTime(value, row, index) {
                var date = new Date();
                date.setTime(value);
                var month = date.getMonth() + 1;
                var hours = date.getHours();
                if(hours < 10)
                    hours = "0" + hours;
                var minutes = date.getMinutes();
                if(minutes < 10)
                    minutes = "0" + minutes;
                var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
                    " " + hours + ":" + minutes;
                return time;
            }

            // 格式化訪問理由 "viewReason": 1是面試,2是開會，3是拜訪客戶，4是項目實施
            function formatReason(value, row, index) {
                var str;
                switch(value) {
                    case 1:
                        str = "面試";
                        break;
                    case 2:
                        str = "開會";
                        break;
                    case 3:
                        str = "拜訪客戶";
                        break;
                    case 4:
                        str = "項目實施";
                        break;
                    default:
                        str = "其他";
                }
                return str;
            }

            // 刪除按鈕事件
            $("#remove").on("click", function() {

                if(!confirm("是否確認刪除？"))
                    return;
                var rows = $("#mytab").bootstrapTable('getSelections'); // 獲得要刪除的數(shù)據(jù)
                if(rows.length == 0) { // rows 主要是為了判斷是否選中，下面的else內(nèi)容才是主要
                    alert("請先選擇要刪除的記錄!");
                    return;
                } else {
                    var ids = new Array(); // 聲明一個數(shù)組
                    $(rows).each(function() { // 通過獲得別選中的來進行遍歷
                        ids.push(this.id); // cid為獲得到的整條數(shù)據(jù)中的一列
                    });

                    //后端刪除的方法
                    deleteMs(ids)
                }

            })

            // 刪除訪客,刪除數(shù)據(jù)庫內(nèi)容，刷新表格即可刪除
            function deleteMs(ids) {
                $.ajax({
                    url: basePath + "/caller/dels?ids=" + ids,
                    dataType: "json",
                    type: "get",
                    success: function(data) {
                        if(data > 0) {
                            msg(6, "操作成功")
                            $('#mytab').bootstrapTable('refresh', {
                                url: basePath + '/caller/list'
                            });
                        }
                    }
                });
            }
            // 編輯訪客
            function updDevice(id) {
                alert("編輯")
            }
        </script>
    </body>

</html>

test.json

[
    {
        "id": 139,
        "deviceId": "3",
        "name": "424",
        "sex": 0,
        "viewReason": 1,
        "viewPeople": "4",
        "card": "12345677",
        "isLeave": 1,
        "phone": "1567865475",
        "organId": 1,
        "organName": "字節(jié)跳動",
        "companyId": 1,
        "visitTime": 1572502840091,
        "fenceId": "20191031142032",
        "headUrl": "http://localhost:8081/pion/images/cmao.jpg",
        "organIds": null
    }, {
        "id": 140,
        "deviceId": "EAFA6CCF3CDD",
        "name": "訪客圍欄測試1",
        "sex": 0,
        "viewReason": 2,
        "viewPeople": "測試",
        "card": "",
        "isLeave": 0,
        "phone": "",
        "organId": 1,
        "organName": "字節(jié)跳動",
        "companyId": 1,
        "visitTime": 1572512489920,
        "fenceId": "2019103117129",
        "headUrl": "http://localhost:8081/pion/images/cmao.jpg",
        "organIds": null
    },{
        "id": 140,
        "deviceId": "EAFA6CCF3CDD",
        "name": "訪客圍欄測試2",
        "sex": 1,
        "viewReason": 1,
        "viewPeople": "測試",
        "card": "",
        "isLeave": 0,
        "phone": "",
        "organId": 1,
        "organName": "字節(jié)跳動",
        "companyId": 1,
        "visitTime": 1572512489920,
        "fenceId": "2019103117129",
        "headUrl": "http://localhost:8081/pion/images/cmao.jpg",
        "organIds": null
    },{
        "id": 140,
        "deviceId": "EAFA6CCF3CDD",
        "name": "訪客圍欄測試3",
        "sex": 1,
        "viewReason": 1,
        "viewPeople": "測試",
        "card": "",
        "isLeave": 0,
        "phone": "",
        "organId": 1,
        "organName": "字節(jié)跳動",
        "companyId": 1,
        "visitTime": 1572512489920,
        "fenceId": "2019103117129",
        "headUrl": "http://localhost:8081/pion/images/cmao.jpg",
        "organIds": null
    },{
        "id": 140,
        "deviceId": "EAFA6CCF3CDD",
        "name": "訪客圍欄測試4",
        "sex": 1,
        "viewReason": 1,
        "viewPeople": "測試",
        "card": "",
        "isLeave": 0,
        "phone": "",
        "organId": 1,
        "organName": "字節(jié)跳動",
        "companyId": 1,
        "visitTime": 1572512489920,
        "fenceId": "2019103117129",
        "headUrl": "http://localhost:8081/pion/images/cmao.jpg",
        "organIds": null
    }, {
        "id": 142,
        "deviceId": "公寓i467ty8",
        "name": "跳跳21魚",
        "sex": 1,
        "viewReason": 1,
        "viewPeople": "11",
        "card": "3408231234567851524",
        "isLeave": 0,
        "phone": "13661725475",
        "organId": 1,
        "organName": "212聯(lián)",
        "companyId": 1,
        "visitTime": 1572513935374,
        "fenceId": "20191031172532",
        "headUrl": "http://localhost:8081/pion/images/cmao.jpg",
        "organIds": null
    }
]

原文作者：祈澈姑娘 技術(shù)博客：http://www.itdecent.cn/u/05f416aefbe1
90后前端妹子，愛編程，愛運營，文藝與代碼齊飛，魅力與智慧共存的程序媛一枚，歡迎關(guān)注【編程微刊】公眾號，回復【領(lǐng)取資源】,500G編程學習資源干貨免費送。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容