bootstrap-table使用詳解

尷尬，標記果然到了一周之后。。。。

 

首先引入文件不必提，引入bootstrap和bootstrap-table

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<-- put your locale files after bootstrap-table.js -->
<script src="bootstrap-table-zh-CN.js"></script>

有三種設置table的方式，以下：

1、對於靜態的可以直接設置table

<table data-toggle="table">
    <thead>
        <tr>
            <th>Item ID</th>
            <th>Item Name</th>
            <th>Item Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Item 1</td>
            <td>$1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Item 2</td>
            <td>$2</td>
        </tr>
    </tbody>
</table>

2、設置遠程的鏈接渲染table

<table data-toggle="table" data-url="data1.json">
    <thead>
        <tr>
            <th data-field="id">Item ID</th>
            <th data-field="name" data-width="60">Item Name</th>
            <th data-field="price"  data-formatter="functionName">Item Price</th>
        </tr>
    </thead>
</table>

這里的field是根據遠程連接返回的不同key值來設置的，

data-width:設置這一列的寬度

data-formatter 設置的是這一列渲染的展示方法，如下：

function vestSatusFormatter(val,row,index){
if(val)
return '<span title="'+val+'" >'+val+'</span>'

else 

return '無數據'
}  

val對應這個field返回的值，row是這一行的所有數據，index對應的第幾條數據（從0開始），return 返回的即前台用戶看到的呈現結果；

3、通過table的id設置

<table id="table" data-url="data1.json"></table> 
$('#table').bootstrapTable('destroy').bootstrapTable({
 url: 'data1.json', // 改變當前table的鏈接 ，請求后台的URL（*）可以不需要
method: 'post',    //請求方式（*）
toolbar: toolbar, //工具按鈕用哪個容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*）
pagination: true, //是否顯示分頁（*）
sortable: false, //是否啟用排序
sortOrder: "asc", //排序方式
queryParams: queryParams, //傳遞參數（*），這里應該返回一個object，即形如{param1:val1,param2:val2}
sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*）
pageNumber:1, //初始化加載第一頁，默認第一頁
pageSize: 20, //每頁的記錄行數（*）
pageList: [20, 50, 100], //可供選擇的每頁的行數（*）
columns: [{
        field: 'id',
        title: 'Item ID'
    }, {
        field: 'name',
        title: 'Item Name'
    }, {
        field: 'price',
        title: 'Item Price'
    }, ]
});

　　根據搜索條件刷新table

$("#"+domId).bootstrapTable('destroy').bootstrapTable({
        striped:true,
        sidePagination: 'server',
        pagination:true,
        pageSize: 10,
        pageList: [10, 20, 50, 100, 200,400],
        queryParams: function(param){
            var query;  
            if(type && search){
                params['searchType'] = “你的搜索值”;
                params['searchContent'] = "你的搜索值";
            };
            query=params;
            $.extend(query,param);            
            return query;
        },
        formatLoadingMessage: function(){
          return '正在加載...';
        },
        formatNoMatches: function(){
          return '沒有找到數據~';
        },
        formatShowingRows: function(pageFrom, pageTo, totalRows){
          return '共'+totalRows+'條，顯示'+pageFrom+'到'+pageTo+'條記錄';
        },
        formatRecordsPerPage: function (pageNumber) {
             return '每頁顯示 ' + pageNumber + ' 條記錄';
        }
      });

另外的是涉及到后台返回的參數跟原框架的不同，修改

修改方法
 responseHandler:function (res) {
            return {
                rows:res.list  //返回的數據詳情
                total:res.total_count, //總條數
            };
        },                

 

涉及到保存分頁的問題可能會修改bootstrap-table.js源碼,主要用到一個方法$(table).bootstrapTable('getOptions')

在js里定義原型方法 

BootstrapTable.prototype.getPage = function (params) { 
　　return {pageSize: this.options.pageSize, pageNumber: this.options.pageNumber};
}; //這個只是提供更簡潔的一種方法，不一定需要，看個人情況

並且定義該方法 大概在3015行左右

var allowedMethods = [
'getOptions','getPage',
'getSelections', 'getAllSelections', 'getData'

...

]

-----------------------------

下面可以利用該方法

function setOptions(table,sessionName) {
    //獲取到當前頁碼的相關信息
    var options = $(table).bootstrapTable('getOptions'),
        Obj = {
            "limit":options.pageSize,
            "offset":(options.pageNumber - 1)*options.pageSize,
            "sort":options.sortName,
            "order":options.sortOrder
        };    
}

最后的是一點展示方面的問題，畢竟是一枚前端仔，你懂得，

有些table比較高可以設置height控制頭部固定，但是會影響拖拽的效果所以要加這一句

<table id="table" class="data-table" data-height="600" ></table> 
$(window).resize(function () {
      $('#table').bootstrapTable('resetView');
   });

當然，如果你的th需要換行，需要這些設置

#table{
  table-layout: fixed;
}
#tabletd{
   word-break:break-all;
   word-wrap:break-word;
}
.fixed-table-container thead th .th-inner{
    white-space: pre-line !important;
}

 

暫時想到的只有這些，如果有什么不對的地方歡迎指出，蟹蟹~