引导表使用分析

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

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

开始吧：

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

link rel='样式表' href=' bootstrap . min . CSS ' link rel='样式表' href=' bootstrap-table . CSS ' script src=' http : jquery . min . js '/script script src=' http : bootstrap . min . js '/script script src=' http : bootstrap-table . js '/script 3359 github.com/wenzhixin/bootstrap-table/

1.引导表支持多列并自动显示水平滚动条。

我们用bootstrap开发的时候，经常会遇到头疼的问题。如果客户要求表中显示更多的列，无论我们使用哪种bootstrap布局，显示效果都不尽如人意。Bootstap table很好地协同处理了这个问题，这样我们就可以在不改变原有布局模式的情况下处理过多列的问题，并且支持列名的自定义显示。效果如下：

用法很简单。在普通表中设置data-toggle='table '，就可以在不写JavaScript的情况下启用Bootstrap Table。当然，也可以由脚本触发：

$('#table ')。bootstrapTable({ URL : ' data . JSON ' })；不是很好吗？只有引导表样式会被带入我们指定的表中，其他未指定的表不会受到影响。

第二，将Bootstrap Modal合并为一个弹出表单子页面，获取当前选中的数据并更新到父页面：

功能描述：

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

页面布局思路：

首先，创建一个模态局部视图：

！- Modal - div class='modal fade '角色=' dialog ' aria-labelledby=' gridSystemModalLabel ' id=' gridSystemModal ' div class=' Modal-dialog '角色=' document ' di v class=' Modal-content ' div class=' Modal-header '按钮类型=' button ' class=' Close ' data-dispose=' Modal ' aria-label=' Close ' Span aria-hidden=' true '/Span/button H4 class=' Modal-title ' id=' gridSystemModalLabel 'partial(' Modal/FjShipChkList ')/Div/Div class=' Modal-footer ' button type=' button ' class=' btnbtn-default ' data-mission=' Modal ' close/button button type=' button ' class=' btnbtn-primary ' select/button/Div/Div！- /.模态-内容- /div！- /.模态对话框/div！- /.模式-以及我们想要显示的业务数据的列表部分视图，它由模式部分视图调用：

div class=' row table-toolbar ' div class=' col-MD-12 ' div class=' pull-right form-inline ' div class=' form-group ' div class=' input-group input-medium ' input type=' text ' class=' form-control input-search ' placeholder='航次id=' fjShipChkList-keyword ' name=' keyword ' value=' '/span class=' input-group-BTN ' button class=' BTN BTN-成功BTN-search ' type=' button ' id=“模态搜索”搜索/button/span/div/div/div table class=' table table-stripped table-bordered table-hover js-table ' data-toggle=' table ' data-URL=' data 1。 JSON ' data-height=' 299 ' data-click-to-select=' true ' data-select-item-name=' radio name ' id=' table-ShipChk '第d个tr数据-field=' state ' data-radio=' true '/th class=' sorting ' aria-column=' SHIP _ NM船名/th='排序' aria-column=' SHIP _ NM _ EN '英文船名/th='排序' aria-column=' VOY _ ID '航次/th class=“排序”aria-column=' BTH码头'停靠泊位/th class=' sorting ' aria-column=' ARR _ DT '到港时间/th/tr/the和t body id=' body-fjShipChkList ' @ if(Model . GetType()！=typeof(检疫_句柄_结果)){ int I=0；foreach(模型中的VARIVE _ DYNN项页面列表){ tr class=' odd gradeX ' TD class=' bs-checkbox '输入数据-索引=' @(I)' name=' radio name ' type=' radio '/TD TD @ Html .显示为(它=项目.SHIP_NM) /td td @Html .显示为(它=项目.SHIP_NM_EN) /td td @Html .显示为(它=项目.VOY_ID) /td td @Html .显示为(它=项目.DOCK_BTH_NM) /td td @Html .显示为(它=项目.ARR_DT) /td /tr } } /tbody /table在父页面中调用情态的分部视图：

