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 相关文章推荐
js获取变量
Aug 24 Javascript
优秀js开源框架-jQuery使用手册(1)
Mar 10 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
Jan 15 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
JavaScript日期选择功能示例
Jan 16 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
Feb 08 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
Vue.js进行查询操作的实例详解
Aug 25 Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 Javascript
详解Axios统一错误处理与后置
Sep 26 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+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
php数组删除元素示例
2014/03/21 PHP
PHP 正则表达式常用函数
2014/08/17 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
Vue看了就会的8个小技巧
2021/01/21 Vue.js
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
Python随机生成数模块random使用实例
2015/04/13 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
Django框架模板的使用方法示例
2019/05/25 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
澳大利亚便宜隐形眼镜购买网站:QUICKLENS Australia
2018/10/06 全球购物
美国主要的特色咖啡和茶公司:Peet’s Coffee
2020/02/14 全球购物
2014年最新学习全国两会精神心得
2014/03/17 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
文明倡议书
2015/01/19 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
学术研讨会主持词
2015/07/04 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书