Bootstrap:Table数据映射
1、Bootstrap:Table 简介基于 Bootstrap 的 jQuery 开源表格插件,拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等的功能使用详情:http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/API文档:http://bootstrap-table.wenzhixin.net.cn/...
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:服务端接口
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)