在使用jQuery开发的时候，经常会用到Bootstrap Table来实现需要用到的一些表格。
bootstrap-table 被设计来减少开发时间,开发人员不需要特定的知识就可以做出很美妙的table。非常轻量级的和功能丰富的。满足企业开发需求。
demo:
<!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
{ "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里面加一个搜索框的标签
<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
var temp = { mac: $("#mac").val(), floorId: $("#floorId").val(), placeId: $("#placeId").val(), buildingId: $("#buildingId").val(), limit: params.limit, // 每页显示数量 offset: params.offset, // SQL语句起始索引 };
最后写搜索按钮的点击事件，每次点击的时候需要拼接所选择的参数发起一次请求
// 查询按钮事件 $('#search').click(function() { $('#mytab').bootstrapTable('refresh', { url: "test.json" }); })
参考代码
<!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~~
