欢迎光临
我的个人博客网站

boostrap-table表格插件笔记


1 bootstrap-table插件介绍

一个基于bootstrap的表格渲染插件,可以极大的简化表格的渲染操作

2 下载

github:https://github.com/wenzhixin/bootstrap-table

中文官网:https://www.bootstrap-table.com.cn/

英文官网:https://bootstrap-table.com/

下载后相关的依赖都在dist文件夹下

boostrap-table表格插件笔记

3 入门案例

请求json数据渲染表格

3.1 搭建工程

boostrap-table表格插件笔记

其中data.json的数据文件内容如下:

[ 	{"id":"1","name":"tom","sal":"4000","sex":"男","age":"18"}, 	{"id":"2","name":"jerry","sal":"2000","sex":"女","age":"26"}, 	{"id":"3","name":"heliufang","sal":"8000","sex":"男","age":"25"}, 	{"id":"4","name":"lucy","sal":"2500","sex":"女","age":"28"}, 	{"id":"5","name":"linda","sal":"1000","sex":"女","age":"16"}, 	{"id":"6","name":"jack","sal":"2500","sex":"男","age":"28"} ] 

这个data.json只是在做前端分页的时候使用

3.2 编写测试代码

【1.入门案例.html】

<!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8"> 		<title></title> 		<!-- 引入相关样式表 --> 		<link rel="stylesheet" type="text/css" href="bootstrap3/css/bootstrap.min.css"/> 		<link rel="stylesheet" type="text/css" href="bootstrap3/css/bootstrap-theme.min.css"/> 		<link rel="stylesheet" type="text/css" href="bootstrap-table/bootstrap-table.min.css"/> 	</head> 	<body> 		<!-- 创建表格容器 --> 		<table id="table"></table> 		<!-- 引入相关js --> 		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script> 		<script src="bootstrap3/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> 		<script src="bootstrap-table/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script> 		<script src="bootstrap-table/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script> 		<script type="text/javascript"> 			//通过bootrap-table插件渲染表格 			$('#table').bootstrapTable({ 			    url: 'json/data.json',//请求的url 			    columns: [{ 			        field: 'id', 			        title: '序号' 			    }, { 			        field: 'name', 			        title: '姓名' 			    }, { 			        field: 'sal', 			        title: '薪水' 			    }, { 			        field: 'sex', 			        title: '性别' 			    },{ 			        field: 'age', 			        title: '年龄' 			    }] 			}); 		</script> 	</body> </html> 

测试结果如下:

boostrap-table表格插件笔记

可以看到插件自动帮我们把数据渲染好了,是不是很方便!!!

4 前端分页实现

【2.前端分页.html】将【1.入门案例.html】中的渲染的js代码改成如下:

//通过bootrap-table插件渲染表格 $('#table').bootstrapTable({     url: 'json/data.json',     columns: [{         field: 'id',         title: '序号'     }, {         field: 'name',         title: '姓名'     }, {         field: 'sal',         title: '薪水'     }, {         field: 'sex',         title: '性别'     },{         field: 'age',         title: '年龄'     }],     striped: false,    //是否显示行间隔色     cache: false,     //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)     pagination: true, //是否显示分页(*)     sortable: true,   //是否启用排序     sortOrder: "asc", //排序方式     sidePagination: "client",//分页方式:client客户端分页,server服务端分页(*)     pageNumber: 1,//初始化加载第一页,默认第一页,并记录     pageSize: 2,//每页的记录行数(*)     pageList: [2, 5, 10, 20], //可供选择的每页的行数(*)     search: true,//是否显示表格搜索     strictSearch: false,//是否使用严格搜索模式     showColumns: true, //是否显示所有的列(选择显示的列)     showRefresh: true,//是否显示刷新按钮     minimumCountColumns: 2,//最少允许的列数     clickToSelect: true,//是否启用点击选中行     //height: 500,//行高,如果没有设置height属性,表格自动根据记录条数设置表格高度     uniqueId: "id",//每一行的唯一标识,一般为主键列     showToggle: true,//是否显示详细视图和列表视图的切换按钮     cardView: false,//是否显示详细视图     detailView: false,//是否显示父子表 }); 

效果如下:

boostrap-table表格插件笔记

5 工具栏

工具栏实现分为两步

  • 准备工具按钮容器

  • bootstrap-table中引用插件

​ 加上这个配置即可:toolbar: ‘#toolbar’, //工具按钮用哪个容器

案例【3.工具栏.html】

