关键词：
之前一直在调研我们的管理后台使用的表格控件，查询到 : 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表单的方式提交，其分页参数与查询参数都与我们的后端逻辑协议不一致。(官方就缺少这一部分的文档Fuck!!!!!)
所以，我们需要更具其协议做一个自定义的配置。
$(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配置完成后给大家看看我们的显示效果
bootstraptable使用总结
使用bootstraptable可以很方便的开发后台表格，对数据进行异步更新，编辑。下面就来介绍一下bootstraptable的详细使用方法：因为之前在官网也找了很久的教程，源码感觉隐藏的比较隐秘，其他扩展功能也很难找到，其实都在：http:... 查看详情
bootstraptable的一些简单使用总结
在GitHub上Bootstrap-table的源码地址是：https://github.com/wenzhixin/bootstrap-tableBootstrap-table的文档地址：http://bootstrap-table.wenzhixin.net.cn/Bootstrap-table的各种样例：https://github.com/wenzhixin/bootstrap-table 查看详情
bootstraptable的使用总结(代码片段)
...ples.bootstrap-table.com/#动态表头(function(document,window,$)//ExampleBootstrapTableLargeColumns//-------------------------------------buildTable($('#exampleTableLargeColumns'),50,50);functionbuildTable($el,cells,rows)vari,j,row,columns=[],data=[];for(i=0;i<cells;i+&#... 查看详情
bootstraptable使用总结之前端样式设计(代码片段)
...按钮。在实现的时候也是找了很多的资料，后头在参考了bootstraptable怎么实现自定义按钮列的操作的时候，发现了可以return一个HTML代码块到相应的table里面，就参照这个思路实现了我的想法。一：设定bootstrap样式知识点1的参考代... 查看详情
bootstraptable的使用小结
...一下，毕竟有些时候没有使用到这个方式很有用，在使用bootstraptable的时候，选择当前已经选择的节点的事件中的ID的值 当前rows中有很多的数据，但是我只需要id这一个值，这个时候进行操作就非常的简单了。$.map(data,function(... 查看详情
bootstraptable的使用小结
...一下，毕竟有些时候没有使用到这个方式很有用，在使用bootstraptable的时候，选择当前已经选择的节点的事件中的ID的值 当前rows中有很多的数据，但是我只需要id这一个值，这个时候进行操作就非常的简单了。$.map(data,function(... 查看详情
highcharts使用心得
HighCharts使用心得前言：之前非常早的一个项目中使用过highcharts，感觉挺方便的。图表类型也比較丰富，并且还支持数据的下钻，可是假设投入商业使用的话还会有一些版权的问题，所以后来就使用了EChart，这是百度开发的一个... 查看详情
highcharts使用心得
前言：之前非常早的一个项目中使用过highcharts。感觉挺方便的，图表类型也比較丰富。并且还支持数据的下钻，可是假设投入商业使用的话还会有一些版权的问题，所以后来就使用了EChart。这是百度开发的一个开源的图表插件... 查看详情
c语言关键字registerexternstatic一些总结，及项目中使用的心得
...期。静态变量，从变量产生到整个程序执行结束。当函数使用变量结束后，变量的存储空间依然存在，变量的值也会随着函数的对其的使用而改变。如在函数内定义了一个static变量，那第一次调用该函数后，该变量的值将会被保... 查看详情
android颜色（不）透明度的使用及项目开发中的心得总结(代码片段)
文章目录背景1.Android中颜色简介2.不透明度3.使用方法3.1第一种使用方法3.2第二种使用方法3.3.第三种使用方法4.小结背景总结一下平时工作开发中，如何对UI设计稿上的颜色（不）透明度的使用心得及注意事项。1.Android... 查看详情
android颜色（不）透明度的使用及项目开发中的心得总结(代码片段)
文章目录背景1.Android中颜色简介2.不透明度3.使用方法3.1第一种使用方法3.2第二种使用方法3.3.第三种使用方法4.小结背景总结一下平时工作开发中，如何对UI设计稿上的颜色（不）透明度的使用心得及注意事项。1.Android... 查看详情
java基础面向对象，心得总结《三》(代码片段)
...0c;它会在类实例化对象时被自动调用。而普通方法只有在使用的时候才会被调用。在定义构造方法时要求方法名与类名相同、在方法名的前面没有返回值类型的声明、在方法中不能使用return语句返回一个值。2.单例设计模式具备... 查看详情
bootstraptable如何使用
最近在使用bootStrapTable的表格功能有一些自己的理解写下来分享一下主要用的是一个bootStrapTable和jquery的混合开发具体怎样引入bootStrapTable我就不一一详解了直接上代码htm代码<tableid="table0"></table>js代码var$table=$(‘#table0‘)... 查看详情
bootstraptable使用小记
varTableInit=function(){varoTableInit=newObject();//初始化TableoTableInit.Init=function(){$(‘#tb_rolelist‘).bootstrapTable({url:‘/Role/GetList‘,//请求后台的URL（*）method:‘get‘,//请求方式（*）toolbar:‘#toolbar‘,//工具按 查看详情
bootstraptable使用实例
一、bootstrapTable简单使用：<linkrel="stylesheet"href="./static/libs/bootstrap/css/bootstrap.css"><linkrel="stylesheet"href="./static/libs/bootstrap-table-master/bootstrap-table.css"><scriptsr 查看详情
bootstraptable使用实例
一、bootstrapTable简单使用：<linkrel="stylesheet"href="./static/libs/bootstrap/css/bootstrap.css"><linkrel="stylesheet"href="./static/libs/bootstrap-table-master/bootstrap-table.css"><scriptsr 查看详情
nodejs爬虫抓取古代典籍，共计16000个页面心得体会总结及项目分享
...应程序了的流程。为了方便，在对数据遍历的过程中直接使用了著名的async这个库，所以不可避免的还是用到了回调promise，因为数据的处理发生在回调函数中，不可避免的会遇到一些数据传递的问题，其实也可以直接用ES7的asynca... 查看详情
bootstraptable的使用
前言：BootstrapTable基于Bootstrap，Bootstrap基于jquery，所以需要引入jquery后再引入bootstrap。<linkhref="${ctx}/assets/plugins/bootstrap/css/bootstrap.min.css"rel="stylesheet"><linkrel="stylesheet"href="${ctx}/as 查看详情