Bootstrap Table使用方法解析

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

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

开始使用:

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

<link href="https://www.jb51.net/bootstrap.min.css"> <link href="https://www.jb51.net/bootstrap-table.css"> <script src="https://www.jb51.net/jquery.min.js"></script> <script src="https://www.jb51.net/bootstrap.min.js"></script> <script src="https://www.jb51.net/bootstrap-table.js"></script>

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分部视图:

<!-- Modal --> <div role="dialog" aria-labelledby="gridSystemModalLabel"> <div role="document"> <div> <div> <button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4>xxxx查询</h4> </div> <div> <div> @Html.Partial("Modal/FjShipChkList") </div> </div> <div> <button type="button" data-dismiss="modal">关闭</button> <button type="button">选择</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->

以及我们要显示业务数据的列表分部视图,并被Modal分部视图调用:

<div> <div> <div> <div> <div> <input type="text" placeholder="航次" value="" /> <span> <button type="button">搜索</button> </span> </div> </div> </div> </div> </div> <table data-toggle="table" data-url="data1.json" data-height="299" data-click-to-select="true" data-select-item-name="radioName"> <thead> <tr> <th data-field="state" data-radio="true"></th> <th aria-column="SHIP_NM">船名</th> <th aria-column="SHIP_NM_EN">英文船名</th> <th aria-column="VOY_ID">航次</th> <th aria-column="DOCK_BTH_NM">停靠泊位</th> <th aria-column="ARR_DT">到港时间</th> </tr> </thead> <tbody> @if (Model.GetType() != typeof (QUARANTINE_HANDLE_RESULT)) { int i = 0; foreach (VOYAGE_DYNM item in Model.PageList) { <tr> <td><input data-index="@(i++)" type="radio"></td> <td> @Html.DisplayFor(it => item.SHIP_NM) </td> <td> @Html.DisplayFor(it => item.SHIP_NM_EN) </td> <td> @Html.DisplayFor(it => item.VOY_ID) </td> <td> @Html.DisplayFor(it => item.DOCK_BTH_NM) </td> <td> @Html.DisplayFor(it => item.ARR_DT) </td> </tr> } } </tbody> </table>  

在父页面中调用Modal分部视图:

@Html.Partial("Modal/CustomModal")

引入Modal分部视图的位置最好是与父页面中的顶层元素为兄弟节点,避免Modal调用失败。

需要在启动Modal 弹出层的元素上加上:data-toggle="modal" data-target="#gridSystemModal"就可以启动Modal了。点探索时,用ajax从后台取数据,并返回一个分部视图,返回成功后直接替换原有的业务数据分部视图。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzdfpg.html