bootstrap table使用小记

待我称王封你为后i 2022-08-08 17:50 139阅读 0赞

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

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

开始使用：

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

[https://github.com/wenzhixin/bootstrap-table/][https_github.com_wenzhixin_bootstrap-table]

一、Bootstrap table 支持超多列，会自动显示水平滚动条。

我们用bootstrap开发，经常会遇到一个头疼的问题，如果客户要求表格中显示的列较多，无论我们用bootstrap的哪种布局方式，显示效果都不尽人意。Bootstap table很好的协处理了这个问题，使我们能够在不改变原有的布局方式的情况下，很好的处理超多列的问题，而且支持自定义显示列名，效果如下：![技术分享][181556238412318.jpg]

使用方式很简单，在一个普通的表格中设置data-toggle="table"，就可以在不写JavaScript的情况下启用Bootstrap Table。当然还可以通过脚本的方式触发：

$(‘#table‘).bootstrapTable({
        url: ‘data.json‘
    });。
    是不是很好使呢，只在我们指定的表格中会带入Bootstrap Table的样式，其它未指定的，不会受影响。

二、结合Bootstrap Modal作弹出表格子页面，并获取当前选中的数据后更新到父页面中：

![技术分享][181621117959841.jpg]

功能说明：

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

页面布局思路：

首先创建一个Modal分部视图：

![技术分享][ContractedBlock.gif]

1 
     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">×</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>
    19   </div>
    20 </div>

Modal分布视图：CustomModal

以及我们要显示业务数据的列表分部视图，并被Modal分部视图调用：

![技术分享][ContractedBlock.gif]

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的，功能强悍，使用简单。

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

![技术分享][ContractedBlock.gif]

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="[radio][]Name"，其中data-select-item-name指明我们的表格是radio方式的，只能选择其中某一行（当然也可以支持多行选择）。然后再按官方文档，上个小菜，一切即将搞定，是该收拾下班了：

![技术分享][ContractedBlock.gif]

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醒了，我可以下班了。

未完，无续。。

[src]: http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=17&is_app=0&jk=5f7b8c7dd831db55&k=src&k0=src&kdi0=0&luki=4&n=10&p=baidu&q=65035100_cpr&rb=0&rs=1&seller_id=1&sid=55db31d87d8c7b5f&ssp2=1&stid=0&t=tpclicked3_hc&td=1836545&tu=u1836545&u=http%3A%2F%2Fwww%2Ebubuko%2Ecom%2Finfodetail%2D923383%2Ehtml&urlid=0
[https_github.com_wenzhixin_bootstrap-table]: https://github.com/wenzhixin/bootstrap-table/
[181556238412318.jpg]: /images/20220731/8904e6b9d53947f1b4448487313f87e8.png
[181621117959841.jpg]: /images/20220731/bddf3995526647749682f99318326aff.png
[ContractedBlock.gif]: /images/20220731/fc950700b4314d9684c68767f5abafac.png
[ajax]: http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=17&is_app=0&jk=5f7b8c7dd831db55&k=ajax&k0=ajax&kdi0=0&luki=3&n=10&p=baidu&q=65035100_cpr&rb=0&rs=1&seller_id=1&sid=55db31d87d8c7b5f&ssp2=1&stid=0&t=tpclicked3_hc&td=1836545&tu=u1836545&u=http%3A%2F%2Fwww%2Ebubuko%2Ecom%2Finfodetail%2D923383%2Ehtml&urlid=0
[item]: http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=17&is_app=0&jk=5f7b8c7dd831db55&k=item&k0=item&kdi0=0&luki=1&n=10&p=baidu&q=65035100_cpr&rb=0&rs=1&seller_id=1&sid=55db31d87d8c7b5f&ssp2=1&stid=0&t=tpclicked3_hc&td=1836545&tu=u1836545&u=http%3A%2F%2Fwww%2Ebubuko%2Ecom%2Finfodetail%2D923383%2Ehtml&urlid=0
[radio]: http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=17&is_app=0&jk=5f7b8c7dd831db55&k=radio&k0=radio&kdi0=0&luki=5&n=10&p=baidu&q=65035100_cpr&rb=0&rs=1&seller_id=1&sid=55db31d87d8c7b5f&ssp2=1&stid=0&t=tpclicked3_hc&td=1836545&tu=u1836545&u=http%3A%2F%2Fwww%2Ebubuko%2Ecom%2Finfodetail%2D923383%2Ehtml&urlid=0