BootstrapTable使用总结

BootstrapTable使用总结

遇见的问题

1、 直接使用BootStrapTable会存在跨域问题，可以结合Ajax一起使用。
2、 自定义结果集和返回参数，如offset、limit等。

代码

1、点击响应事件

$('#get_recommend_school_list').click(function(data){
		let province = $("#province_name option:selected").text();
		let subject = $("#subject_name option:selected").text();
		let score = $("#score").val();
		if(subject == "--学科--"){
			alert("学科为必选项，请重新选择");
		}else if(score < 0){
			alert("分数不能小于等于0，请重新选择");
		}else{
			score = (score == "") ? 0 : score;
			province = (province == "--省份--") ? "" : province;
			//初始化表格
			var $table;
			//这里传入可选参数
			InitRecommendTable(province,subject,score);
		}
	})

2、初始化BootstrapTable，跨域语句(xhrFields:{withCredentials:true})

//初始化bootstrap-table的内容
function InitRecommendTable (province,subject,score) {
	//在初始化之前应该对之前的Table进行销毁，否则会产生Table只能点击一次的问题
	$('#recommend_school_table').bootstrapTable('destroy');
	$table = $('#recommend_school_table').bootstrapTable({
		ajax : function(request){
			console.log(request);
			$.ajax({
				url:"http://localhost:8080/school/getRecommendSchoolList",
				contentType:"application/x-www-form-urlencoded",
				type:"POST",
				data:{"offset":request.data.offset,"limit":request.data.limit,"province":province,"subject":subject,"score":score},
				xhrFields:{withCredentials:true},
				success : function(res){
					request.success({
						rows : res.rows,
						total: res.total,
					});
					$('#recommend_school_table').bootstrapTable('load',res);
				},
				error:function(){
					alert("错误");
				}
			});
		},
			//toolbar: '#toolbar',              //工具按钮用哪个容器
			striped: true,                      //是否显示行间隔色
			cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
			pagination: true,                   //是否显示分页（*）
			sortable: true,                     //是否启用排序
			sortOrder: "asc",                   //排序方式
			sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
			pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
			pageSize: 10,                     //每页的记录行数（*）
			pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
			search: false,                      //是否显示表格搜索
			strictSearch: true,
			showColumns: true,                  //是否显示所有的列（选择显示的列）
			showRefresh: true,                  //是否显示刷新按钮
			minimumCountColumns: 2,             //最少允许的列数
			clickToSelect: true,                //是否启用点击选中行
			//height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
			uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
			showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
			cardView: false,                    //是否显示详细视图
			detailView: false,                  //是否显示父子表
			//得到查询的参数
			columns: [ {
				field: 'province',
				title: '省份',
				sortable: true
			}, {
				field: 'schoolName',
				title: '学校名称',
				sortable: true
			}, {
				field: 'collegeName',
				title: '学院名称',
				sortable: true
			}, {
				field: 'subjectName',
				title: '学科名称',
				sortable: true
			}, {
				field: 'totalScore',
				title: '预估分数',
				sortable: true
			}, {
				field: 'examSubjects',
				title: '考试科目'
			}, {
				field: 'detail',
				title: '详情'
			} ],
	});
};

总结

1、起始，应根据相关参数对Table进行初始化，而给后端传递的参数包括自定义的参数和{offset，limit}，这两个参数首先默认page为1，limit指的是默认页面的显示条数，可通过pageSize参数设置；offset=(page-1)*limit。具体请参照MySQL中的LIMIT用法。而offset、limit可以通过request参数得到，可以自行打印，如下:

2、将字段定义为a标签，可进行如下处理:

1. 首先添加formatter属性

 			{
				field: 'major',
				title: '专业',
				width: 100,
				align: 'center',
				formatter:aFormatter //添加超链接的方法
			}

2. 自定义aFormatter方法:

function aFormatter(value,row,index){
	
	return[
		'<a href="'+row.majorUrl+'" target="_blank" style = "text-decoration: underline ; color :blue;">'+value+'</a>'
	].join("")
};

3、传递参数给后端后，后端需要返回结果集，结果集的格式为json格式，包含两个参数：total和rows，total指查询的总条数，rows是查询结果。
4、注意columns中的field字段名和后端返回结果的字段名相对应。