学习bootstrap table

bootstrap table下载：https://github.com/wenzhixin/bootstrap-table/archive/master.zip
bootstrap table文档：https://bootstrap-table-docs3.wenzhixin.net.cn/zh-cn/documentation/

1. 引用包：

<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />

2. 加入一个表格

<table id="ArbetTable"></table>

3. 初始化

		$(function() {
			//1.初始化Table
			var oTable = new TableInit();
			oTable.Init();
		});
				function DoOnMsoNumberFormat(cell, row, col) {
		    var result = "";
		    if (row > 0 && col == 0)
		        result = "\\@";
		    return result;
		}
		
		var TableInit = function() {
			
			var oTableInit = new Object();
			//初始化Table
			oTableInit.Init = function() {
				$('#ArbetTable').bootstrapTable({
					url: './goodSType/getGoodTypes', //请求后台的URL（*）
					method: 'get', //请求方式（*）
					toolbar: '#toolbar', //工具按钮用哪个容器
					striped: true, //是否显示行间隔色
					cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
					pagination: true, //是否显示分页（*）
					paginationShowPageGo: true, //是否启用跳转到指定页
					sortable: true, //是否启用排序
					sortOrder: "asc", //排序方式
					/* queryParams: oTableInit.queryParams, //传递参数（*） */
					sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
					pageNumber: 1, //初始化加载第一页，默认第一页
					pageSize: 5, //每页的记录行数（*）
					pageList: "[10, 25, 50, 100, All]", //可供选择的每页的行数（*）
					/* search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大 */
					contentType: "application/x-www-form-urlencoded",
					/* strictSearch: true, */
					showColumns: true, //是否显示所有的列
					showRefresh: true, //是否显示刷新按钮
					minimumCountColumns: 2, //最少允许的列数
					clickToSelect: false, //是否启用点击选中行
					//height: 700, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
					uniqueId: "no", //每一行的唯一标识，一般为主键列
					showToggle: true, //是否显示详细视图和列表视图的切换按钮
					cardView: false, //是否显示详细视图
					detailView: false, //是否显示父子表
			        showExport: true,  //是否显示导出按钮
			        buttonsAlign:"right",  //按钮位置
			        exportTypes:['excel','png','pdf'],  //导出文件类型
			        Icons:'glyphicon-export',
			        exportOptions:{
			            ignoreColumn: [0,"operate"],  //忽略某一列的索引
			            fileName: '货物类别表',  //文件名称设置
			            worksheetName: 'sheet1',  //表格工作区名称
			            tableName: '货物类别表',
			            excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
			            onMsoNumberFormat: DoOnMsoNumberFormat
			        },columns: [{
							title : "",
							align : "center",
							valign : "middle",
							checkbox : true,
							width:50,
							clickToSelect : true
						}, {
							field: 'id',
							title: 'ID',
							sortable: true,
						}, {
							field: 'typename',
							title: '类别名称'
						}, {
							field: 'gtyperemarks',
							title: '类别内容'
						},
						{
							field: 'operate',
							title: '操作',
							formatter: operateFormatter //自定义方法，添加操作按钮
						},
					],
					rowStyle: function(row, index) {
						var classesArr = ['success', 'info'];
						var strclass = "";
						if(index % 2 === 0) { //偶数行
							strclass = classesArr[0];
						} else { //奇数行
							strclass = classesArr[1];
						}
						return {
							classes: strclass
						};
					}, //隔行变色
				});

			};

			/* //得到查询的参数
			oTableInit.queryParams = function(params) {
				var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
					limit: params.limit, //页面大小
					offset: params.offset + 1
				};
				return temp;
			}; */ 
			return oTableInit;
		};

		function operateFormatter(value, row, index) { //赋予的参数
			return [
				'<a class="btn active disabled" href="#">编辑</a>',
				'<a class="btn active" href="#">档案</a>',
				'<a class="btn btn-default" href="#">记录</a>',
				'<a class="btn active" href="#">准入</a>'
			].join('');
		}

4. 后台

	@RequestMapping(value="/getGoodTypes",method=RequestMethod.GET)
	@ResponseBody
	public Map<String, Object> getGoodTypes(
			@RequestParam(value="pageSize",required=false,defaultValue="5")int pageSize, 
			@RequestParam(value="pageNumber",required=false,defaultValue="1")int pageNumber, 
			String sortName, String sortOrder) {
		PageHelper.startPage(pageNumber, pageSize);		//分页
		List<TGoodstype> list = goodSTypeServer.queryAllGoodType();
		PageInfo<TGoodstype> pageInfo = new PageInfo<>(list);
		List<TGoodstype> rows = pageInfo.getList();
		int total = (int) pageInfo.getTotal();
		Map<String, Object> results = new HashMap<>();
		results.put("rows", rows); // "rows"为前端bootstrap table默认接收字段名，后端名称修改要和前端responseHandler()函数一致
		results.put("total", total); // "total"为前端bootstrap table默认接收字段名，后端名称修改要和前端responseHandler()函数一致
		return results;
	}