Bootstrap Table急速完美搭建後臺管理系統

Bootstrap Table是基於 Bootstrap 的 jQuery 表格插件，經過簡單的設置，就能夠擁有強大的單選、多選、排序、分頁，以及編輯、導出、過濾（擴展）等等的功能：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

如今作的一個app管理以及後臺配置系統，須要針對不一樣的城市做相應的定製化的配置，對一些後臺數據也作一些展現和操做，因此每個模塊基本都會有表格的展示形式，這樣作的好處就是直觀方便操做。對於用什麼table插件，無疑就是bootstrap table了，功能強大文檔完善，而且咱們項目裏也是基於bootstrap佈局的，因此就選擇了他，接下來就貼一些項目代碼來展現（僅供參考），本身也作一下筆記。

首先是用到了bootstrap的Tab來切換不一樣的表格用於展現，切換菜單代碼以下：

1 　　　　<div class="report-count">被舉報次數：${count}次</div>
2       <ul class="report-btn nav nav-tabs" id="myTab" >
3              <li class="pending active"><a href="#padding" onclick="freashTable(0)"  data-toggle="tab">待處理：${stateCountList[0]}次</a><i class=""></i></li>
4              <li class="success-report"><a href="#success-report" onclick="freashTable(1)" data-toggle="tab">舉報成立：${stateCountList[1]}次</a></li>
5              <li class="fail-report"><a href="#fail-report" onclick="freashTable(2)" data-toggle="tab">舉報不成立：${stateCountList[2]}次</a></li>
6        </ul> 

View Code

相信對於bootstrap並不陌生，給每個須要切換的標籤 加上｛data-toggle="tab"｝，而且增長錨點用於匹配到對應的切換的子內容｛錨點：href="#padding"｝，切換對應的字內容代碼以下：

　　<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>

View Code      　　

經過給每個須要切換子內容元素設置對應上述錨點的id｛#padding｝,而且不要忘了給外層容器加（tab-content），給子元素容器加class(tab-pane fade in active),有active的就是默認選中的。每個子內容都有一個table元素，因此這裏就是咱們須要的table，切換每個tab就會刷新顯示對應的table數據。這裏咱們採用動態的生成table的方式加載數據。

 1 var $table=$('.table')
 2 function initTable(index){
 3      $table.bootstrapTable({
 4         url: '${basePath}/interacts/complain/getComplainList?pkid='+$("#pkid").val()+'&state='+index,  //請求數據地址url
 5         height: getHeight(),  //獲取行高
 6         striped: true,  //設置爲 true 會有隔行變色效果
 7         search: true, //爲true會有搜索框
 8         showRefresh: true, //爲true有刷新按鈕
 9         showColumns: true,  //是否顯示 內容列下拉框
10         minimumCountColumns: 2,//當列數小於此值時，將隱藏內容列下拉框
11         clickToSelect: true,  //點擊行是checkbox或者rediobox選中
12         detailView: true,  //設置爲 true 能夠顯示詳細頁面模式。table第一行會有+號，點擊會出現更詳細的該行信息
13         detailFormatter: 'detailFormatter',  //格式化詳細頁面模式的視圖。
14         pagination: true, //展現有分頁
15         paginationLoop: false,  //循環分頁
16         sidePagination: 'server',  //設置在哪裏進行分頁，可選值爲 'client' 或者 'server'。設置 'server'時，必須設置 服務器數據地址（url）或者重寫ajax方法
17         silentSort: false,  //設置爲 false 將在點擊分頁按鈕時，自動記住排序項。僅在 sidePagination設置爲 server時生效19         escape: true, //轉義HTML字符串，替換 &, <, >, ", `, 和 ' 字符.
20         searchOnEnterKey: true, //設置爲 true時，按回車觸發搜索方法，不然自動觸發搜索方法
21         idField: 'systemId', //指定主鍵
22         maintainSelected: true, //設置爲 true 在點擊分頁按鈕或搜索按鈕時，將記住checkbox的選擇項
23         toolbar: '#toolbar', //一個jQuery 選擇器，指明自定義的toolbar 
24         columns: [
25                 {field: 'complain_reason', title: '舉報類型',align: 'center'},
26                 {field: 'nick_name', title: '舉報人',align: 'center'},
27                 {field: 'create_time', title: '舉報時間',formatter:'timeFormat' },
28                 {field: 'complain_state', title: '舉報狀態',formatter:'stateFormat'}
29                 {field: 'action', title: '操做', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}
30             ]
31         });
32 }    

View Code

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

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

對應的field爲action的那一行就是操做按鈕了，格式化操做按鈕代碼以下：

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

View Code

 同時分頁bootstrap已經提供了完整的配置（包括每頁顯示的行數，分頁按鈕，總條數和總頁數等等）可是沒有跳轉到指定行，因此須要咱們本身寫他的樣式定位到相應的分頁欄，不過他有相關的方法提供，

selectPage就是跳到指定頁，咱們能夠本身系一個方法：

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

View Code

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