Bootstrap Table根据参数搜索功能

2020-12-14 16:28:30 浏览数 (1)

在使用jQuery开发的时候，经常会用到Bootstrap Table来实现需要用到的一些表格。

bootstrap-table 被设计来减少开发时间,开发人员不需要特定的知识就可以做出很美妙的table。非常轻量级的和功能丰富的。满足企业开发需求。

官网：https://www.bootstrap-table.com.cn/ GitHub地址:https://github.com/wenzhixin/bootstrap-table

demo:

代码语言：javascript复制
<!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>
    <style>
    </style>
    <body>
        <div class="mytab">
            <table id="mytab" class="table table-hover"></table>
        </div>
        <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 = {};
                    return temp;
                },
                columns: [{
                    checkbox: true
                }, {
                    title: '厂区ID',
                    field: 'placeId',
                }, {
                    title: 'MAC地址',
                    field: 'mac',
                }, {
                    title: '名称',
                    field: 'name',
                }, {
                    title: '类型',
                    field: 'mode',
                    formatter: formatMode
                }, {
                    title: '平均场强',
                    field: 'avgLevel',
                }, {
                    title: '通道号',
                    field: 'channel',
                }, {
                    title: '楼层号',
                    field: 'floorId',
                }, {
                    title: '建筑ID',
                    field: 'buildingId',
                }, {
                    title: '经度',
                    field: 'lon',
                }, {
                    title: '纬度',
                    field: 'lat',
                }]
            })
            // 格式化按钮
            function formatMode(value, row, index) {
                if (value == 0)
                    return "wifi";
                return "蓝牙";
            }
        </script>
    </body>
</html>

test.json

代码语言：javascript复制
{
    "rows": [{
        "lat": 30.48719161966308,
        "lon": 114.53451241344243,
        "mac": "0c:c6:cc:e9:80:41",
        "name": "shinei",
        "mode": 0,
        "avgLevel": -46,
        "channel": 1,
        "floorId": 1,
        "placeId": "19",
        "buildingId": 0,
        "limit": null,
        "offset": null
    }, {
        "lat": 30.487192545033068,
        "lon": 114.5346268683459,
        "mac": "0c:c6:cc:e9:82:61",
        "name": "shinei",
        "mode": 0,
        "avgLevel": -46,
        "channel": 1,
        "floorId": 1,
        "placeId": "19",
        "buildingId": 0,
        "limit": null,
        "offset": null
    }, {
        "lat": 30.4873227138991,
        "lon": 114.5346274620685,
        "mac": "0c:c6:cc:e9:83:61",
        "name": "shinei",
        "mode": 0,
        "avgLevel": -46,
        "channel": 1,
        "floorId": 1,
        "placeId": "19",
        "buildingId": 0,
        "limit": null,
        "offset": null
    }, {
        "lat": 30.48719262258305,
        "lon": 114.5347355859475,
        "mac": "0c:c6:cc:e9:84:21",
        "name": "shinei",
        "mode": 0,
        "avgLevel": -46,
        "channel": 1,
        "floorId": 1,
        "placeId": "19",
        "buildingId": 0,
        "limit": null,
        "offset": null
    }, {
        "lat": 30.48732913761642,
        "lon": 114.5347382328521,
        "mac": "0c:c6:cc:e9:8a:a1",
        "name": "shinei",
        "mode": 0,
        "avgLevel": -46,
        "channel": 1,
        "floorId": 1,
        "placeId": "19",
        "buildingId": 0,
        "limit": null,
        "offset": null
    }, {
        "lat": 31.874989841024682,
        "lon": 117.22911732423667,
        "mac": "0c:ef:af:00:09:c7",
        "name": "S2-C709",
        "mode": 0,
        "avgLevel": -40,
        "channel": 8,
        "floorId": 1,
        "placeId": "51",
        "buildingId": 0,
        "limit": null,
        "offset": null
    }],
    "total": 1731
}

