Bootstrap Table是基于 Bootstrap 的 jQuery 表格插件，通過簡單的設(shè)置，就可以擁有強大的單選、多選、排序、分頁，以及編輯、導(dǎo)出、過濾（擴展）等等的功能。本文主要和大家介紹Bootstrap Table快速完美搭建后臺管理系統(tǒng)的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能幫助到大家。

現(xiàn)在做的一個app管理以及后臺配置系統(tǒng)，需要針對不同的城市作相應(yīng)的定制化的配置，對一些后臺數(shù)據(jù)也做一些展示和操作，所以每一個模塊基本都會有表格的展現(xiàn)形式，這樣做的好處就是直觀方便操作。對于用什么table插件，無疑就是bootstrap table了，功能強大文檔完善，并且我們項目里也是基于bootstrap布局的，所以就選擇了他，接下來就貼一些項目代碼來展示（僅供參考），自己也做一下筆記。

首先是用到了bootstrap的Tab來切換不同的表格用于展示，切換菜單代碼如下：

 <p class="report-count">被舉報次數(shù)：${count}次</p>
  <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并不陌生，給每一個需要切換的標(biāo)簽 加上｛data-toggle="tab"｝，并且增加錨點用于匹配到對應(yīng)的切換的子內(nèi)容｛錨點：href="#padding" rel="external nofollow" ｝，切換對應(yīng)的字內(nèi)容代碼如下：

<p class="table-view tab-content">
      <p class=" tab-pane fade in active" id="padding">
       <p class="table-header clear">
        <c:forEach items="${complainCount1}" varStatus="i" var="c" >
         <p>${c.complain_reason}：${c.count}次</p>
        </c:forEach>
       </p>
       <p class="line addStyle"></p>
       <p>
        <table class="table"></table>
       </p>
      </p>
      <p class="tab-pane fade" id="success-report">
       <p class="table-header clear">
        <c:forEach items="${complainCount2}" varStatus="i" var="c" >
         <p>${c.complain_reason}：${c.count}次</p>
        </c:forEach>
       </p>
       <p class="line addStyle"></p>
       <p>
        <table class="table"></table>
       </p>
      </p>
      <p class="tab-pane fade" id="fail-report">
       <p class="table-header clear">
        <c:forEach items="${complainCount3}" varStatus="i" var="c" >
         <p>${c.complain_reason}：${c.count}次</p>
        </c:forEach>
       </p>
       <p class="line addStyle"></p>
       <p>
        <table class="table"></table>
       </p>
      </p>
     </p>

通過給每一個需要切換子內(nèi)容元素設(shè)置對應(yīng)上述錨點的id｛#padding｝,并且不要忘了給外層容器加（tab-content），給子元素容器加class(tab-pane fade in active),有active的就是默認選中的。每一個子內(nèi)容都有一個table元素，所以這里就是我們需要的table，切換每一個tab就會刷新顯示對應(yīng)的table數(shù)據(jù)。這里我們采用動態(tài)的生成table的方式加載數(shù)據(jù)。

