Bootstrap Table 學(xué)習筆記之表格參數(shù)（一）

官方文檔地址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

使用之前加上頭文件：

    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="bootstrap-table/bootstrap-table.css">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <script src="bootstrap-table/bootstrap-table.js"></script>
    <script src="bootstrap-table/bootstrap-table-zh-CN.js"></script>

data-toggle

不寫JavaScript直接啟用table。
  • 使用方法：無需編寫 JavaScript 啟用 bootstrap table，對普通的 table 設(shè)置 data-toggle="table" 即可。
  • 代碼示例：
<table data-toggle="table">
     <thead>
        <tr>
            <th>姓名</th>
            <th>年齡</th>
            <th>證件號</th>
        </tr>
     </thead>
     <tbody>
        <tr>
            <td>張三</td>
            <td>18</td>
            <td>11122</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>26</td>
            <td>33322</td>
        </tr>
     </tbody>
</table>
  • 效果：
image.png

實際情況下我們一般使用JavaScript方式來啟用Bootstrap Table，代碼如下：

<body>
    <table id="table"></table>
</body>
<script>
    $('#table').bootstrapTable({
        columns: [{
            field: 'name',
            title: '姓名'
        }, {
            field: 'age',
            title: '年齡'
        }, {
            field: 'id',
            title: '證件號'
        }],
        data: [{
            name: '張三',
            age: '18',
            id: '11122'
        }, {
            name: '李四',
            age: '26',
            id: '33322'
        }]
    });
</script>

顯示效果同上。
columns為列配置項，data為填入表格的數(shù)據(jù)，數(shù)據(jù)格式為json。

url

服務(wù)器數(shù)據(jù)的加載地址。實際應(yīng)用中我們不會把數(shù)據(jù)寫在前臺然后用data來加載，而是從后臺請求數(shù)據(jù)填入表格中，url便是后臺地址。
  • 代碼示例：
<body>
    <table id="table"></table>
</body>
<script>
    $('#table').bootstrapTable({
        url: 'data/data1.json',
        columns: [{
            field: 'name',
            title: '姓名'
        }, {
            field: 'age',
            title: '年齡'
        }, {
            field: 'id',
            title: '證件號'
        }]
    });
</script>

這里沒有寫后臺，就用本地文件data1.json來代替。data1.json文件內(nèi)容如下：

[{"name":"張三","age":"18","id":"11122"},{"name":"李四","age":"26","id":"22233"}]

classes

表格的類名稱?？捎玫臉邮揭奲ootstrap全局css樣式。

height

表格高度，數(shù)據(jù)類型為number。

undefinedText

當數(shù)據(jù)為 undefined 時顯示的字符，默認是"-"，可以自己定義，例如:
    $('#table').bootstrapTable({
        url: 'data/data1.json',
        columns: [{
            field: 'name',
            title: '姓名'
        }, {
            field: 'age',
            title: '年齡'
        }, {
            field: 'id',
            title: '證件號'
        }],
        undefinedText:'沒有數(shù)據(jù)'
    });

添加一項數(shù)據(jù)：{"name":"李四","age":"26"}，項“id”沒有數(shù)據(jù)，顯示效果則為：

image.png

striped

設(shè)置為true時有隔行變色的效果，默認是false。

排序：

sortName

定義排序列,通過url方式獲取數(shù)據(jù)填寫字段名，否則填寫下標。

sortOrder

定義排序方式 'asc' 或者 'desc'，'asc'為升序，'desc'為降序。
  • 代碼示例：
<body>
    <table id="table"></table>
</body>
<script>
    $('#table').bootstrapTable({
        url: 'data/data1.json',
        columns: [{
            field: 'name',
            title: '姓名'
        }, {
            field: 'age',
            title: '年齡'
        }, {
            field: 'id',
            title: '證件號'
        }],
        undefinedText:'沒有數(shù)據(jù)',
        striped:true,
        sortName:'age',
        sortOrder:'asc'
    });