是这个样子的

现在要实现一个功能，根据输入input的参数来查询表格的数据集 先在html里面加一个搜索框的标签

代码语言：javascript复制
<div style="margin: 20px;">
            <input type="text" id="mac" class="form-control" style="width: 20%; float: left" placeholder="mac">
            <input type="text" id="floorId" class="form-control" style="width: 20%; float: left" placeholder="搜索楼层ID">
            <input type="text" id="placeId" class="form-control" style="width: 20%; float: left" placeholder="厂区ID">
            <input type="text" id="buildingId" class="form-control" style="width: 20%; float: left" placeholder="建筑物ID">
            <span id="search"><button class="btn btn-default" type="button">搜索</button></span>
        </div>

然后写一下js的代码，在queryParams里面添加要搜索的参数，根据实际情况确定需不需带limit（每页显示数量）和offset

代码语言：javascript复制
var temp = {
                        mac: $("#mac").val(),
                        floorId: $("#floorId").val(),
                        placeId: $("#placeId").val(),
                        buildingId: $("#buildingId").val(),
                        limit: params.limit, // 每页显示数量
                        offset: params.offset, // SQL语句起始索引
                    };

最后写搜索按钮的点击事件，每次点击的时候需要拼接所选择的参数发起一次请求

代码语言：javascript复制
// 查询按钮事件
            $('#search').click(function() {
                $('#mytab').bootstrapTable('refresh', {
                    url: "test.json"
                });
            })

参考代码

代码语言：javascript复制
<!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>
    <style>
        .mytab{
            margin:20px;            
        }
    </style>
    <body>
        <div style="margin: 20px;">
            <input type="text" id="mac" class="form-control" style="width: 20%; float: left" placeholder="mac">
            <input type="text" id="floorId" class="form-control" style="width: 20%; float: left" placeholder="搜索楼层ID">
            <input type="text" id="placeId" class="form-control" style="width: 20%; float: left" placeholder="厂区ID">
            <input type="text" id="buildingId" class="form-control" style="width: 20%; float: left" placeholder="建筑物ID">
            <span id="search"><button class="btn btn-default" type="button">搜索</button></span>
        </div>
        <div class="mytab">
            <table id="mytab" class="table table-hover"></table>
        </div>
        <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 = {
                        mac: $("#mac").val(),
                        floorId: $("#floorId").val(),
                        placeId: $("#placeId").val(),
                        buildingId: $("#buildingId").val(),
                        limit: params.limit, // 每页显示数量
                        offset: params.offset, // SQL语句起始索引
                    };
                    return temp;
                },
                columns: [{
                    checkbox: true
                }, {
                    title: '厂区ID',
                    field: 'placeId',
                }, {
                    title: 'MAC地址',
                    field: 'mac',
                }, {
                    title: '名称',
                    field: 'name',
                }, {
                    title: '类型',
                    field: 'mode',
                    formatter: formatMode
                }, {
                    title: '平均场强',
                    field: 'avgLevel',
                }, {
                    title: '通道号',
                    field: 'channel',
                }, {
                    title: '楼层号',
                    field: 'floorId',
                }, {
                    title: '建筑ID',
                    field: 'buildingId',
                }, {
                    title: '经度',
                    field: 'lon',
                }, {
                    title: '纬度',
                    field: 'lat',
                }]
            })

            // 查询按钮事件
            $('#search').click(function() {
                $('#mytab').bootstrapTable('refresh', {
                    url: "test.json"
                });
            })
            // 格式化按钮
            function formatMode(value, row, index) {
                if (value == 0)
                    return "wifi";
                return "蓝牙";
            }
        </script>
    </body>
</html>

测试一下 在input框输入数据，并且点击按钮发起一次请求可以发现，将输入框的数据一起带入拼接参数，传给后端了。 ok~~

https bootstrap 网络安全

0 人点赞