bootstrap table使用小記

時間 2020-09-25

原文原文鏈接

bootstrap table是一個很是不錯的，基於bootstrap的插件，它擴展和豐富了bootstrap表格的操做，如格式化表格，表格選擇器，表格工具欄，分頁等等。css

最近基於bootstrap開發一個開臺發佈系統，就開發過程當中，使用bootstap table遇到的一些問題及收穫記錄以下：jquery

開始使用：git

須要在你本身的頁面中引入如下樣式及腳本：github

https://github.com/wenzhixin/bootstrap-table/bootstrap

1、Bootstrap table 支持超多列，會自動顯示水平滾動條。ide

咱們用bootstrap開發，常常會遇到一個頭疼的問題，若是客戶要求表格中顯示的列較多，不管咱們用bootstrap的哪一種佈局方式，顯示效果都不盡人意。Bootstap table很好的協處理了這個問題，使咱們可以在不改變原有的佈局方式的狀況下，很好的處理超多列的問題，並且支持自定義顯示列名，效果以下：工具

使用方式很簡單，在一個普通的表格中設置data-toggle="table"，就能夠在不寫JavaScript的狀況下啓用Bootstrap Table。固然還能夠經過腳本的方式觸發：佈局

$('#table').bootstrapTable({
    url: 'data.json'
});。
是否是很好使呢，只在咱們指定的表格中會帶入Bootstrap Table的樣式，其它未指定的，不會受影響。

2、結合Bootstrap Modal做彈出表格子頁面，並獲取當前選中的數據後更新到父頁面中：

功能說明：

用戶點父頁面中的某一輸入框，系統會彈出一個查詢界面，供用戶檢索選擇相關的數據。

頁面佈局思路：

首先建立一個Modal分部視圖：

 1 <!-- Modal -->
 2 <div class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel" id="gridSystemModal">
 3   <div class="modal-dialog" role="document">
 4     <div class="modal-content">
 5       <div class="modal-header">
 6         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 7         <h4 class="modal-title" id="gridSystemModalLabel">xxxx查詢</h4>
 8       </div>
 9       <div class="modal-body">
10           <div class="container-fluid" id="fjShipChkList">
11               @Html.Partial("Modal/FjShipChkList")
12           </div>
13       </div>
14       <div class="modal-footer">
15         <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
16         <button type="button" class="btn btn-primary">選擇</button>
17       </div>
18     </div><!-- /.modal-content -->
19   </div><!-- /.modal-dialog -->
20 </div><!-- /.modal -->

Modal分佈視圖：CustomModal

以及咱們要顯示業務數據的列表分部視圖，並被Modal分部視圖調用：

 1 <div class="row table-toolbar">
 2     <div class="col-md-12">
 3         <div class="pull-right form-inline">
 4             <div class="form-group">
 5                 <div class="input-group input-medium">
 6                     <input type="text" class="form-control input-search" placeholder="航次" id="fjShipChkList-keyword" name="keyword" value="" />
 7                     <span class="input-group-btn">
 8                         <button class="btn btn-success btn-search" type="button" id="modal-search">搜索</button>
 9                     </span>
10                 </div>
11             </div>
12         </div>
13     </div>
14 </div>
15 
16     <table class="table table-striped table-bordered table-hover js-table" data-toggle="table"
17            data-url="data1.json" data-height="299" data-click-to-select="true" 
18             data-select-item-name="radioName" id="table-ShipChk">
19         <thead>
20         <tr>
21             <th data-field="state" data-radio="true"></th>
22             <th class="sorting" aria-column="SHIP_NM">船名</th>
23             <th class="sorting" aria-column="SHIP_NM_EN">英文船名</th>
24             <th class="sorting" aria-column="VOY_ID">航次</th>
25             <th class="sorting" aria-column="DOCK_BTH_NM">停靠泊位</th>
26             <th class="sorting" aria-column="ARR_DT">到港時間</th>
27         </tr>
28         </thead>
29         <tbody id="body-fjShipChkList">
30         @if (Model.GetType() != typeof (QUARANTINE_HANDLE_RESULT))
31         {
32             int i = 0;
33             foreach (VOYAGE_DYNM item in Model.PageList)
34             {
35                 <tr class="odd gradeX">
36                     <td class="bs-checkbox"><input data-index="@(i++)" name="radioName" type="radio"></td>
37                     <td>
38                         @Html.DisplayFor(it => item.SHIP_NM)
39                     </td>
40                     <td>
41                         @Html.DisplayFor(it => item.SHIP_NM_EN)
42                     </td>
43                     <td>
44                         @Html.DisplayFor(it => item.VOY_ID)
45                     </td>
46                     <td>
47                         @Html.DisplayFor(it => item.DOCK_BTH_NM)
48                     </td>
49                     <td>
50                         @Html.DisplayFor(it => item.ARR_DT)
51                     </td>
52                 </tr>
53             }
54         }
55         </tbody>
56     </table>

