bootstrap-table 初始化資料及使用問題
阿新 • • 發佈:2019-01-01
最近因為要寫一個簡單的頁面,用於展示資料並有匯出功能,就立馬想到了bootstrap-table,因為它簡單,封裝比較好,更重要的是,個人看著比較好看。
1.首先引用必須的檔案
<!--引入jquery元件 --> <script src="../assets/jquery.min.js"></script> <!--引入bootstrap3元件 --> <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css"> <script src="../assets/bootstrap/js/bootstrap.min.js"></script> <!--引入bootstrap-table元件 --> <link rel="stylesheet" href="../assets/bootstrap-table/bootstrap-table.css"> <script src="../assets/bootstrap-table/bootstrap-table.js"></script> <link rel="stylesheet" href="../assets/examples.css"> <!--引入bootstrap匯出功能元件 --> <script src="../js/bootstrap-table-export.js"></script> <script src="../js/tableExport.js"></script>
2.再寫html
<div class="form-inline" id="toolbar"> <div class="col-sm-4"> <div class="dropdown"> <select id="tableType" class="form-control" > <option value="">景區遊客出行方式(省內)</option> </select> </div> </div> <div class="col-sm-4"> <div class='input-group date col-sm-12' id='datetimepicker1'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> <div class="col-sm-2"> <button id="btn_select" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 查詢 </button> </div> <div class="col-sm-2"> <select id="sel_exportoption" class="form-control"> <option value="">匯出本頁</option> <option value="all">匯出全部</option> <option value="selected">匯出選中</option> </select> </div> </div> <table id="tb_departments"> <thead> <tr> <th data-field="address" data-checkbox="true">ID</th> <th data-field="quxian">使用者名稱</th> <th data-field="tatalnum">真實姓名</th> <th data-field="tataktime">座機</th> <th data-field="moretwonum">手機</th> <th data-field="moretwotime">使用者型別</th> </tr> </thead> </table> </div>
頁面效果是這樣的:
上面效果圖是初始化表格之後的,那就看看怎麼初始化的
3.初始化表格
你也可以把列加上,加上就這麼寫$('#tb_departments').bootstrapTable({ data:json, toolbar: '#toolbar', //工具按鈕用哪個容器 striped: true, //是否顯示行間隔色 cache: false, //是否使用快取,預設為true,所以一般情況下需要設定一下這個屬性(*) pagination: true, //是否顯示分頁(*) sortable: false, //是否啟用排序 sortOrder: "asc", //排序方式 //queryParams: oTableInit.queryParams,//傳遞引數(*) sidePagination: "client", //分頁方式:client客戶端分頁,server服務端分頁(*) pageNumber: 1, //初始化載入第一頁,預設第一頁 pageSize: 10, //每頁的記錄行數(*) pageList: [10, 25, 50, 100], //可供選擇的每頁的行數(*) clickToSelect:true, showExport: true, //是否顯示匯出 exportDataType: "basic" //basic', 'all', 'selected'. });
columns: [{
checkbox: true
}, {
field: 'id',
title: '地市'
}, {
field: 'name',
title: '區縣'
} ]
加上columns引數就行了。
這樣就初始化完了。
遇到的問題:
1.時間控制元件
先引入檔案
<!--引入bootstrap時間控制元件 -->
<link rel="stylesheet" href="../js/date3/bootstrap-datetimepicker.min.css"/>
<script src="../js/moment-with-locales.js"></script>
<script src="../js/date3/bootstrap-datetimepicker.min.js"></script>
我用的是strap3,就在網上隨便找了個bootstrap時間控制元件,但是不行,在網上搜了搜,原來是因為官網上的時間控制元件都是基於strap2的,所以網上查出來的大多也都是基於2的。那我直接對應版本直接下了個基於3的就行了。
2.check表格問題
剛開始我就按照貼出來的程式碼一樣,結果複選框時預設選中,我以為這是一個屬性呢,就在官網上找找看看有沒有預設不選中的,結果找了半天也沒有,沒辦法了,我就除錯了下程式碼,在js檔案裡面發現了這段程式碼
原來它是這樣初始化列表的,怪不得, 那我看bootstrap-table.js檔案就行了,就發現了這段
sprintf(' disabled="%s"', !column.checkboxEnabled ||
(value && value.disabled) ? 'disabled' : undefined) +
' />',
原來只要是複選框那一列有值就會被初始化選中,知道問題了解決就簡單了,直接把data-field="address" 屬性去掉就行了。
小結一下吧
bootstrap有很多很多實用又簡單的功能,參考官網就行了點選開啟連結
還有就是遇到問題一定要除錯,看原始碼,這樣才能找到問題的根本原因。