bootstrap-table插件使用心得

bootstrap-table.js插件是用來顯示多條數據，顯示列表信息的；

寫在前面：參考官網

http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/

　　

1.使用：

a.引入庫和依賴庫

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

　b.兩種啓用插件的方式。

data屬性方式啓用插件：

普通的table標籤里加data-toggle='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>

　　js方式啓用插件：

<table id="table"></table>

　　

$('#table').bootstrapTable({
    columns: [{
        field: 'id',
        title: 'Item ID'
    }, {
        field: 'name',
        title: 'Item Name'
    }, {
        field: 'price',
        title: 'Item Price'
    }],
    data: [{
        id: 1,
        name: 'Item 1',
        price: '$1'
    }, {
        id: 2,
        name: 'Item 2',
        price: '$2'
    }]
});

　　2.經常使用的參數設置

data-height='540'   不設置此屬性當數據不少時，上下滾動表頭不固定在頭部，會隨着上下滾動；

data-pagenation='true'   顯示分頁條

3.一些注意點

a.在js中設置的屬性寫成striped，要是在html設置則要寫成data-striped;

b.onUncheck事件觸發，是checkbox失去選擇時觸發，radio失去選擇不觸發；

c.加載數據，能夠定義url屬性值，使用插件標準的加載方式。也能夠本身寫$.ajax()請求數據，而後拿到數據後再調方法，渲染table，

$('#table').bootstrapTable('load',e.data);

d.列參數的屬性formatter，能夠對此列的數據進行運算，這個實際挺有用的。應用場景多。見下面的例子；

e.rowStyle屬性可對每一行設置。根據index值可對任一行設置自定義樣式，可是好像背景色不容易設置；

f.onClickRow（row, $element）點擊某一行的響應事件，row是此行的數據，$($element).parent().parent(.selected)；可拿到這一行的jq對象;

4.例子：

<table id="table" class="table table-striped table-bordered table-hover" data-height="540" data-pagination="true" data-page-size="10">
                                                </table>

var table = $("#table");
            // 初始化表格
            table.bootstrapTable({
                method:'GET',
                cache:false,
                striped:true,
                url: url,//服務器數據的加載地址
                pagination:true,//是否顯示分頁
                sortable:true,//是否啓用排序
                sortOrder:'desc',
                rowStyle:rowStyle,
                sidePagination:'client',
                pageList:[10,20,50,100],
                clickToSelect:true,
                columns: [
                    {checkbox: true},
                    {field: 'id', title:'序號'},
                    {field: 'account', title:'登錄帳號'},
                    {field: 'mobile', title:'手機號'},
                    {field: 'email', title:'郵箱'},
                    //{field: 'pwd', title: '登錄密碼'},
                    {field: 'status', title:'帳號狀態',formatter:statusFormatter},
                    {field: 'lastLoginTime', title: '最後登入時間'},
                    {field: 'lastLoginIp', title: '最後登入IP'},
                    {field: 'remark', title: '備註'}
                ]
            });
            function rowStyle(row,$ele){
                console.log(row);
            },
            function statusFormatter(value,row,index){
                return value == 0 ? '禁用':'啓用'
            }

　　

我是分割線我是分割線我是分割線我是分割線我是分割線我是分割線我是分割線 2017-12-22

1.以前發現bootstrap-table的onCheck事件不能監聽radio列，只能監聽checkbox列選中。

處理方法是：須要設置radio列的設置checobox列，另加上參數 singleSelect:true ;

2.sidePagination:'server'須要傳參數，參數寫在queryParams: queryParams, //參數  ，不一樣的設置傳的參數不一樣。具體哪些不一樣等下次更新

 

 

分割線

 

接着上次：先上一官網上queryParams參數的截圖

根據這裏的介紹翻譯一下queryParams的用法：

當請求遠程數據時，你能夠經過修改queryParams參數附加額外的數據；假如queryParamsType 設置是'limit‘，那麼傳給queryParams函數的參數對象有limit, offset, search, sort, order這五個屬性，假如queryParamsType不是'limit’，例如爲空值時，那麼傳給queryParams函數的參數對象有pageSize, pageNumber, searchText, sortName, sortOrder這五個屬性。另外你能夠設置return false ,阻止請求；

 

 

華麗的分割線---------2018-1-11

1.假如你須要一行顯示兩個字段的拼接結果。好比，後臺傳過來的數據有姓firstName，名lastName，而你須要的是顯示全名，fullName；能夠以下

2.假如你須要點擊某一列彈窗。好比，有一列是姓名，須要點擊這一列的任一行，彈出顯示該行的具體信息。你會想到用formmatter；這裏用不一樣的方法；以下：

就是像這樣，用點擊cell方法，判斷一下field的值，進行處理；

3.增長一個顯示序號的列，以下：

4.經過$('#table').bootstrapTable('load',e.data);渲染表格時，須要設置sidePagination:'clients'；