BootstrapTable使用实例
一、bootstrapTable简单使用：
<link rel="stylesheet" href="./static/libs/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="./static/libs/bootstrap-table-master/bootstrap-table.css">
<script src="./static/libs/jquery/jquery-1.11.2.min.js"></script>
<script src="./static/libs/bootstrap/js/bootstrap.js"></script>
<script src="./static/libs/bootstrap-table-master/bootstrap-table.js"></script>
<script src="./static/libs/bootstrap-table-master/locale/bootstrap-table-zh-CN.js"></script>
<div id="item_info_toolbar">
<a href="javascript:void(0)" class="btn btn-default btn-sm" id="btnAddDept" style="text-decoration: none;" data-toggle="modal" data-target="#deptModal">创建</a>
<a href="javascript:void(0)" class="btn btn-default btn-sm" id="btnAddDept" style="text-decoration: none;" data-toggle="modal" data-target="#adm-user-create-user">编辑</a>
<a href="javascript:void(0)" class="btn btn-default btn-sm" id="btnAddDept" style="text-decoration: none;">删除</a>
<a href="javascript:void(0)" class="btn btn-default btn-sm" id="btnEditDept" style="text-decoration: none;">排序</a>
<a href="javascript:void(0)" class="btn btn-default btn-sm" id="btnEditDept" style="text-decoration: none;" onclick="getSelectValue()">获取选中行值</a>
</div>
<table id="table" data-toggle="table" class="table table-striped">
<thead>
<tr>
</tr>
</thead>
</table>
<script>
$('#table').bootstrapTable('destroy').bootstrapTable({
url: 'data/' + 'adm-user' + '.json',
method: 'POST',
uniqueId: 'id', // 绑定ID，不显示
striped: false, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
undefinedText: '--',
//singleSelect: true, // 单选checkbox，默认为复选
showRefresh : true, // 显示刷新按钮
showColumns : true, // 选择显示的列
toolbar: '#item_info_toolbar', // 搜索框位置
search: true, // 搜索开启,
strictSearch: true,
clickToSelect: true, // 点击选中行
pagination: true, //是否显示分页
pageNumber:1, //初始化加载第一页，默认第一页,并记录
pageSize:5,//每页显示的数量
pageList: [5, 10, 20, 50, 100],//设置每页显示的数量
paginationPreText:"上一页",
paginationNextText:"下一页",
paginationLoop:false,
//showToggle: true, //是否显示详细视图和列表视图的切换按钮
//cardView: false, //是否显示详细视图
//detailView: false, //是否显示父子表
//showPaginationSwitch: true,
//得到查询的参数
queryParams : function (params) {
//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
var temp = {
rows: params.limit, //页面大小
page: (params.offset / params.limit) + 1, //页码
sort: params.sort, //排序列名
sortOrder: params.order //排位命令（desc，asc）
};
return temp;
},
columns: [
{
checkbox: true
},{
field: 'username',
title:'用户名',
valign: 'middle',
width: '16%',
sortable: true
},{
field: 'fullname',
title:'姓名',
width: '16%'
},{
field: 'status',
title:'密码认证',
width: '16%'
},{
field: 'availableSpace',
title:'智能卡认证',
valign: 'middle',
width: '16%'
},{
field: 'totalSpace',
title:'个人空间配额',
width: '16%'
},{
field: 'storageServer',
title:'私密空间配额',
formatter: operateFormatter
}
],
onLoadSuccess: function () {
alert('表格加载成功！');
},
onLoadError: function () {
showTips("数据加载失败！");
},
onDblClickRow: function (row, $element) {
var id = row.ID;
//EditViewById(id, 'view');
},
rowStyle: function (row, index) { //设置行的特殊样式
//这里有5个取值颜色['active', 'success', 'info', 'warning', 'danger'];
var strclass = "";
if (index == 1) {
strclass = "warning";
console.log(row);
}
return { classes: strclass }
}
});
function getSelectValue(){
var a = $table.bootstrapTable('getSelections');//获取选中行的数据
if(a.length > 0){
console.log(a);
}
}
function operateFormatter (value, row, index) {
var result = '<button class="btn btn-action" title="激活USBKEY认证" onclick=""><i class="glyphicon glyphicon-pencil"></i></button>'
return result;
}
</script>adm-user：
[
{
"id": 2018100701,
"username": "user1",
"fullname": "用户1",
"status": "启用",
"availableSpace": "10GB",
"totalSpace": "20GB",
"storageServer" : "nas1"
},
{
"id": 2018100702,
"username": "user2",
"fullname": "用户2",
"status": "启用",
"availableSpace": "10GB",
"totalSpace": "20GB",
"storageServer" : "nas1"
},
{
"id": 2018100703,
"username": "user3",
"fullname": "用户3",
"status": "启用",
"availableSpace": "10GB",
"totalSpace": "20GB",
"storageServer" : "nas1"
},
{
"id": 2018100704,
"username": "user4",
"fullname": "用户4",
"status": "启用",
"availableSpace": "10GB",
"totalSpace": "20GB",
"storageServer" : "nas1"
},
{
"id": 2018100705,
"username": "user5",
"fullname": "用户5",
"status": "启用",
"availableSpace": "10GB",
"totalSpace": "20GB",
"storageServer" : "nas1"
},
{
"id": 2018100706,
"username": "user6",
"fullname": "用户6",
"status": "启用",
"availableSpace": "10GB",
"totalSpace": "20GB",
"storageServer" : "nas1"
},
{
"id": 2018100707,
"username": "user7",
"fullname": "用户7",
"status": "启用",
"availableSpace": "10GB",
"totalSpace": "20GB",
"storageServer" : "nas1"
},
{
"id": 2018100708,
"username": "user8",
"fullname": "用户8",
"status": "启用",
"availableSpace": "10GB",
"totalSpace": "20GB",
"storageServer" : "nas1"
},
{
"id": 2018100709,
"username": "user9",
"fullname": "用户9",
"status": "启用",
"availableSpace": "10GB",
"totalSpace": "20GB",
"storageServer" : "nas1"
},
{
"id": 2018100710,
"username": "user10",
"fullname": "用户10",
"status": "启用",
"availableSpace": "10GB",
"totalSpace": "20GB",
"storageServer" : "nas1"
},
{
"id": 2018100711,
"username": "user11",
"fullname": "用户11",
"status": "启用",
"availableSpace": "10GB",
"totalSpace": "20GB",
"storageServer" : "nas1"
}
]二、 利用bootstrapTable来设置要隐藏和显示的列：
$(function () {
//初始化table
LoadingDataListOrderRealItems();
//隐藏列
$('#tableOrderRealItems').bootstrapTable('showColumn', 'ShopName');
$('#tableOrderRealItems').bootstrapTable('hideColumn', 'GoodsId');
$('#tableOrderRealItems').bootstrapTable('hideColumn', 'OrderItemId');
$('#tableOrderRealItems').bootstrapTable('hideColumn', 'ShopName');
$('#tableOrderRealItems').bootstrapTable('hideColumn', 'SellerName');
}); 三、 也可以直接使用hidden属性来设置：
columns: [
{
field: 'OrderId',
title: '#',
align: 'center',
}, {
field: 'OrderItemId',
title: 'OrderItemId',
align: 'left',
hidden:true,
}, {
field: 'GoodsId',
title: 'GoodsId',
align: 'left',
hidden:true,
}, {
field: 'OrderCode',
title: '订单编号',
align: 'left',
}
]四、如何获取数据：
方式一：表格中配置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<table id="table"
data-toggle="table"
data-url="data/table.json"
data-pagination="true"
data-page-number=1
data-page-size=10
data-search=true
data-show-refresh=true
data-show-pagination-switch=true
data-search-align="left"
>
<thead>
<tr>
<th data-field="id">id</th>
<th data-field="name">name</th>
<th data-field="price">price</th>
<th data-field="column1">column1</th>
<th data-field="column2">column2</th>
<th data-field="column3">column3</th>
<th data-field="column4">column4</th>
</tr>
</thead>
</table>
<script>
$(function () {
//隐藏列
$('#table').bootstrapTable('hideColumn', 'column4');
})
</script>
</body>
</html>方式二：JavaScript配置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<button onclick="getData('table2')">点击获取数据</button>
<table id="table" data-toggle="table">
<thead>
<tr>
<th data-field="id">id</th>
<th data-field="name">name</th>
<th data-field="price">price</th>
<th data-field="column1">column1</th>
<th data-field="column2">column2</th>
<th data-field="column3">column3</th>
<th data-field="column4">column4</th>
</tr>
</thead>
</table>
<script>
function getData(url){
$('#table').bootstrapTable('destroy').bootstrapTable({ //'destroy' 是必须要加的==作用是加载服务器// //数据，初始化表格的内容Destroy the bootstrap table.
url: 'data/' + url + '.json',
pagination: true,
pageList:[],
pageNumber:1,
pageSize:5,//每页显示的数量
paginationPreText:"上一页",
paginationNextText:"下一页",
paginationLoop:false,
columns: [
{
field: 'id',
title:'id',
valign: 'middle',
},{
field: 'name',
title:'name'
},{
field: 'price',
title:'price'
},{
field: 'column1',
title:'请求内容'
},{
field: 'column2',
title:'请求内容'
},{
field: 'column3',
title:'请求内容'
},{
field: 'column4',
title:'请求内容'
}
]
})
}
</script>
</body>
</html>