業務數據分部視圖

在父頁面中調用Modal分部視圖：

@Html.Partial("Modal/CustomModal")

引入Modal分部視圖的位置最好是與父頁面中的頂層元素爲兄弟節點，避免Modal調用失敗。

須要在啓動Modal 彈出層的元素上加上：data-toggle="modal" data-target="#gridSystemModal"就能夠啓動Modal了。點探索時，用ajax從後臺取數據，並返回一個分部視圖，返回成功後直接替換原有的業務數據分部視圖。

好了，說了這麼多都和咱們的主角沒多大關係，如今言歸正傳，搬出咱們的主角。如今Modal登場了，咱們會想，怎麼讓這個彈出頁面和咱們的父頁面交互數據呢？我採用的方式是Bootstrap Table，緣由很簡單：Bootstrap Table天生就是用來處理bootstrap table的，功能強悍，使用簡單。

首先，在咱們的業務數據分部視圖中，

 1 <table class="table table-striped table-bordered table-hover js-table" data-toggle="table"
 2            data-url="data1.json" data-height="299" data-click-to-select="true" 
 3             data-select-item-name="radioName" id="table-ShipChk">
 4         <thead>
 5         <tr>
 6             <th data-field="state" data-radio="true"></th>
 7             <th class="sorting" aria-column="SHIP_NM">船名</th>
 8             <th class="sorting" aria-column="SHIP_NM_EN">英文船名</th>
 9             <th class="sorting" aria-column="VOY_ID">航次</th>
10             <th class="sorting" aria-column="DOCK_BTH_NM">停靠泊位</th>
11             <th class="sorting" aria-column="ARR_DT">到港時間</th>
12         </tr>
13         </thead>
14         <tbody id="body-fjShipChkList">
15         @if (Model.GetType() != typeof (QUARANTINE_HANDLE_RESULT))
16         {
17             int i = 0;
18             foreach (VOYAGE_DYNM item in Model.PageList)
19             {
20                 <tr class="odd gradeX">
21                     <td class="bs-checkbox"><input data-index="@(i++)" name="radioName" type="radio"></td>
22                     <td>
23                         @Html.DisplayFor(it => item.SHIP_NM)
24                     </td>
25                     <td>
26                         @Html.DisplayFor(it => item.SHIP_NM_EN)
27                     </td>
28                     <td>
29                         @Html.DisplayFor(it => item.VOY_ID)
30                     </td>
31                     <td>
32                         @Html.DisplayFor(it => item.DOCK_BTH_NM)
33                     </td>
34                     <td>
35                         @Html.DisplayFor(it => item.ARR_DT)
36                     </td>
37                 </tr>
38             }
39         }
40         </tbody>
41     </table>

業務數據Table

加入了：data-url="data1.json" data-height="299" data-click-to-select="true" data-select-item-name="radioName"，其中data-select-item-name指明咱們的表格是radio方式的，只能選擇其中某一行（固然也能夠支持多行選擇）。而後再按官方文檔，上個小菜，一切即將搞定，是該收拾下班了：

 1 $("#gridSystemModal .btn-primary").click(function () {
 2         var selectRow = $("#table-ShipChk").bootstrapTable('getSelections');
 3 
 4         if (selectRow.length < 1) {
 5             selectRow = $table.bootstrapTable('getSelections');
 6             if (selectRow.length < 1){
 7             alert("請先選擇船舶！");
 8             return;
 9         }
10         }
11         $("#SHIP_NAME").val(selectRow[0][1].trim());
12         $("#VOYAGE_NO").val(selectRow[0][3].trim());
13         $("#SHIP_NM_EN").val(selectRow[0][2].trim());
14         $("#DOCK_BTH_NM").val(selectRow[0][4].trim());
15         $("#ARR_DT").val(selectRow[0][5].trim());
16         $("#gridSystemModal").modal('hide');
17     });

獲取選中的數據行

But，意外發生了，就算我把那個選擇按鈕點破了，也選不中我要的數據。Why???爲何，爲何。。查官方文檔，就是一名$("#table-ShipChk").bootstrapTable('getSelections')搞定的事，爲何在我這就搞不定了，度娘，GG一無所得。用Bootstrap Table的初衷，就是它簡單，強大呀，怎麼會這樣呢，好吧，加班，查查查。。

問題就出在，每次ajax請求數據後，我都是返回一個新的分部視圖去替換原有的分部視圖，替換後沒有把Bootstrap Table啓動起來，別人還在睡大覺呢，你怎麼‘getSelections’，它都不鳥你。

好吧，在ajax success中補它一刀：$("#table-ShipChk").bootstrapTable();

好了，Bootstrap Table醒了，我能夠下班了。

未完，無續。。