1、Bootstrap:Table 简介

基于 Bootstrap 的 jQuery 开源表格插件,拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等的功能
使用详情:http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/
API文档:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

2、Bootstrap:Table 初始化
$('#' + tableId).bootstrapTable({
contentType: "application/x-www-form-urlencoded",
url: this.url,				//请求地址
method: this.method,		//ajax方式,post还是get
ajaxOptions: {				//ajax请求的附带参数
data: this.data
},
toolbar: "#" + this.toolbarId,//顶部工具条
striped: true,     			//是否显示行间隔色
cache: false,      			//是否使用缓存,默认为true
pagination: true,     		//是否显示分页(*)
sortable: true,      		//是否启用排序
sortOrder: "desc",     		//排序方式
dataField: 'list',      //获取数据字段为list
pageNumber: 1,      			//初始化加载第一页,默认第一页
limit:15,                            //每页的记录行数(*)
offset:1,                          //初始化加载第一页,默认第一页
pageSize: 15,      			//每页的记录行数(*)
pageList: [15, 50, 100],  	//可供选择的每页的行数(*)
queryParamsType: 'limit', 	//默认值为 'limit' ,在默认情况下 传给服务端的参数为:offset,limit,sort
responseHandler: function (res) {//这里我查看源码的,在ajax请求成功后,发放数据之前可以对返回的数据进行处理
,返回什么部分的数据,比如我的就需要进行整改的!
return res.result;
},
queryParams: function (param) {
var pageInfo = {
    limit: param.limit,   //页面大小
    offset: param.offset
};
return $.extend(me.queryParams, pageInfo);
}, // 向后台传递的自定义参数
sidePagination: this.paginationType,   //分页方式:client客户端分页,server服务端分页(*)
search: false,      		//是否显示表格搜索,此搜索是客户端搜索,不会进服务端
strictSearch: true,			//设置为 true启用 全匹配搜索,否则为模糊搜索
showColumns: true,     		//是否显示所有的列
showRefresh: true,     		//是否显示刷新按钮
minimumCountColumns: 2,    	//最少允许的列数
clickToSelect: true,    	//是否启用点击选中行
searchOnEnterKey: true,		//设置为 true时,按回车触发搜索方法,否则自动触发搜索方法
columns: this.columns,		//列数组
pagination: true,			//是否显示分页条
height: this.height,
icons: {
refresh: 'glyphicon-repeat',
toggle: 'glyphicon-list-alt',
columns: 'glyphicon-list'
},
iconSize: 'outline'
});
i Table::contentType

Remark:发起POST请求,因bootstap table使用的是ajax方式获取数,content type默认text/plain,
服务端直接通过 @RequestParam参数映射是获取不到的。顾contentType要设置成表单形式.

contentType: "application/x-www-form-urlencoded"
ii Table::自定义数据格式

在这里插入图片描述
Remark:table 默认的数据格式 Json Object ,接收的数据列表 dataField 默认是rows。
The Solution:通过重写responseHandler和dataField 实现对应的数据映射。

responseHandler: function (res) {//这里我查看源码的,在ajax请求成功后,发放数据之前可以对返回的数据进行处理
,返回什么部分的数据,比如我的就需要进行整改的!
return res.result;
},
dataField: 'list',      //获取数据字段为list

在这里插入图片描述

iii Table::queryParamsType

queryParamsType:“list” 传给服务端的参数为:offset,limit,sort,记得添加这两个属性在初始化列表中。

limit:15,                            //每页的记录行数(*)
offset:1,                          //初始化加载第一页,默认第一页

queryParamsType:"" 传给服务端的参数为pageNumber和pageSize

3、Bootstrap:服务端接口

在这里插入图片描述

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