Bootstrap Table使用方法解析
bootstrap table是一個(gè)非常不錯(cuò)的，基于bootstrap的插件，它擴(kuò)展和豐富了bootstrap表格的操作，如格式化表格，表格選擇器，表格工具欄，分頁(yè)等等。
最近基于bootstrap開(kāi)發(fā)一個(gè)開(kāi)臺(tái)發(fā)布系統(tǒng)，就開(kāi)發(fā)過(guò)程中，使用bootstap table遇到的一些問(wèn)題及收獲記錄如下：
開(kāi)始使用：
需要在你自己的頁(yè)面中引入以下樣式及腳本：
<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>
https://github.com/wenzhixin/bootstrap-table/
一、Bootstrap table 支持超多列，會(huì)自動(dòng)顯示水平滾動(dòng)條。
我們用bootstrap開(kāi)發(fā)，經(jīng)常會(huì)遇到一個(gè)頭疼的問(wèn)題，如果客戶(hù)要求表格中顯示的列較多，無(wú)論我們用bootstrap的哪種布局方式，顯示效果都不盡人意。Bootstap table很好的協(xié)處理了這個(gè)問(wèn)題，使我們能夠在不改變?cè)械牟季址绞降那闆r下，很好的處理超多列的問(wèn)題，而且支持自定義顯示列名，效果如下：
使用方式很簡(jiǎn)單，在一個(gè)普通的表格中設(shè)置data-toggle="table"，就可以在不寫(xiě)JavaScript的情況下啟用Bootstrap Table。當(dāng)然還可以通過(guò)腳本的方式觸發(fā)：
$('#table').bootstrapTable({
url: 'data.json'
});。
是不是很好使呢，只在我們指定的表格中會(huì)帶入Bootstrap Table的樣式，其它未指定的，不會(huì)受影響。
二、結(jié)合Bootstrap Modal作彈出表格子頁(yè)面，并獲取當(dāng)前選中的數(shù)據(jù)后更新到父頁(yè)面中：
功能說(shuō)明：
用戶(hù)點(diǎn)父頁(yè)面中的某一輸入框，系統(tǒng)會(huì)彈出一個(gè)查詢(xún)界面，供用戶(hù)檢索選擇相關(guān)的數(shù)據(jù)。
頁(yè)面布局思路：
首先創(chuàng)建一個(gè)Modal分部視圖：
<!-- 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查詢(xún)</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">關(guān)閉</button>
<button type="button" class="btn btn-primary">選擇</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
以及我們要顯示業(yè)務(wù)數(shù)據(jù)的列表分部視圖，并被Modal分部視圖調(diào)用：
<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">到港時(shí)間</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>
在父頁(yè)面中調(diào)用Modal分部視圖：
@Html.Partial("Modal/CustomModal")
引入Modal分部視圖的位置最好是與父頁(yè)面中的頂層元素為兄弟節(jié)點(diǎn)，避免Modal調(diào)用失敗。
需要在啟動(dòng)Modal 彈出層的元素上加上：data-toggle="modal" data-target="#gridSystemModal"就可以啟動(dòng)Modal了。點(diǎn)探索時(shí)，用ajax從后臺(tái)取數(shù)據(jù)，并返回一個(gè)分部視圖，返回成功后直接替換原有的業(yè)務(wù)數(shù)據(jù)分部視圖。
好了，說(shuō)了這么多都和我們的主角沒(méi)多大關(guān)系，現(xiàn)在言歸正傳，搬出我們的主角。現(xiàn)在Modal登場(chǎng)了，我們會(huì)想，怎么讓這個(gè)彈出頁(yè)面和我們的父頁(yè)面交互數(shù)據(jù)呢？我采用的方式是Bootstrap Table，原因很簡(jiǎn)單：Bootstrap Table天生就是用來(lái)處理bootstrap table的，功能強(qiáng)悍，使用簡(jiǎn)單。
首先，在我們的業(yè)務(wù)數(shù)據(jù)分部視圖中，
<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">到港時(shí)間</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>
加入了：data-url="data1.json" data-height="299" data-click-to-select="true" data-select-item-name="radioName"，其中data-select-item-name指明我們的表格是radio方式的，只能選擇其中某一行（當(dāng)然也可以支持多行選擇）。然后再按官方文檔，上個(gè)小菜，一切即將搞定，是該收拾下班了：
$("#gridSystemModal .btn-primary").click(function () {
var selectRow = $("#table-ShipChk").bootstrapTable('getSelections');
if (selectRow.length < 1) {
selectRow = $table.bootstrapTable('getSelections');
if (selectRow.length < 1){
alert("請(qǐng)先選擇船舶！");
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，意外發(fā)生了，就算我把那個(gè)選擇按鈕點(diǎn)破了，也選不中我要的數(shù)據(jù)。Why???為什么，為什么。查官方文檔，就是一名$("#table-ShipChk").bootstrapTable('getSelections')搞定的事，為什么在我這就搞不定了，度娘，GG一無(wú)所獲。用Bootstrap Table的初衷，就是它簡(jiǎn)單，強(qiáng)大呀，怎么會(huì)這樣呢，好吧，加班，查查查。。
問(wèn)題就出在，每次ajax請(qǐng)求數(shù)據(jù)后，我都是返回一個(gè)新的分部視圖去替換原有的分部視圖，替換后沒(méi)有把Bootstrap Table啟動(dòng)起來(lái)，別人還在睡大覺(jué)呢，你怎么‘getSelections'。
好吧，在ajax success中補(bǔ)它一刀：$("#table-ShipChk").bootstrapTable();
好了，Bootstrap Table醒了，我可以下班了。
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專(zhuān)題：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JSP基于Bootstrap分頁(yè)顯示實(shí)例解析
這篇文章主要為大家詳細(xì)介紹了JSP基于Bootstrap分頁(yè)顯示實(shí)例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
js在客戶(hù)端驗(yàn)證密碼強(qiáng)度，兼容FireFox和IE
js在客戶(hù)端驗(yàn)證密碼強(qiáng)度，兼容FireFox和IE...2007-05-05
JavaScript中實(shí)現(xiàn)單體模式分享
這篇文章主要介紹了JavaScript中實(shí)現(xiàn)單體模式分享,單體模式的定義：?jiǎn)误w是一個(gè)用來(lái)劃分命名空間并將一批相關(guān)方法和屬性組織在一起的對(duì)象,如果它能夠被實(shí)例化,那么只能被實(shí)例化一次,需要的朋友可以參考下2015-01-01
javascript CSS畫(huà)圖之基礎(chǔ)篇
要在瀏覽器上動(dòng)態(tài)地畫(huà)圖（矢量圖），個(gè)人覺(jué)得矢量圖中最關(guān)鍵的兩點(diǎn).2009-07-07
JS自定義對(duì)象創(chuàng)建與簡(jiǎn)單使用方法示例
這篇文章主要介紹了JS自定義對(duì)象創(chuàng)建與簡(jiǎn)單使用方法,結(jié)合實(shí)例形式分析了JavaScript創(chuàng)建與使用自定義對(duì)象的相關(guān)操作技巧,需要的朋友可以參考下2020-01-01
這篇文章主要為大家分享了一份很全面的JavaScript常用功能匯總集合，一些常用的額JS 對(duì)象、基本數(shù)據(jù)結(jié)構(gòu)、功能函數(shù)等，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了javascript簡(jiǎn)單比較日期大小的方法,涉及JavaScript針對(duì)日期的轉(zhuǎn)換與判定操作技巧,需要的朋友可以參考下2016-01-01
在編寫(xiě)小程序的項(xiàng)目過(guò)程中,難免會(huì)有需要上傳圖片,下面這篇文章主要給大家介紹了關(guān)于微信小程序圖片上傳功能的實(shí)現(xiàn)方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
JS實(shí)現(xiàn)延遲隱藏功能的方法(類(lèi)似QQ頭像鼠標(biāo)放上展示信息)
下面小編就為大家分享一篇JS實(shí)現(xiàn)延遲隱藏功能的方法(類(lèi)似QQ頭像鼠標(biāo)放上展示信息)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
本文通過(guò)實(shí)例代碼給大家介紹了BootStrap Table復(fù)選框默認(rèn)選中功能(從數(shù)據(jù)庫(kù)獲取到對(duì)應(yīng)的狀態(tài)進(jìn)行判斷是否為選中狀態(tài))，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-07-07