bootstrap-table的使用
程序员文章站
2024-02-17 13:59:40
...
一、背景
使用bootstrap框架进行页面编写的时候发现其组件中没有表格，网上查找发现有一个插件bootstrap-table，但是使用教程有些繁杂，走了一点弯路，希望写下此篇博客，让需要的人可以直接使用，避免采坑。
二、使用
bootstrap-table的使用包含客户端和服务端的使用，我这里主要说服务端的使用，因为一般数据都是从后台动态加载的。
在说如何使用之前先上一张图，看看达到的效果能不能符合你的要求
1、引入css/js文件
因为bootstrap-table是基于bootstrap开发的一个表格插件，所以需要引入bootstrap相关的css和js，引入bootstrap-table相关的css和js
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-table.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script>
目录结构如图：
我这里使用的是webstorm开发工具做的测试，如果使用IDEA或Eclipse，可直接将bootstrap-table下的文件拷贝到webapp目录下
2、添加table标签
在body标签内加人table标签，来动态加载表格
<table id="table" class="table"></table>
3.通过js语法动态加载表格数据
<script>
$('#table').bootstrapTable({
url: 'http://localhost:8080/user/findAllByPage', //获取数据的请求url
method: 'get', //请求方式GET
dataType: "json", //返回json格式数据
toolbar:'#toolbar',
striped: true,
cache: false,
//dataField: "data", //使用服务端这里要注释掉
classes:'table',//边框
undefinedText:'',//当数据为 undefined 时显示的字符
pagination:true,//启动分页
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
paginationLoop:true,
sidePagination: "server",
pageNumber: 1, //初始化加载第一页，默认第一页,并记录
pageSize: 2, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
showColumns: true, //显示下拉框勾选要显示的列
showRefresh: true, //显示刷新按钮
showToggle:true,//显示一行是否改成竖着
// height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
cardView: false,//是否显示详细视图
showPaginationSwitch:false,//是否显示 下面的分页框
minimumCountColumns: 2,
search: false, //是否显示表格搜索
clickToSelect: true, //是否启用点击选中行
detailView:false,//是否显示父子表
//得到查询的参数
queryParams : function (params) {
console.log(params)
console.log(params.limit)
//这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
var temp = {
pageSize: params.limit, //每页显示数量 服务端分页需要
pageIndex:params.offset, //起始索引 服务端分页需要
};
return temp;
},
columns: [{
field: 'checkbox',
title: 'checkbox',
checkbox:true
}, {
field: 'number',
title: '序号',
formatter: function(value,row,index){
return index+1;
}
}, {
field: 'username', //对应后台的字段名
title: '用户名',
align: 'center'
}, {
field: 'email',
title: '邮箱',
align: 'center'
}, {
field: 'phone',
title: '手机号'
}, {
field: 'enable',
title: '状态',
formatter: function(value,row,index){
if (value){
return "**"
}else {
return "不可用"
}
}
},{
title: '操作',
field: 'caozuo',
align: 'center',
formatter:actionFormatter
}],
});
//操作栏的格式化
function actionFormatter(value, row, index) {
var id = value;
var result = "";
result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
return result;
}
</script>
其中相关配置已有说明，这里不再赘述，当没有获取到数据时显示如下：
4、后台java代码
@CrossOrigin
@RestController
@RequestMapping("/user")
public class UserController {
@RequestMapping("/findAllByPage")
public Map findAllByPage(@RequestParam(value = "pageSize") Integer pageSize,
@RequestParam(value = "pageIndex") Integer pageIndex){
System.out.println(pageIndex+" "+pageSize);
Map map = new HashMap( );
List<User> list= new ArrayList<>( );
User user = new User();
user.setEmail( "aaa@qq.com" );
user.setEnable( true );
user.setPassword( "123456" );
user.setPhone( "13516452565" );
user.setUsername( "张三" );
list.add( user );
User user2 = new User();
user2.setEmail( "aaa@qq.com" );
user2.setEnable( true );
user2.setPassword( "123456" );
user2.setPhone( "13516452565" );
user2.setUsername( "李四" );
list.add( user2 );
User user3 = new User();
user3.setEmail( "aaa@qq.com" );
user3.setEnable( true );
user3.setPassword( "123456" );
user3.setPhone( "13516452565" );
user3.setUsername( "王五" );
list.add( user3 );
User user4 = new User();
user4.setEmail( "aaa@qq.com" );
user4.setEnable( true );
user4.setPassword( "123456" );
user4.setPhone( "13516452565" );
user4.setUsername( "王五" );
list.add( user4 );
User user5 = new User();
user5.setEmail( "aaa@qq.com" );
user5.setEnable( true );
user5.setPassword( "123456" );
user5.setPhone( "13516452565" );
user5.setUsername( "王五" );
list.add( user5 );
map.put( "total", 5);
map.put( "rows",list );
return map;
}
}
其中
@CrossOrigin表示支持跨域 因为我这里不在一个项目中，涉及到跨域问题
@RestController 是@ResponseBody和@Controller结合的注解，表示是可以返回json格式的Controller
@RequestMapping注解表示映射的url
@RequestParam注解表示接收前端传来的参数 value代表参数名称 后面的Integer表示接收的类型 pageSize表示把接收的值赋值给它
pageSize表示每页显示记录数，pageIndex表示查询的起始索引
我这里没有从数据库获取数据，而是返回了固定写死的5个数据，大家可以根据需要从数据库获取数据并分页