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 //添加超链接的方法
			}
  1. 自定义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字段名和后端返回结果的字段名相对应。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值