@Html .部分("模式/自定义模式")

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

需要在启动情态的弹出层的元素上加上：data-toggle=' modal ' data-target=' # gridSystemModal '就可以启动情态的了。点探索时，用创建交互式、快速动态网页应用的网页开发技术从后台取数据，并返回一个分部视图，返回成功后直接替换原有的业务数据分部视图。

好了，说了这么多都和我们的主角没多大关系，现在言归正传，搬出我们的主角。现在情态的登场了，我们会想，怎么让这个弹出页面和我们的父页面交互数据呢？我采用的方式是引导表，原因很简单：引导表天生就是用来处理引导表的，功能强悍，使用简单。

首先，在我们的业务数据分部视图中，

table class=' table table-stripped table-border table-hover js-table ' data-toggle=' table ' data-URL=' data 1。JSON ' data-height=' 299 ' data-click-to-select=' true ' data-select-item-name=' radio name ' id=' table-ShipChk ' ad tr th data-field=' state ' data-radio=' true '/th class=' sorting ' aria-column=' SHIP _ NM '船名/th='排序' aria-column=' SHIP _ NM _ EN '英文船名/th='排序' aria-column=' VOY _ ID '航次/th class='排序' aria-column=' DOCK _ BTH _ NM '停靠泊位/th class=' sorting ' aria-column=' ARR _ DT '到港时间/th/tr/the和t body id=' body-fjShipChkList ' @ if(Model . GetType()！=typeof(检疫_句柄_结果)){ int I=0；foreach(模型中的VARIVE _ DYNN项页面列表){ tr class=' odd gradeX ' TD class=' bs-checkbox '输入数据-索引=' @(I)' name=' radio name ' type=' radio '/TD TD @ Html .显示为(它=项目.SHIP_NM) /td td @Html .显示为(它=项目.SHIP_NM_EN) /td td @Html .显示为(它=项目.VOY_ID) /td td @Html .显示为(它=项目.DOCK_BTH_NM) /td td @Html .显示为(它=项目.ARR_DT) /td /tr } } /tbody /table加入了：数据-URL='数据1。JSON ' data-height=' 299 ' data-click-to-select=' true ' data-select-item-name=' radio name '，其中数据选择项目名称指明我们的表格是收音机方式的，只能选择其中某一行（当然也可以支持多行选择)。然后再按官方文档，上个小菜，一切即将搞定，是该收拾下班了：

$('#gridSystemModal。btn-primary ')。单击(function(){ var selectRow=$(' # table-ShipChk ')。bootstrapTable(' getSelections ')；if(SelectRow . length 1){ SelectRow=$ table . bootstraptable(' GetSelections ')；如果(selectRow.length 1){ alert('请先选择一艘船！');返回；} } $('#SHIP_NAME ')。val(选择行[0][1]。trim())；$('#VOYAGE_NO ')。val(选择行[0][3]。trim())；$('#SHIP_NM_EN ')。val(选择行[0][2]。trim())；$('#DOCK_BTH_NM ')。val(选择行[0][4]。trim())；$('#ARR_DT ')。val(选择行[0][5]。trim())；$('#gridSystemModal ')。情态(' hide ')；});但是，意外发生了。即使我打破了选择按钮，我也无法选择我想要的数据。为什么呢？为什么为什么？查官方文件，就是什么一个$ ('# table-shipchk ')。引导表(' getselections ')有。为什么我不能在这里做？杜娘，GG什么都没得到。使用Bootstrap Table的初衷是简单而强大。怎么会这样？好吧，加班看看。

问题在于每次ajax请求数据时，我总是返回一个新的局部视图来替换原来的局部视图。更换后，引导表未启动，其他表仍在休眠。你怎么能“得到选择”？

好吧，在ajax成功中弥补一下：$ ('# table-shipchk ')。引导表()；

好了，引导表醒了。我可以下班了。

如果你还想深入学习，可以点击这里学习，然后附上3个精彩话题给大家：

引导学习教程

引导实用教程

引导插件教程

引导表教程

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。