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 相关文章推荐
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
jquery自定义属性(类型/属性值)
May 21 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
一个不错的仿携程自定义数据下拉选择select
Sep 01 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
深入理解angularjs过滤器
May 25 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
ES7中利用Await减少回调嵌套的方法详解
Nov 01 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 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
php下把数组保存为文件格式的实例应用
2010/02/08 PHP
使用php记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
element ui table(表格)实现点击一行展开功能
2018/12/04 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
浅谈Python NLP入门教程
2017/12/25 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
Python:__eq__和__str__函数的使用示例
2020/09/26 Python
Python用Jira库来操作Jira
2020/12/28 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
类如何去实现接口
2013/12/19 面试题
《母亲的恩情》教学反思
2014/02/13 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
关于诚信的活动方案
2014/08/18 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
党的群众路线教育实践活动对照检查材料思想汇报
2014/09/19 职场文书
赔偿协议书
2015/01/27 职场文书
工程项目合作意向书
2015/05/08 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书