<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>

$('#table').bootstrapTable({
 url: 'data.json'
});。

 <!-- Modal -->
<div class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel" id="gridSystemModal">
 <div class="modal-dialog" role="document">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
 <h4 class="modal-title" id="gridSystemModalLabel">xxxx查询</h4>
 </div>
 <div class="modal-body">
 <div class="container-fluid" id="fjShipChkList">
 @Html.Partial("Modal/FjShipChkList")
 </div>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
 <button type="button" class="btn btn-primary">选择</button>
 </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<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-success btn-search" type="button" id="modal-search">搜索</button>
  </span>
 </div>
 </div>
 </div>
 </div>
</div>

 <table class="table table-striped table-bordered table-hover js-table" data-toggle="table"
 data-url="data1.json" data-height="299" data-click-to-select="true" 
 data-select-item-name="radioName" id="table-ShipChk">
 <thead>
 <tr>
 <th data-field="state" data-radio="true"></th>
 <th class="sorting" aria-column="SHIP_NM">船名</th>
 <th class="sorting" aria-column="SHIP_NM_EN">英文船名</th>
 <th class="sorting" aria-column="VOY_ID">航次</th>
 <th class="sorting" aria-column="DOCK_BTH_NM">停靠泊位</th>
 <th class="sorting" aria-column="ARR_DT">到港时间</th>
 </tr>
 </thead>
 <tbody id="body-fjShipChkList">
 @if (Model.GetType() != typeof (QUARANTINE_HANDLE_RESULT))
 {
 int i = 0;
 foreach (VOYAGE_DYNM item in Model.PageList)
 {
 <tr class="odd gradeX">
  <td class="bs-checkbox"><input data-index="@(i++)" name="radioName" 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>

<table class="table table-striped table-bordered table-hover js-table" data-toggle="table"
 data-url="data1.json" data-height="299" data-click-to-select="true" 
 data-select-item-name="radioName" id="table-ShipChk">
 <thead>
 <tr>
 <th data-field="state" data-radio="true"></th>
 <th class="sorting" aria-column="SHIP_NM">船名</th>
 <th class="sorting" aria-column="SHIP_NM_EN">英文船名</th>
 <th class="sorting" aria-column="VOY_ID">航次</th>
 <th class="sorting" aria-column="DOCK_BTH_NM">停靠泊位</th>
 <th class="sorting" aria-column="ARR_DT">到港时间</th>
 </tr>
 </thead>
 <tbody id="body-fjShipChkList">
 @if (Model.GetType() != typeof (QUARANTINE_HANDLE_RESULT))
 {
 int i = 0;
 foreach (VOYAGE_DYNM item in Model.PageList)
 {
 <tr class="odd gradeX">
  <td class="bs-checkbox"><input data-index="@(i++)" name="radioName" 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>

$("#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');
 });