bootstrap table使用小记

bootstrap table是一个非常不错的，基于bootstrap的插件，它扩展和丰富了bootstrap表格的操作，如格式化表格，表格选择器，表格工具栏，分页等等。

最近基于bootstrap开发一个开台发布系统，就开发过程中，使用bootstap table遇到的一些问题及收获记录如下：

开始使用：

需要在你自己的页面中引入以下样式及脚本：

https://github.com/wenzhixin/bootstrap-table/

一、Bootstrap table 支持超多列，会自动显示水平滚动条。

我们用bootstrap开发，经常会遇到一个头疼的问题，如果客户要求表格中显示的列较多，无论我们用bootstrap的哪种布局方式，显示效果都不尽人意。Bootstap table很好的协处理了这个问题，使我们能够在不改变原有的布局方式的情况下，很好的处理超多列的问题，而且支持自定义显示列名，效果如下： bootstrap table使用小记

使用方式很简单，在一个普通的表格中设置data-toggle="table"，就可以在不写JavaScript的情况下启用Bootstrap Table。当然还可以通过脚本的方式触发：

$('#table').bootstrapTable({
    url: 'data.json'
});。
是不是很好使呢，只在我们指定的表格中会带入Bootstrap Table的样式，其它未指定的，不会受影响。

二、结合Bootstrap Modal作弹出表格子页面，并获取当前选中的数据后更新到父页面中：

bootstrap table使用小记

功能说明：

用户点父页面中的某一输入框，系统会弹出一个查询界面，供用户检索选择相关的数据。

页面布局思路：

首先创建一个Modal分部视图：

 1 <!-- Modal -->
 2 <div class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel" id="gridSystemModal">
 3   <div class="modal-dialog" role="document">
 4     <div class="modal-content">
 5       <div class="modal-header">
 6         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 7         <h4 class="modal-title" id="gridSystemModalLabel">xxxx查询</h4>
 8       </div>
 9       <div class="modal-body">
10           <div class="container-fluid" id="fjShipChkList">
11               @Html.Partial("Modal/FjShipChkList")
12           </div>
13       </div>
14       <div class="modal-footer">
15         <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
16         <button type="button" class="btn btn-primary">选择</button>
17       </div>
18     </div><!-- /.modal-content -->
19   </div><!-- /.modal-dialog -->
20 </div><!-- /.modal -->

Modal分布视图：CustomModal