var $table=$('.table')
function initTable(index){
  $table.bootstrapTable({
  url: '${basePath}/interacts/complain/getComplainList?pkid='+$("#pkid").val()+'&state='+index, //請求數(shù)據(jù)地址url
  height: getHeight(), //獲取行高
  striped: true, //設(shè)置為 true 會有隔行變色效果
  search: true, //為true會有搜索框
  showRefresh: true, //為true有刷新按鈕
  showColumns: true, //是否顯示 內(nèi)容列下拉框
  minimumCountColumns: 2,//當(dāng)列數(shù)小于此值時，將隱藏內(nèi)容列下拉框
  clickToSelect: true, //點擊行是checkbox或者rediobox選中
  detailView: true, //設(shè)置為 true 可以顯示詳細頁面模式。table第一行會有+號，點擊會出現(xiàn)更詳細的該行信息
  detailFormatter: 'detailFormatter', //格式化詳細頁面模式的視圖。
  pagination: true, //展示有分頁
  paginationLoop: false, //循環(huán)分頁
  sidePagination: 'server', //設(shè)置在哪里進行分頁，可選值為 'client' 或者 'server'。設(shè)置 'server'時，必須設(shè)置 服務(wù)器數(shù)據(jù)地址（url）或者重寫ajax方法
  silentSort: false, //設(shè)置為 false 將在點擊分頁按鈕時，自動記住排序項。僅在 sidePagination設(shè)置為 server時生效19   escape: true, //轉(zhuǎn)義HTML字符串，替換 &, <, >, ", `, 和 &#39; 字符.
  searchOnEnterKey: true, //設(shè)置為 true時，按回車觸發(fā)搜索方法，否則自動觸發(fā)搜索方法
  idField: &#39;systemId&#39;, //指定主鍵
  maintainSelected: true, //設(shè)置為 true 在點擊分頁按鈕或搜索按鈕時，將記住checkbox的選擇項
  toolbar: &#39;#toolbar&#39;, //一個jQuery 選擇器，指明自定義的toolbar 
  columns: [
    {field: &#39;complain_reason&#39;, title: &#39;舉報類型&#39;,align: &#39;center&#39;},
    {field: &#39;nick_name&#39;, title: &#39;舉報人&#39;,align: &#39;center&#39;},
    {field: &#39;create_time&#39;, title: &#39;舉報時間&#39;,formatter:&#39;timeFormat&#39; },
    {field: &#39;complain_state&#39;, title: &#39;舉報狀態(tài)&#39;,formatter:&#39;stateFormat&#39;}
    {field: &#39;action&#39;, title: &#39;操作&#39;, align: &#39;center&#39;, formatter: &#39;actionFormatter&#39;, events: &#39;actionEvents&#39;, clickToSelect: false}
   ]
  });
}

以上就是初始化table的函數(shù)，傳index是為了切換時候請求不同的地址刷新不同的table，因為在每一個tab切換菜單都有onclick事件函數(shù) freashTable（index）,table的所有用到的配置我都在上述代碼中做了注釋，想看跟詳細的配置請看官網(wǎng)配置（http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/）。columns配置每一行，field是對應(yīng)的每一列要顯示的字段key值，title對應(yīng)的是每一列的頭部，formatter是格式化每一列的自定義函數(shù),下面只展示時間格式化函數(shù)代碼：

function timeFormat(value,row,index){
  value = row.modifyTime==null?value:row.modifyTime;
 return new Date(parseInt(value)).toLocaleString().replace(/:\d{1,2}$/,' ');
 }

對應(yīng)的field為action的那一行就是操作按鈕了，格式化操作按鈕代碼如下：

function actionFormatter(value, row, index) {
 return [
  &#39;<a class="update" href="javascript:;" onclick="editdateAction(\&#39;&#39; + row.systemId + &#39;\&#39;)" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a>　&#39;,
  &#39;<a class="delete" href="javascript:;" onclick="deleteRowAction(\&#39;&#39;+row.systemId+&#39;\&#39;)" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>&#39;
 ].join(&#39;&#39;);
}

同時分頁bootstrap已經(jīng)提供了完整的配置（包括每頁顯示的行數(shù)，分頁按鈕，總條數(shù)和總頁數(shù)等等）但是沒有跳轉(zhuǎn)到指定行，所以需要我們自己寫他的樣式定位到相應(yīng)的分頁欄，不過他有相關(guān)的方法提供，

selectPage就是跳到指定頁，我們可以自己系一個方法：

function goPage(){
  var page=$('#pageNum').val();
  $table.bootstrapTable('selectPage',page)
 }

在用其方法時候，要$table.bootstrapTable('selectPage',page)使用。

相關(guān)推薦：

使用React全家桶搭建一個后臺管理系統(tǒng)實例詳解

基于thinkphp的后臺管理系統(tǒng)模板快速搭建

Bootstrap Table快速搭建后臺管理系統(tǒng)

以上是Bootstrap Table搭建后臺管理系統(tǒng)代碼分享的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！