好了，说了这么多都和我们的主角没多大关系，现在言归正传，搬出我们的主角。现在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个精彩的专题：