Bootstrap Table使用方法解析(2)

好了,说了这么多都和我们的主角没多大关系,现在言归正传,搬出我们的主角。现在Modal登场了,我们会想,怎么让这个弹出页面和我们的父页面交互数据呢?我采用的方式是Bootstrap Table,原因很简单:Bootstrap Table天生就是用来处理bootstrap table的,功能强悍,使用简单。

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

<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>

加入了:data-url="data1.json" data-height="299" data-click-to-select="true"  data-select-item-name="radioName",其中data-select-item-name指明我们的表格是radio方式的,只能选择其中某一行(当然也可以支持多行选择)。然后再按官方文档,上个小菜,一切即将搞定,是该收拾下班了:

$("#gridSystemModal .btn-primary").click(function () { var selectRow = $("#table-ShipChk").bootstrapTable('getSelections'); if (selectRow.length < 1) { selectRow = $table.bootstrapTable('getSelections'); if (selectRow.length < 1){ alert("请先选择船舶!"); return; } } $("#SHIP_NAME").val(selectRow[0][1].trim()); $("#VOYAGE_NO").val(selectRow[0][3].trim()); $("#SHIP_NM_EN").val(selectRow[0][2].trim()); $("#DOCK_BTH_NM").val(selectRow[0][4].trim()); $("#ARR_DT").val(selectRow[0][5].trim()); $("#gridSystemModal").modal('hide'); });

But,意外发生了,就算我把那个选择按钮点破了,也选不中我要的数据。Why???为什么,为什么。查官方文档,就是一名$("#table-ShipChk").bootstrapTable('getSelections')搞定的事,为什么在我这就搞不定了,度娘,GG一无所获。用Bootstrap Table的初衷,就是它简单,强大呀,怎么会这样呢,好吧,加班,查查查。。

问题就出在,每次ajax请求数据后,我都是返回一个新的分部视图去替换原有的分部视图,替换后没有把Bootstrap Table启动起来,别人还在睡大觉呢,你怎么‘getSelections'。

好吧,在ajax success中补它一刀:$("#table-ShipChk").bootstrapTable();

好了,Bootstrap Table醒了,我可以下班了。

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

Bootstrap Table使用教程

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

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