之前一直在调研我们的管理后台使用的表格控件，查询到 : http://bootstrap-table.wenzhixin.net.cn的bootstrap table 感觉挺不错，但是由于官方的文档不是怎么的完善，导致自己的网络数据请求一直没有通过。
今天终于调试通过，在这里与大家分享一下。
一、相关的配置文件引入
注意!!!!! 这里的 tableExport.js并不是 bootcdn上的tableExport，使用的时候注意看作者，不到会导致无法导出excel
二、编写表头和工具栏
其实整个表头的编写非常简单，只需要简单的几个配置就好。
注意，把每一个bean的属性书写在th中
注意绑定工具栏
可以参考如下配置
| 产品Id | 产品名称 | 产品类别 | 资本类型 | 发行机构 | 基金公司 | 管理机构 | 角标 | 上线时间 | 下线时间 | 发布状态 | 募集状态 | 打分 | 担保 | 投资 | 发行 | 还款 | 融资 | 操作 |
|---|
三、绑定后端逻辑
深蓝企业网站管理系统1
下载
本程序版权归作者所有不得利用本程序从事任何非法活动！本程序功能有限只能满足基础型企业网站的建站需求，无法满足更搞要求的企业站，也无法利用本程序制作门户网站，更不能建站购物站。为了克服以上技术局限，我们开发了“新坐标CMS-超级云端网站管理系统”，可以满足任何要求的企业网站，也可以制作购物网站，同时还可以制作门户型网站。其标签式调用方法让您随心所欲调用想要的结果。 使用说明：根目录包含netbox无
因为，Bootstrap Table默认是使用了form表单的方式提交，其分页参数与查询参数都与我们的后端逻辑协议不一致。(官方就缺少这一部分的文档)
所以，我们需要更具其协议做一个自定义的配置。
$(function() {
$("#demo").bootstrapTable({
url: "http://ydjr.dev.chengyiwm.com/goldman-mgr/listProduct",
sortName: "prodId", //排序列
striped: true, //條紋行
sidePagination: "server", //服务器分页
clickToSelect: true, //选择行即选择checkbox
singleSelect: true, //仅允许单选
searchOnEnterKey: true, //ENTER键搜索
pagination: true, //启用分页
escape: true, //过滤危险字符
queryParams: getParams, //携带参数
method: "post", //请求格式
responseHandler: responseHandler,
});
});
/**
* 默认加载时携带参数
*
* 将自带的param参数转化到cy的请求逻辑协议
*/
function getParams(params) {
var query = $("#searchKey").val();
console.log(JSON.stringify(params));
return {
head: {
userId: "11154",
skey: "6FC19FCE5D8DCF130954D8AE2CADB30A",
platform: "pc",
imei: "",
appVersion: "",
cityId: "",
platformVersion: "",
deviceId: "",
channel: "",
protoVersion: 1,
isPreview: 2
},
body: {
'query': params.search, // 搜索参数
'start': params.offset, // 分页开始位置
'pageSize': params.limit, //每页多少条
}
}
}
/**
* 获取返回的数据的时候做相应处理，让bootstrap table认识我们的返回格式
* @param {Object} res
*/
function responseHandler(res) {
return {
"rows": res.body.listProduct, // 具体每一个bean的列表
"total": res.body.totalCount // 总共有多少条返回数据
}
}Ok配置完成后给大家看看我们的显示效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。
更多Bootstrap Table使用心得总结相关文章请关注PHP中文网！