<!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8"> 		<title></title> 		<!-- 引入相关样式表 --> 		<link rel="stylesheet" type="text/css" href="bootstrap3/css/bootstrap.min.css"/> 		<link rel="stylesheet" type="text/css" href="bootstrap3/css/bootstrap-theme.min.css"/> 		<link rel="stylesheet" type="text/css" href="bootstrap-table/bootstrap-table.min.css"/> 	</head> 	<body> 		<!-- 工具栏容器 --> 		<div id="toolbar" class="row" style="margin-left: 5px;"> 			<button type="button" class="btn btn-default col-md-4">新增</button> 			<button type="button" class="btn btn-info col-md-4">修改</button> 			<button type="button" class="btn btn-danger col-md-4">删除</button> 		</div> 		<!-- 创建表格容器 --> 		<table id="table"></table> 		<!-- 引入相关js --> 		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script> 		<script src="bootstrap3/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> 		<script src="bootstrap-table/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script> 		<script src="bootstrap-table/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script> 		<script type="text/javascript"> 			//通过bootrap-table插件渲染表格 			$('#table').bootstrapTable({ 			    url: 'json/data.json', 			    columns: [{ 			        field: 'id', 			        title: '序号' 			    }, { 			        field: 'name', 			        title: '姓名' 			    }, { 			        field: 'sal', 			        title: '薪水' 			    }, { 			        field: 'sex', 			        title: '性别' 			    },{ 			        field: 'age', 			        title: '年龄' 			    }], 				toolbar: '#toolbar',              //工具按钮用哪个容器 				striped: true,                      //是否显示行间隔色 				cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) 				pagination: true,                   //是否显示分页(*) 				sortable: true,                     //是否启用排序 				sortOrder: "asc",                   //排序方式 				sidePagination: "client",           //分页方式:client客户端分页,server服务端分页(*) 				pageNumber: 1,                      //初始化加载第一页,默认第一页,并记录 				pageSize: 2,                     //每页的记录行数(*) 				pageList: [2, 5, 10, 20],        //可供选择的每页的行数(*) 				search: true,                      //是否显示表格搜索 				strictSearch: false, 				showColumns: true,                  //是否显示所有的列(选择显示的列) 				showRefresh: true,                  //是否显示刷新按钮 				minimumCountColumns: 2,             //最少允许的列数 				clickToSelect: true,                //是否启用点击选中行 				//height: 500,                      //行高,如果没有设置height属性,表格自动根据记录条数设置表格高度 				uniqueId: "id",                     //每一行的唯一标识,一般为主键列 				showToggle: false,                   //是否显示详细视图和列表视图的切换按钮 				cardView: false,                    //是否显示详细视图 				detailView: false,                  //是否显示父子表 			}); 		</script> 	</body> </html>  

效果如下:

boostrap-table表格插件笔记

6 后端分页

后端接口,我后端是java写的具体分页代码就不上了,这里把接口文档写出来

pageNum:查询的是哪一页 pageSize:每页显示的条数 name:姓名 age:年龄 比如:http://localhost:8080/user/searchPage?name=tom&age=&pageSize=2&pageNum=1 
  • 响应(json)

注意:这里必须是返回{“total”:””,”rows”,[]}这种格式的数据

total是总共的记录数量

rows是当前页查出来的记录对象数组

{   "total": 1,   "rows": [     {       "id": 1,       "name": "tom",       "age": 18,       "gender": "1",       "createTime": "2021-02-22 09:53:24"     }   ] } 

【4.后端分页.html】

