Bootstrap Table使用教程（请求json数据渲染表格）

王小婷

发布于 2019-11-07 11:42:29

6.8K0

发布于 2019-11-07 11:42:29

文章被收录于专栏：编程微刊编程微刊

今天来写一个关于Bootstrap Table使用教程（请求json数据渲染表格） json数据来源于后端小伙伴的接口，我放在本地进行模拟了

涉及到的知识点 1：Bootstrap Table使用教程，基本请求，将请求过来的数据进行分页，每页5条内容，也可以选择每页15条，20条或者更多

2：定义删除按钮功能、获得要删除的数据，声明一个数组，通过获得别选中的来进行遍历，cid为获得到的整条数据中的一列，前端删除就没写了，直接后端删除，删除掉数据库内容，在执行刷新表格即可删除。

3：编辑按钮，编辑按钮的时候会弹出form表单，节省篇幅，留一个编辑按钮的点击事件，可自行测试。

4：表格的内容过长的时候，整个表格会变得不那么美观，有些内容会占据两行，但是表格稀稀疏疏，优化的时候做到将超过的内容隐藏起来，以达到自适应的要求。

5：将后端传过来的性别等进行判断，后端0，1渲染的时候判断男女

6：格式化时间，将后端传过来的时间转化，比如后端传的时间戳："visitTime": 1572502840091,通过代码转化成时分秒的格式2019-10-31 14:20

这里推荐一个时间戳转换工具：[https://tool.lu/timestamp/]，(https://tool.lu/timestamp/)有兴趣的小伙伴可以去看一下。

image.png

话不多说，上代码，里面的引入文件可以直接去官网下载，这里为了使用方便，用的是cdn引入，建议将下载到本地哦。示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Dashboard | Nadhif - Responsive Admin Template</title>
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.css">
        <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:服务器端分页|client：前端分页
                pageSize: 5, // 单页记录数
                pageList: [5, 20, 30],
                // showRefresh : true,// 刷新按钮
                queryParams: function(params) { // 上传服务器的参数
                    var temp = {
                        name: $("#sname").val(),
                        viewReason: $("#viewReason").val(),
                    };
                    return temp;
                },
                columns: [{
                    checkbox: true
                }, {
                    title: 'id',
                    field: 'id',
                    visible: false
                }, {
                    title: '设备编号',
                    field: 'deviceId',

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

                }, {
                    title: '性别',
                    field: 'sex',
                    formatter: formatSex
                }, {
                    title: '证件号码',
                    cellStyle: formatTableUnit,
                    formatter: paramsMatter,
                    field: 'card'
                }, {
                    title: '联系电话',
                    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内容
            function paramsMatter(value, row, index) {
                var span = document.createElement("span");
                span.setAttribute("title", value);
                span.innerHTML = value;
                return span.outerHTML;
            }
            //td宽度以及内容超过宽度隐藏
            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'); // 获得要删除的数据
                if(rows.length == 0) { // rows 主要是为了判断是否选中，下面的else内容才是主要
                    alert("请先选择要删除的记录!");
                    return;
                } else {
                    var ids = new Array(); // 声明一个数组
                    $(rows).each(function() { // 通过获得别选中的来进行遍历
                        ids.push(this.id); // cid为获得到的整条数据中的一列
                    });

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

            })

            // 删除访客,删除数据库内容，刷新表格即可删除
            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": "340823199308151524",
        "isLeave": 1,
        "phone": "13661725475",
        "organId": 1,
        "organName": "字节跳动",
        "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": "字节跳动",
        "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": "字节跳动",
        "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": "字节跳动",
        "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": "字节跳动",
        "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联",
        "companyId": 1,
        "visitTime": 1572513935374,
        "fenceId": "20191031172532",
        "headUrl": "http://localhost:8081/pion/images/cmao.jpg",
        "organIds": null
    }
]