Bootstrap Table是基于 Bootstrap 的 jQuery 表格插件，通過簡單的設置，就可以擁有強大的單選、多選、排序、分頁，以及編輯、導出、過濾（擴展）等等的功能：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
現在做的一個app管理以及后臺配置系統，需要針對不同的城市作相應的定制化的配置，對一些后臺數據也做一些展示和操作，所以每一個模塊基本都會有表格的展現形式，這樣做的好處就是直觀方便操作。對于用什么table插件，無疑就是bootstrap table了，功能強大文檔完善，并且我們項目里也是基于bootstrap布局的，所以就選擇了他，接下來就貼一些項目代碼來展示（僅供參考），自己也做一下筆記。
首先是用到了bootstrap的Tab來切換不同的表格用于展示，切換菜單代碼如下：
<div class="report-count">被舉報次數：${count}次</div> <ul class="report-btn nav nav-tabs" id="myTab" > <li class="pending active"><a href="#padding" onclick="freashTable(0)" data-toggle="tab">待處理：${stateCountList[0]}次</a><i class=""></i></li> <li class="success-report"><a href="#success-report" onclick="freashTable(1)" data-toggle="tab">舉報成立：${stateCountList[1]}次</a></li> <li class="fail-report"><a href="#fail-report" onclick="freashTable(2)" data-toggle="tab">舉報不成立：${stateCountList[2]}次</a></li> </ul>相信對于bootstrap并不陌生，給每一個需要切換的標簽 加上｛data-toggle="tab"｝，并且增加錨點用于匹配到對應的切換的子內容｛錨點：href="#padding" rel="external nofollow" ｝，切換對應的字內容代碼如下：
<div class="table-view tab-content"> <div class=" tab-pane fade in active" id="padding"> <div class="table-header clear"> <c:forEach items="${complainCount1}" varStatus="i" var="c" > <div>${c.complain_reason}：${c.count}次</div> </c:forEach> </div> <div class="line addStyle"></div> <div> <table class="table"></table> </div> </div> <div class="tab-pane fade" id="success-report"> <div class="table-header clear"> <c:forEach items="${complainCount2}" varStatus="i" var="c" > <div>${c.complain_reason}：${c.count}次</div> </c:forEach> </div> <div class="line addStyle"></div> <div> <table class="table"></table> </div> </div> <div class="tab-pane fade" id="fail-report"> <div class="table-header clear"> <c:forEach items="${complainCount3}" varStatus="i" var="c" > <div>${c.complain_reason}：${c.count}次</div> </c:forEach> </div> <div class="line addStyle"></div> <div> <table class="table"></table> </div> </div> </div> 通過給每一個需要切換子內容元素設置對應上述錨點的id｛#padding｝,并且不要忘了給外層容器加（tab-content），給子元素容器加class(tab-pane fade in active),有active的就是默認選中的。每一個子內容都有一個table元素，所以這里就是我們需要的table，切換每一個tab就會刷新顯示對應的table數據。這里我們采用動態的生成table的方式加載數據。
var $table=$('.table')function initTable(index){ $table.bootstrapTable({ url: '${basePath}/interacts/complain/getComplainList?pkid='+$("#pkid").val()+'&state='+index, //請求數據地址url height: getHeight(), //獲取行高 striped: true, //設置為 true 會有隔行變色效果 search: true, //為true會有搜索框 showRefresh: true, //為true有刷新按鈕 showColumns: true, //是否顯示 內容列下拉框 minimumCountColumns: 2,//當列數小于此值時，將隱藏內容列下拉框 clickToSelect: true, //點擊行是checkbox或者rediobox選中 detailView: true, //設置為 true 可以顯示詳細頁面模式。table第一行會有+號，點擊會出現更詳細的該行信息 detailFormatter: 'detailFormatter', //格式化詳細頁面模式的視圖。 pagination: true, //展示有分頁 paginationLoop: false, //循環分頁 sidePagination: 'server', //設置在哪里進行分頁，可選值為 'client' 或者 'server'。設置 'server'時，必須設置 服務器數據地址（url）或者重寫ajax方法 silentSort: false, //設置為 false 將在點擊分頁按鈕時，自動記住排序項。僅在 sidePagination設置為 server時生效19 escape: true, //轉義HTML字符串，替換 &, <, >, ", `, 和 ' 字符. searchOnEnterKey: true, //設置為 true時，按回車觸發搜索方法，否則自動觸發搜索方法 idField: 'systemId', //指定主鍵 maintainSelected: true, //設置為 true 在點擊分頁按鈕或搜索按鈕時，將記住checkbox的選擇項 toolbar: '#toolbar', //一個jQuery 選擇器，指明自定義的toolbar columns: [ {field: 'complain_reason', title: '舉報類型',align: 'center'}, {field: 'nick_name', title: '舉報人',align: 'center'}, {field: 'create_time', title: '舉報時間',formatter:'timeFormat' }, {field: 'complain_state', title: '舉報狀態',formatter:'stateFormat'} {field: 'action', title: '操作', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false} ] });}以上就是初始化table的函數，傳index是為了切換時候請求不同的地址刷新不同的table，因為在每一個tab切換菜單都有onclick事件函數 freashTable（index）,table的所有用到的配置我都在上述代碼中做了注釋，想看跟詳細的配置請看官網配置（http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/）。columns配置每一行，field是對應的每一列要顯示的字段key值，title對應的是每一列的頭部，formatter是格式化每一列的自定義函數,下面只展示時間格式化函數代碼：
function timeFormat(value,row,index){ value = row.modifyTime==null?value:row.modifyTime; return new Date(parseInt(value)).toLocaleString().replace(/:/d{1,2}$/,' '); }對應的field為action的那一行就是操作按鈕了，格式化操作按鈕代碼如下：
function actionFormatter(value, row, index) { return [ '<a class="update" href="javascript:;" onclick="editdateAction(/'' + row.systemId + '/')" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a> ', '<a class="delete" href="javascript:;" onclick="deleteRowAction(/''+row.systemId+'/')" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>' ].join('');}同時分頁bootstrap已經提供了完整的配置（包括每頁顯示的行數，分頁按鈕，總條數和總頁數等等）但是沒有跳轉到指定行，所以需要我們自己寫他的樣式定位到相應的分頁欄，不過他有相關的方法提供，
selectPage就是跳到指定頁，我們可以自己系一個方法：
function goPage(){ var page=$('#pageNum').val(); $table.bootstrapTable('selectPage',page) }在用其方法時候，要$table.bootstrapTable('selectPage',page)使用。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
