Bootstrap Table快速完美搭建后臺(tái)管理系統(tǒng)
Bootstrap Table是基于 Bootstrap 的 jQuery 表格插件，通過(guò)簡(jiǎn)單的設(shè)置，就可以擁有強(qiáng)大的單選、多選、排序、分頁(yè)，以及編輯、導(dǎo)出、過(guò)濾（擴(kuò)展）等等的功能：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
現(xiàn)在做的一個(gè)app管理以及后臺(tái)配置系統(tǒng)，需要針對(duì)不同的城市作相應(yīng)的定制化的配置，對(duì)一些后臺(tái)數(shù)據(jù)也做一些展示和操作，所以每一個(gè)模塊基本都會(huì)有表格的展現(xiàn)形式，這樣做的好處就是直觀方便操作。對(duì)于用什么table插件，無(wú)疑就是bootstrap table了，功能強(qiáng)大文檔完善，并且我們項(xiàng)目里也是基于bootstrap布局的，所以就選擇了他，接下來(lái)就貼一些項(xiàng)目代碼來(lái)展示（僅供參考），自己也做一下筆記。
首先是用到了bootstrap的Tab來(lái)切換不同的表格用于展示，切換菜單代碼如下：
<div class="report-count">被舉報(bào)次數(shù)：${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">舉報(bào)成立：${stateCountList[1]}次</a></li>
<li class="fail-report"><a href="#fail-report" onclick="freashTable(2)" data-toggle="tab">舉報(bào)不成立：${stateCountList[2]}次</a></li>
</ul>
相信對(duì)于bootstrap并不陌生，給每一個(gè)需要切換的標(biāo)簽 加上｛data-toggle="tab"｝，并且增加錨點(diǎn)用于匹配到對(duì)應(yīng)的切換的子內(nèi)容｛錨點(diǎn)：href="#padding" rel="external nofollow" ｝，切換對(duì)應(yīng)的字內(nèi)容代碼如下：
<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>
通過(guò)給每一個(gè)需要切換子內(nèi)容元素設(shè)置對(duì)應(yīng)上述錨點(diǎn)的id｛#padding｝,并且不要忘了給外層容器加（tab-content），給子元素容器加class(tab-pane fade in active),有active的就是默認(rèn)選中的。每一個(gè)子內(nèi)容都有一個(gè)table元素，所以這里就是我們需要的table，切換每一個(gè)tab就會(huì)刷新顯示對(duì)應(yīng)的table數(shù)據(jù)。這里我們采用動(dòng)態(tài)的生成table的方式加載數(shù)據(jù)。
var $table=$('.table')
function initTable(index){
$table.bootstrapTable({
url: '${basePath}/interacts/complain/getComplainList?pkid='+$("#pkid").val()+'&state='+index, //請(qǐng)求數(shù)據(jù)地址url
height: getHeight(), //獲取行高
striped: true, //設(shè)置為 true 會(huì)有隔行變色效果
search: true, //為true會(huì)有搜索框
showRefresh: true, //為true有刷新按鈕
showColumns: true, //是否顯示 內(nèi)容列下拉框
minimumCountColumns: 2,//當(dāng)列數(shù)小于此值時(shí)，將隱藏內(nèi)容列下拉框
clickToSelect: true, //點(diǎn)擊行是checkbox或者rediobox選中
detailView: true, //設(shè)置為 true 可以顯示詳細(xì)頁(yè)面模式。table第一行會(huì)有+號(hào)，點(diǎn)擊會(huì)出現(xiàn)更詳細(xì)的該行信息
detailFormatter: 'detailFormatter', //格式化詳細(xì)頁(yè)面模式的視圖。
pagination: true, //展示有分頁(yè)
paginationLoop: false, //循環(huán)分頁(yè)
sidePagination: 'server', //設(shè)置在哪里進(jìn)行分頁(yè)，可選值為 'client' 或者 'server'。設(shè)置 'server'時(shí)，必須設(shè)置 服務(wù)器數(shù)據(jù)地址（url）或者重寫(xiě)ajax方法
silentSort: false, //設(shè)置為 false 將在點(diǎn)擊分頁(yè)按鈕時(shí)，自動(dòng)記住排序項(xiàng)。僅在 sidePagination設(shè)置為 server時(shí)生效19 escape: true, //轉(zhuǎn)義HTML字符串，替換 &, <, >, ", `, 和 ' 字符.
searchOnEnterKey: true, //設(shè)置為 true時(shí)，按回車(chē)觸發(fā)搜索方法，否則自動(dòng)觸發(fā)搜索方法
idField: 'systemId', //指定主鍵
maintainSelected: true, //設(shè)置為 true 在點(diǎn)擊分頁(yè)按鈕或搜索按鈕時(shí)，將記住checkbox的選擇項(xiàng)
toolbar: '#toolbar', //一個(gè)jQuery 選擇器，指明自定義的toolbar
columns: [
{field: 'complain_reason', title: '舉報(bào)類型',align: 'center'},
{field: 'nick_name', title: '舉報(bào)人',align: 'center'},
{field: 'create_time', title: '舉報(bào)時(shí)間',formatter:'timeFormat' },
{field: 'complain_state', title: '舉報(bào)狀態(tài)',formatter:'stateFormat'}
{field: 'action', title: '操作', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}
]
});
}
以上就是初始化table的函數(shù)，傳index是為了切換時(shí)候請(qǐng)求不同的地址刷新不同的table，因?yàn)樵诿恳粋€(gè)tab切換菜單都有onclick事件函數(shù) freashTable（index）,table的所有用到的配置我都在上述代碼中做了注釋，想看跟詳細(xì)的配置請(qǐng)看官網(wǎng)配置（http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/）。columns配置每一行，field是對(duì)應(yīng)的每一列要顯示的字段key值，title對(duì)應(yīng)的是每一列的頭部，formatter是格式化每一列的自定義函數(shù),下面只展示時(shí)間格式化函數(shù)代碼：
function timeFormat(value,row,index){
value = row.modifyTime==null?value:row.modifyTime;
return new Date(parseInt(value)).toLocaleString().replace(/:\d{1,2}$/,' ');
}
對(duì)應(yīng)的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('');
}
同時(shí)分頁(yè)bootstrap已經(jīng)提供了完整的配置（包括每頁(yè)顯示的行數(shù)，分頁(yè)按鈕，總條數(shù)和總頁(yè)數(shù)等等）但是沒(méi)有跳轉(zhuǎn)到指定行，所以需要我們自己寫(xiě)他的樣式定位到相應(yīng)的分頁(yè)欄，不過(guò)他有相關(guān)的方法提供，
selectPage就是跳到指定頁(yè)，我們可以自己系一個(gè)方法：
function goPage(){
var page=$('#pageNum').val();
$table.bootstrapTable('selectPage',page)
}
在用其方法時(shí)候，要$table.bootstrapTable('selectPage',page)使用。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Javascript模仿淘寶信用評(píng)價(jià)實(shí)例(附源碼)
這篇文章主要介紹了Javascript模仿淘寶信用評(píng)價(jià)功能實(shí)現(xiàn)方法,以完整實(shí)例形式分析了JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)改變頁(yè)面元素的相關(guān)技巧,并附帶了完整的實(shí)例代碼供讀者下載參考,需要的朋友可以參考下2015-11-11
本篇文章主要介紹了JavaScript自定義文本框光標(biāo)的方法實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
JavaScript條件判斷_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
JavaScript使用if () { ... } else { ... }來(lái)進(jìn)行條件判斷。下通過(guò)語(yǔ)句代碼給大家詳細(xì)介紹js 條件判斷的基本知識(shí)，需要的的朋友參考下吧2017-06-06
純js和css實(shí)現(xiàn)漸變色包括靜態(tài)漸變和動(dòng)態(tài)漸變
用javascript實(shí)現(xiàn)一下所謂的動(dòng)態(tài)漸變，考慮動(dòng)態(tài)原因就不上圖了，我來(lái)簡(jiǎn)單介紹下思路2014-05-05
JavaScript中數(shù)據(jù)過(guò)濾的幾種常見(jiàn)方法
JavaScript是一種廣泛使用的編程語(yǔ)言,它提供了多種方法來(lái)對(duì)數(shù)據(jù)進(jìn)行過(guò)濾,在本文中,我們將介紹JavaScript中常見(jiàn)的幾種數(shù)據(jù)過(guò)濾方法,并提供相應(yīng)的示例,感興趣的朋友跟隨小編一起看看吧2023-10-10
你應(yīng)該了解的JavaScript Array.map()五種用途小結(jié)
大家都知道m(xù)ap() 方法返回一個(gè)新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。下面這篇文章主要給大家介紹了關(guān)于JavaScript Array.map()的五種用途，需要的朋友可以參考下2018-11-11
基于JavaScript實(shí)現(xiàn)窗口拖動(dòng)效果
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)窗口拖動(dòng)效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
純JS開(kāi)發(fā)baguetteBox.js響應(yīng)式畫(huà)廊插件
這篇文章主要介紹了純JS開(kāi)發(fā)baguetteBox.js響應(yīng)式畫(huà)廊插件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
這篇文章主要介紹了JavaScript讀取本地文件常用方法流程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
這篇文章主要介紹了js實(shí)現(xiàn)遮罩層彈出框的方法,可實(shí)現(xiàn)對(duì)遮罩層彈出框的樣式定義、按鈕事件及相關(guān)功能的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01