Bootstrap之表格插件Bootstrap-table
一.前言
在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本文介绍bootstrap-table是一款非常有名的开源表格插件，在很多项目中广泛的应用，同时界面采用扁平化的风格，用户体验比较好，更好兼容各种客户端。
Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、主从表显示、合并列、国际化处理等处理功能，而且该插件同时也提供了一些不错的扩展功能，如移动行、移动列位置等一些特殊的功能，插件可以用基于HTML5的data-*属性标识设置，也可以使用Javascript方式进行设置，非常方便。
官方详细文档教程: https://bootstrap-table.com/docs/getting-started/introduction/
二.实例分析
1.引入资源css,js
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.2.1/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://lib.baomitu.com/bootstrap-table/1.13.1/bootstrap-table.min.css">
<!-- jQuery first, then Popper.js, then Bootstrap JS, and then Bootstrap Table JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.6.2/core.min.js"></script>
<script src="https://lib.baomitu.com/bootstrap-table/1.13.1/bootstrap-table.min.js"></script>
<script src="https://lib.baomitu.com/bootstrap-table/1.13.1/locale/bootstrap-table-zh-CN.min.js"></script>
<!-- 引入layer -->
<script type="text/javascript" src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script>
2.展示html
<div class="container">
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
</div>
<table id="table"></table>
</div>
3.js代码
<script type="text/javascript">
$(function () {
$('#table').bootstrapTable({
url:'http://localhost:8015/pageList', //接口地址,注意:数据放在rows字段
method: 'get', //请求方式
cache: false, //是否使用缓存
toolbar:'#toolbar',//工具按钮用哪个容器
//height: 600, //设置行高,没有设置的话,就默认取pageSize条数自适应
striped: true, //是否显示行间隔色
strickSearch: true,
sortOrder: "asc", //排序方式
sortable: true, //是否启动排序
queryParams:'', //传递参数(*)
jsonp: true,
iconSize: 'outline',
pagination: true, //是否分页
pageSize: 10, //显示每页条数
pageNumber:1, //初始化加载第一页
pageList: [10, 20, 50, 100, 200, 500], //每页可显示的行数
sidePagination:'client', //分页方式,采用 server client
search: true, //是否搜索
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
showExport: true,
exportTypes: ['csv','txt','xml'],
clickToSelect: true, //是否启动点击选中行
showToggle :true , //是否显示详细视图与列表视图
uniqueId:"ID", //每一行的唯一标识,一般为主键id
cardView: false, //是否显示详细视图
columns: [
{
field:"checked",
checkbox:true
},
{
field:"id",
title:"编号ID",
align:"center",
valign:"middle",
sortable:"true"
},
{
field:"name",
title:"名称",
align:"center",
valign:"middle",
sortable:"true"
},
{
field:"description",
title:"描述",
align:"center",
valign:"middle",
sortable:"true"
},
{
field: 'operate',
title: '操作',
align: 'center',
colspan: 1,
events: operateEvents,
formatter: operateFormatter
}
]
// data:datas,
});
});
function operateFormatter(value, row, index) {
return '' +
'' + '' + '编辑' + ' | ' +
'' + '删除' + '' + ''
;
};
window.operateEvents = {
'click .edit': function (e, value, row, index) {
layer.msg("编辑:"+row.id);
},'click .remove': function (e, value, row, index) {
layer.msg("删除:"+row.id);
},
};
</script>
接口数据 http://localhost:8015/pageList: 注意 客户端分页，需要指定数据字段为rows
{“errorCode”:0,“model”:null,“list”:null,“rows”:[{“id”:4,“name”:“名字1”,“description”:“描述1”},{“id”:5,“name”:“名字2”,“description”:“描述2”},{“id”:6,“name”:“名字3”,“description”:“描述3”},{“id”:7,“name”:“名字4”,“description”:“描述4”},{“id”:8,“name”:“名字5”,“description”:“描述5”},{“id”:9,“name”:“名字6”,“description”:“描述6”},{“id”:10,“name”:“名字7”,“description”:“描述7”},{“id”:11,“name”:“名字8”,“description”:“描述8”},{“id”:12,“name”:“名字9”,“description”:“描述9”},{“id”:13,“name”:“名字10”,“description”:“描述10”},{“id”:14,“name”:“名字11”,“description”:“描述11”},{“id”:15,“name”:“名字12”,“description”:“描述12”},{“id”:16,“name”:“名字13”,“description”:“描述13”},{“id”:17,“name”:“名字14”,“description”:“描述14”},{“id”:18,“name”:“名字15”,“description”:“描述15”},{“id”:19,“name”:“名字16”,“description”:“描述16”},{“id”:20,“name”:“名字17”,“description”:“描述17”},{“id”:21,“name”:“名字18”,“description”:“描述18”},{“id”:22,“name”:“名字19”,“description”:“描述19”},{“id”:23,“name”:“名字20”,“description”:“描述20”},{“id”:24,“name”:“名字21”,“description”:“描述21”},{“id”:25,“name”:“名字22”,“description”:“描述22”},{“id”:26,“name”:“名字23”,“description”:“描述23”},{“id”:27,“name”:“名字24”,“description”:“描述24”},{“id”:28,“name”:“名字25”,“description”:“描述25”},{“id”:29,“name”:“名字26”,“description”:“描述26”},{“id”:30,“name”:“名字27”,“description”:“描述27”},{“id”:31,“name”:“名字28”,“description”:“描述28”},{“id”:32,“name”:“名字29”,“description”:“描述29”},{“id”:33,“name”:“名字30”,“description”:“描述30”},{“id”:34,“name”:“名字31”,“description”:“描述31”},{“id”:35,“name”:“名字32”,“description”:“描述32”}]}
4.效果图
三.客户端分页和服务端分页的区别
当服务器没有对数据进行分页时，前端页面设计又要求进行分页，要分开来设置。
客户端分页：后台一次性将数据推送到前台，由前台代码负责分页、排序等；
responseHandler: function(data){
return data.response;
}
服务端分页：一次只传当前页的数据，点上一页或下一页时再以ajax方式获取所对应的数据；
sidePagination : “client”,
responseHandler: function(data){
return data.response.rows;
}
四.其他api
1.条件查询
指定查询条件 id=2 name=123
var queryParams = {};
queryParams.id= '2';
queryParams.name= '123';
var temp = {
url: "/pageList",
query: queryParams
};
$("#table").bootstrapTable('refresh', temp);
2.列表分条件显示
示例:如果字段为type的值为s则显示为管理员,如果是ss值则显示为店员
{
field: 'type',
title: '身份级别',
align: 'center',
colspan: 1,
formatter: function (value, row, index) {
if (row.type == '0') {
value = "组长";
} else if (row.type == '1') {
value = "科长";
}
return value;
}
},