<!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8"> 		<title></title> 		<!-- 引入相关样式表 --> 		<link rel="stylesheet" type="text/css" href="bootstrap3/css/bootstrap.min.css"/> 		<link rel="stylesheet" type="text/css" href="bootstrap3/css/bootstrap-theme.min.css"/> 		<link rel="stylesheet" type="text/css" href="bootstrap-table/bootstrap-table.min.css"/> 	</head> 	<body> 		<div class="container"> 			<!-- 工具栏 --> 			<div id="toolbar" class="row" style="margin-left: 5px;"> 				<form class="form-inline"> 					<button type="button" class="btn btn-success">新增</button> 					 <div class="form-group"> 						<label>姓名</label><input type="text" class="form-control" id="nameTxt"/> 					</div> 					<div class="form-group"> 						<label>年龄</label><input type="text" class="form-control" id="ageTxt"/> 					</div> 					<button onclick="search()" type="button" class="btn btn-info">查询</button> 				</form> 			</div> 			<!-- 创建表格容器 --> 			<table id="myTable"></table> 		</div> 		<!-- 引入相关js --> 		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script> 		<script src="bootstrap3/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> 		<script src="bootstrap-table/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script> 		<script src="bootstrap-table/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script> 		<script type="text/javascript"> 			 //封装一个初始化表格的方法 			function initTable(tableId,url,columns,query){ 				//将原有的表格销毁 				$("#"+tableId).bootstrapTable('destroy'); 				//通过bootrap-table插件渲染表格 				var myTable = $('#'+tableId).bootstrapTable({ 					method: 'GET',  //请求方式(*) 					url: url, 					columns: columns, 					toolbar: '#toolbar', //工具按钮用哪个容器 					striped: true, //是否显示行间隔色 					cache: false,//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) 					pagination: true,//是否显示分页(*) 					sortable: false,//是否启用排序 					sortOrder: "asc", //排序方式 					sidePagination: "server", //分页方式:client客户端分页,server服务端分页 					pageNumber: 1, //初始化加载第一页,默认第一页,并记录 					pageSize: 2, //每页的记录行数(*) 					pageList: [2, 5, 10, 20],//可供选择的每页的行数(*) 					search: false,//是否显示表格搜索 					strictSearch: false, 					showColumns: true,//是否显示所有的列(选择显示的列) 					showRefresh: true,//是否显示刷新按钮 					minimumCountColumns: 2,//最少允许的列数 					clickToSelect: true,//是否启用点击选中行 					//height: 500,//行高,如果没有设置height属性,表格自动根据记录条数设置表格高度 					uniqueId: "id",//每一行的唯一标识,一般为主键列 					showToggle: false,//是否显示详细视图和列表视图的切换按钮 					cardView: false,//是否显示详细视图 					detailView: false,//是否显示父子表 					//得到查询的参数 					queryParams : function (params) { 						//这里的键的名字和控制器的变量名必须一致,这边改动,控制器也需要改成一样的 						/* var temp = { 							pageSize: params.limit,                         //页面大小 							pageNum: (params.offset / params.limit) + 1,   //页码 							//sort: params.sort,      //排序列名 							//sortOrder: params.order //排位命令(desc,asc) 							//自定义的参数 							name:params.name, //姓名 							age:params.age //年龄 						}; */ 						if(null == query || undefined == query){ 							query = {}; 						} 						query.pageSize = params.limit; //页面大小 						query.pageNum = (params.offset / params.limit) + 1;  //页码 						console.log(query); 						return query; 					} 				}); 			} 			//初始化列信息 			var columns =  [ 				{ 					field: 'id', 					title: '序号' 				},  				{ 					field: 'name', 					title: '姓名' 				},  				{ 					field: 'gender', 					title: '性别', 					//formatter 为格式化函数,后端返回的性别类型: 1男2女 所以这里要处理一下再显示 					formatter: function(value, row, index){ 						//console.log(value);//当前列数据 						//console.log(row);//当前行json数据 						if(value == 1){ 							return "男"; 						} 						return "女"; 					} 				}, 				{ 					field: 'age', 					title: '年龄' 				}, 				{ 						field: '', 						title: '操作',                     	//如果需要对列处理可以写在formatter函数中 						formatter: function(value,row,index){ 							return '<button onclick="updateFun('+row.id+')" type="button" class="btn btn-warning btn-xs">修改</button>&nbsp;' 								   + '<button onclick="deleteFun('+row.id+')" type="button" class="btn btn-danger btn-xs">删除</button>' 						} 				} 			 ]; 			//点击修改按钮 			function updateFun(data){ 				alert("修改:"+data) 				console.log(data) 			} 			//点击删除按钮 			function deleteFun(data){ 				alert("删除:"+data) 				console.log(data) 			} 			 			//点击查询按钮 			function search(){ 				var name = $("#nameTxt").val(); 				var age = $("#ageTxt").val(); 				var queryParams = {name,age}; initTable("myTable",'http://localhost:8080/user/searchPage',columns,queryParams); 			} 			//第一次进入页面加载表格 		    initTable("myTable",'http://localhost:8080/user/searchPage',columns,null); 		</script> 	</body> </html>  

运行效果如下:

boostrap-table表格插件笔记

参考

Bootstrap-table 使用总结

BOOTSTRAP TABLE表格前台分页,点击TAB选项,重新刷新表格

Bootstrap Table 中文文档(完整翻译版)

赞(0) 打赏
未经允许不得转载:张拓的天空 » boostrap-table表格插件笔记
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