</script>
  • 效果：
image.png

分頁:

pagination

默認false,設(shè)置為 true 會在表格底部顯示分頁條。

pageSize

每頁顯示的數(shù)據(jù)條數(shù)，數(shù)據(jù)類型為Number。

pageNumber

第一頁的頁碼數(shù)，數(shù)據(jù)類型為Number。

paginationPreText

指定分頁條中上一頁按鈕的圖標或文字，默認是“<”。

paginationNextText

指定分頁條中下一頁按鈕的圖標或文字，默認是“>”。
  • 示例代碼：
<body>
    <table id="table"></table>
</body>
<script>
    $('#table').bootstrapTable({
        url: 'data/data1.json',
        columns: [{
            field: 'name',
            title: '姓名'
        }, {
            field: 'age',
            title: '年齡'
        }, {
            field: 'id',
            title: '證件號'
        }],
        undefinedText:'沒有數(shù)據(jù)',
        striped:true,
        sortName:'age',
        sortOrder:'asc',
        pagination:'true',
        pageSize:1,
        pageNumber:1,
        paginationPreText:'<--',
        paginationNextText:'-->'
    });
</script>
  • 效果：
image.png

paginationVAlign

指定分頁條在垂直方向的位置。'top' or 'bottom' or 'bonth'。

paginationHAlign

指定分頁詳細信息在水平方向的位置。'left' or 'right'。
  • 例如我想使分頁條上下都有，并且偏左側(cè)，可以這么寫代碼：
<body>
    <table id="table"></table>
</body>
<script>
    $('#table').bootstrapTable({
        url: 'data/data1.json',
        columns: [{
            field: 'name',
            title: '姓名'
        }, {
            field: 'age',
            title: '年齡'
        }, {
            field: 'id',
            title: '證件號'
        }],
        undefinedText:'沒有數(shù)據(jù)',
        striped:true,
        sortName:'age',
        sortOrder:'asc',
        pagination:'true',
        pageSize:1,
        pageNumber:1,
        paginationPreText:'<--',
        paginationNextText:'-->',
        paginationVAlign:'both',
        paginationHAlign:'left'
    });
  • 效果：
image.png

搜索框

search

默認為false，設(shè)置為true時啟用搜索框。

searchOnEnterKey

設(shè)置為 true時，按回車觸發(fā)搜索方法，否則無需按鍵自動觸發(fā)搜索方法，默認為false。

searchText

設(shè)置初始搜索文字

strictSearch

設(shè)置為 true啟用全匹配搜索，否則為模糊搜索
  • 代碼示例：
<body>
    <table id="table"></table>
</body>
<script>
    $('#table').bootstrapTable({
        url: 'data/data1.json',
        columns: [{
            field: 'name',
            title: '姓名'
        }, {
            field: 'age',
            title: '年齡'
        }, {
            field: 'id',
            title: '證件號'
        }],
        undefinedText:'沒有數(shù)據(jù)',
        striped:true,
        sortName:'age',
        sortOrder:'asc',
        search:'true',
        searchOnEnterKey:true,
        searchText:'張三',
        strictSearch:true
    });
</script>
  • 效果
    初始：
image.png

搜索李四：

image.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Bootstrap是什么？ 一套易用、優(yōu)雅、靈活、可擴展的前端工具集--BootStrap。GitHub上介紹 的...
    凜0_0閱讀 11,155評論 3贊 184
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,715評論 19贊 139
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 14,206評論 1贊 92
  • 1.時間不夠 2.大不讓小 3.老大認為以自己為主 4.老二干憂老大 5.老大吃老二的醋 一派寵老大 |二派寵老二...
    心理師劉津伶閱讀 217評論 0贊 0
  • “初中就來一場轟轟烈烈的戀愛吧！” 當年的隨口一說，沒想到都成了事實。 初一開學(xué)是8月31日，我忘不了那天。 一切...
    麋鹿kid閱讀 233評論 2贊 0

友情鏈接更多精彩內(nèi)容