Bootstrap Table使用心得总结

发布时间：2020-12-18 00:47:02 所属栏目：安全来源：网络整理

导读：之前一直在调研我们的管理后台使用的表格控件，查询到 : 的Bootstrap Table 感觉挺不错，但是由于官方的文档不是怎么的完善，导致自己的网络数据请求一直没有通过。今天终于调试通过，在这里与大家分享一下。一、相关的配置文件引入 link href="//cdn.boot

三、绑定后端逻辑

因为，Bootstrap Table默认是使用了form表单的方式提交，其分页参数与查询参数都与我们的后端逻辑协议不一致。(官方就缺少这一部分的文档)

所以，我们需要更具其协议做一个自定义的配置。

});

/**

默认加载时携带参数
将自带的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配置完成后给大家看看我们的显示效果：

如果大家还想深入学习，可以点击进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

																	</tr>
之前一直在调研我们的管理后台使用的表格控件，查询到 : 的Bootstrap Table 感觉挺不错，但是由于官方的文档不是怎么的完善，导致自己的网络数据请求一直没有通过。今天终于调试通过，在这里与大家分享一下。一、相关的配置文件引入 <link href="//cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table.min.css" rel="stylesheet"> <script src="//cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table.min.js"> <script src="//cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table-locale-all.js"> <script src="//cdn.bootcss.com/bootstrap-table/1.11.0/extensions/export/bootstrap-table-export.min.js"> <script src="https://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"> <script src="//cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"> 注意!!!!! 这里的 tableExport.js并不是 bootcdn上的tableExport，使用的时候注意看作者，不到会导致无法导出excel 二、编写表头和工具栏其实整个表头的编写非常简单，只需要简单的几个配置就好。注意，把每一个bean的属性书写在th中注意绑定工具栏可以参考如下配置 <table id="demo" class="table table-striped table-hover table-bordered" data-toolbar="#toolbar" // 这里必须绑定工具栏，不然布局会错乱 data-search="true" data-show-refresh="true" data-show-columns="true" data-show-export="true" data-export-types="['excel']" data-export-options='{ // 导出的文件名 "fileName": "products","worksheetName": "products" }'

之前一直在调研我们的管理后台使用的表格控件，查询到 : 的Bootstrap Table 感觉挺不错，但是由于官方的文档不是怎么的完善，导致自己的网络数据请求一直没有通过。

今天终于调试通过，在这里与大家分享一下。

一、相关的配置文件引入

注意!!!!! 这里的 tableExport.js并不是 bootcdn上的tableExport，使用的时候注意看作者，不到会导致无法导出excel

二、编写表头和工具栏

其实整个表头的编写非常简单，只需要简单的几个配置就好。

注意，把每一个bean的属性书写在th中注意绑定工具栏

可以参考如下配置

<table id="demo" class="table table-striped table-hover table-bordered"
data-toolbar="#toolbar" // 这里必须绑定工具栏，不然布局会错乱
data-search="true"
data-show-refresh="true"
data-show-columns="true"
data-show-export="true"
data-export-types="['excel']"
data-export-options='{ // 导出的文件名
"fileName": "products","worksheetName": "products"
}'

</tr>