Bootstrap Table使用心得总结


Posted in Javascript onNovember 29, 2016

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

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

一、相关的配置文件引入

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- 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>
<script src="//cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table-locale-all.js"></script>
<script src="//cdn.bootcss.com/bootstrap-table/1.11.0/extensions/export/bootstrap-table-export.min.js"></script>
<!-- bootstrap table 包含excel导出,pdf导出 -->
<script src="https://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
<script src="//cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script>

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

二、编写表头和工具栏

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

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

可以参考如下配置

<!-- 工具栏的按钮,可以自定义事件 -->
<div id="toolbar" class="btn-group">
 <button type="button" class="btn btn-default">
 <i class="glyphicon glyphicon-plus"></i>
 </button>
 <button type="button" class="btn btn-default">
 <i class="glyphicon glyphicon-heart"></i>
 </button>
 <button type="button" class="btn btn-default">
 <i class="glyphicon glyphicon-trash"></i>
 </button>
</div>


<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"
 }'
 >
 <thead>
 <tr>
  <th width="3%" data-field="prodId">产品Id</th>
  <th width="10%" data-field="nameOfProduct">产品名称</th>
  <th width="4%" data-field="categoryId">产品类别</th>
  <th width="5%" data-field="domicileOfCapital">资本类型</th>
  <th width="8%" data-field="underwriter">发行机构</th>
  <th width="6%" data-field="managementInstitution">基金公司</th>
  <th width="5%" data-field="managementInstitution2">管理机构</th>
  <th width="3%" data-field="flag">角标</th>
  <th width="7%" data-field="beginTime">上线时间</th>
  <th width="7%" data-field="endTime">下线时间</th>
  <th width="4%" data-field="status">发布状态</th>
  <th width="4%" data-field="fundRaisingStatus">募集状态</th>
  <th width="3%" data-field="totalScore">打分</th>
  <th width="3%" data-field="modesOfGuaranteeScore">担保</th>
  <th width="3%" data-field="invsetmentTargetScore">投资</th>
  <th width="3%" data-field="underwriterScore">发行</th>
  <th width="3%" data-field="sourceOfPaymentScore">还款</th>
  <th width="3%" data-field="issuerDescriptionScore">融资</th>
  <th width="10%">操作</th>

 </tr>
 </thead>
</table>

三、绑定后端逻辑

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

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

$(function() {
 $("#demo").bootstrapTable({
 url: "http://ydjr.dev.chengyiwm.com/goldman-mgr/listProduct",
 sortName: "prodId", //排序列 
 striped: true, //?l?行 
 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配置完成后给大家看看我们的显示效果:

Bootstrap Table使用心得总结

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中巧用“闭包”实现程序的暂停执行功能
Apr 04 Javascript
js loading加载效果实现代码
Nov 24 Javascript
onsubmit阻止form表单提交与onclick的相关操作
Sep 03 Javascript
SinaEditor使用方法详解
Dec 28 Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
Mar 28 Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
Jan 12 Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
在vue中使用console.log无效的解决
Aug 09 Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 #Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 #Javascript
jQuery序列化表单成对象的简单实现
Nov 29 #Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 #Javascript
JS访问DOM节点方法详解
Nov 29 #Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 #Javascript
浅谈js函数的多种定义方法与区别
Nov 29 #Javascript
You might like
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
浅析php变量作用域的一些问题
2013/08/08 PHP
限制文本字节数js代码
2007/03/06 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
2015/03/21 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
通过vue写一个瀑布流插件代码实例
2019/09/07 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
python如何修改文件时间属性
2021/02/05 Python
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
经典的班主任推荐信
2013/10/28 职场文书
后勤工作职责
2013/12/22 职场文书
家电业务员岗位职责
2014/03/10 职场文书
现场施工员岗位职责
2014/03/10 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
户籍证明模板
2014/09/28 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
刑事附带民事代理词
2015/05/25 职场文书
中秋节感想
2015/08/10 职场文书