bootstrap-table填坑之旅<一>認識bootstrap-table

時間  2019-11-21
標籤 bootstrap table 之旅 認識 欄目 Bootstarp 简体版
原文   原文鏈接

應公司需求，改版公司ERP的數據顯示樣式。因爲前期開發的樣式是bootstrap，因此選bootstrap-table理所固然(也是由於看了bootstrap-table官網的example功能強大，樣式清爽)。html

而後... ... 開啓bootstrap-table填坑之旅。json

開始就扒本園的資源，確實有很多bootstrap-table的文章。確實寫的不錯很詳細，請恕本菜實在菜了點，看了半天demo的頁面都沒弄出來(勿吐槽~~)。終於11點了.. .. 因而決定跟着官網的小白教程一點點的玩。bootstrap

ready... .. 數組

1. 怎麼把table掛出來服務器

HTML代碼：(只用看一個tr就夠了，寫三行只爲看demo效果)函數

    <table data-toggle="table" id="goods">
        <thead>
            <tr>
                <th data-field="Code">序號</th>
                <th data-field="TuanGouName">商品名稱</th>
                <th data-field="StartDate">開始時間</th>
                <th data-field="EndTime">結束時間</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>九洲奇味餅乾</td>
                <td>2016/10/9 10:15:00</td>
                <td>2016/12/25 11:30:00<td>
            </tr>
            <tr>
                <td>2</td>
                <td>好多魚</td>
                <td>2016/10/9 10:15:00</td>
                <td>2016/12/25 11:30:00<td>
            </tr>
            <tr>
                <td>3</td>
                <td>旺旺雪餅</td>
                <td>2016/10/9 10:15:00</td>
                <td>2016/12/25 11:30:00<td>
            </tr>
         </tbody>
    </table>

終於把table掛出來了，這裏其實就和原來的table同樣寫就好了。工具

2. 加載json數據測試

HTML代碼：spa

    <table id="goods">
        <thead>
            <tr>
                <th data-field="Code">序號</th>
                <th data-field="TuanGouName">商品名稱</th>
                <th data-field="StartDate">開始時間</th>
                <th data-field="EndTime">結束時間</th>
            </tr>
        </thead>
    </table>

js代碼：.net

        /*數據json*/
        var json =  [{"Code":"1","TuanGouName":"好多魚","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
                        {"Code":"2","TuanGouName":"旺旺雪餅","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
                        {"Code":"3","TuanGouName":"旺旺仙貝","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
                        {"Code":"4","TuanGouName":"雪花清爽","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
                        {"Code":"5","TuanGouName":"勇闖天涯","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
                        {"Code":"6","TuanGouName":"九洲奇味餅乾","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"}];
        /*初始化table數據*/
        $(function(){
            $("#goods").bootstrapTable({
                data:json
            });
        });

成功獲取json數據並加載成功。

這裏注意：用json加載數據 table 標籤不能寫 data-toggle="table" 屬性，至於緣由......總之這裏不能寫，寫了就會出這樣的bug。

3. 裝飾table

HTML代碼

<table data-toggle="table" 
       data-row-style="rowStyle">
    <thead>
    <tr>
        <th class="col-xs-4" data-field="name">Name</th>
        <th class="col-xs-1" data-field="stargazers_count">Stars</th>
        <th class="col-xs-1" data-field="forks_count">Forks</th>
        <th class="col-xs-6" data-field="description">Description</th>
    </tr>
    </thead>
    <!--此處忽略數據-->
</table>

js代碼

function rowStyle(value, index) {
    var classes = ['active', 'success', 'info', 'warning', 'danger'];
    if (index % 2 === 0) {
        return { classes: 'success' };
    }
    return {};
}

data-striped屬性true表格爲隔行變色(斑馬紋)，false不使用隔行變色。

data-row-style屬性接收js函數(必須有返回值)，可設置row屬性。

th每列可添加柵格樣式。

在th可設置data-cell-style屬性，一樣接收js函數(必須有返回值)，設置該列單元格樣式。

HTML代碼

<table data-toggle="table" >
    <thead>
    <tr>
        <th data-field="name" data-halign="right" data-align="center">Name</th>
        <th data-field="stargazers_count" data-halign="center" data-align="left">Stars</th>
        <th data-field="forks_count" data-halign="left" data-align="right">Forks</th>
    </tr>
    </thead>
</table>

data-halign設置該列標題對齊，data-align設置該列單元格對齊。

分組列顯示——colspan & rowspan

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

js

        /*列信息*/
        var firstCol = [
                        [{"field":"goodsName","title":"商品名稱","colspan":1,"rowspan":2},
                        {"title":"商品信息","colspan":2,"rowspan":1}],
                        [{"field":"goodsInfo.price","title":"價格","colspan":1,"rowspan":1},
                         {"field":"goodsInfo.date","title":"日期","colspan":1,"rowspan":1}]
                         ];
        /*數據*/
        var data = [{"goodsName":"旺旺仙貝","goodsInfo":{"price":"$26","date":"2018-08-10"}},
                    {"goodsName":"樂事薯片","goodsInfo":{"price":"$18","date":"2020-10-25"}},
                    {"goodsName":"勇闖天涯","goodsInfo":{"price":"$20","date":"2017-01-10"}}];
        /*初始化表格*/
        $(function(){
            $("#goods").bootstrapTable({
                columns: firstCol,
                data: data
            });
        });

分組列組名不須要申明field值，但分組列子列的field值須要帶上列組名(格式：Group.GroupChild)。若是分組列，數據的json也須要作相應的調整。

4. table排序

HTML代碼

    <table id="goods" data-sort-order="desc">
        <thead>
            <tr>
                <th data-sortable="true" data-field="Code">序號</th>
                <th data-sortable="true" data-field="TuanGouName">商品名稱</th>
                <th data-field="StartDate">開始時間</th>
                <th data-field="EndTime">結束時間</th>
            </tr>
        </thead>
    </table>

data-sortable屬性默認爲false，設置爲true，按默認排序方式對該列內容排序。

data-sort-order排序方向，asc升序排列、desc降序排列。

data-sort-name="stargazers_count"這倆屬性找了半天沒找到準確的解釋，從字面意思理解應該是默認的排序函數名和排序方式，總之帶上總沒錯。

5. 單元格 格式化

HTML代碼

    <table id="goods" data-sort-name="stargazers_count"
       data-sort-order="asc">
        <thead>
            <tr>
                <th data-sortable="true" data-formatter="getIndex">下標</th>
                <th data-sortable="true" data-field="Code" data-formatter="setCode">序號</th>
                <th data-sortable="true" data-field="TuanGouName" data-formatter="setName">商品名稱</th>
                <th data-sortable="true" data-field="name">名稱</th>
                <th data-field="EndTime">結束時間</th>
            </tr>
        </thead>
    </table>

js代碼

        function getIndex(val,row,index){
            return index + 1;
        }
        function setCode(val){
            return "<a href='#'>" + val + "</a>";
        }
        function setName(val){
            return "<span style='color:red;font-weight:900;'>" + val + "</span>";
        }

data-formatter屬性能夠格式化該列單元格，data-formatter接收js函數(必須有返回值)該函數能夠獲取當前行的下標(注意：獲取下標參數必須有row，不然index值爲undefined)，函數還能夠改變單元格元素顯示方式，例如：a button .. ...

6. 顯示隱藏列

HTML代碼

    <table id="goods" data-sort-name="stargazers_count" data-show-columns="true"
       data-sort-order="asc">
        <thead>
            <tr>
                <th data-sortable="true" data-field="Code" >序號</th>
                <th data-sortable="true" data-field="TuanGouName" data-switchable="false">商品名稱</th>
                <th data-sortable="true" data-field="name">名稱</th>
                <th data-sortable="true" data-field="EndTime" data-visible="false">結束時間</th>
            </tr>
        </thead>
    </table>

data-show-columns屬性爲「true」可設置隱藏顯示某列，對應列data-switchable屬性設置爲「false」該列不可隱藏，默認值爲true；data-visible屬性設置爲「false」該列默認被隱藏，默認值爲true。

7. 選擇列 checkbox

HTML代碼

    <table id="goods" data-sort-name="stargazers_count" data-show-columns="true"
           data-sort-order="asc">
        <thead>
            <tr>
                <th data-field="state" data-checkbox="true"></th>
                <th data-sortable="true" data-field="Code" >序號</th>
                <th data-sortable="true" data-field="TuanGouName" data-switchable="false">商品名稱</th>
                <th data-sortable="true" data-field="name">名稱</th>
                <th data-sortable="true" data-field="EndTime" data-visible="false">結束時間</th>
            </tr>
        </thead>
    </table>

<th data-field="state" data-checkbox="true"></th>這一列是checkbox選擇列。據測試，data-click-to-select屬性的值與選擇列關係不大，有木有或者值true false都不影響checkbox列的顯示和使用。

設置data-single-select="true"，checkbox就只能選擇一行。

    <table id="goods" data-sort-name="stargazers_count" data-show-columns="true"
           data-sort-order="asc" data-click-to-select="true" data-single-select="true">
        <thead>
            <tr>
                <th data-field="state" data-checkbox="true">選擇</th>
                <th data-sortable="true" data-field="Code" >序號</th>
                <th data-sortable="true" data-field="TuanGouName" data-switchable="false">商品名稱</th>
                <th data-sortable="true" data-field="name">名稱</th>
                <th data-sortable="true" data-field="EndTime" data-visible="false">結束時間</th>
            </tr>
        </thead>
    </table>

經過js指定行被選中，指定行不可操做。

function stateFormatter(value, row, index) {
    if (index === 2) {
        return {
            disabled: true
        };
    }
    if (index === 0) {
        return {
            disabled: true,
            checked: true
        }
    }
    return value;
}

給checkbox設置data-formatter屬性，經過disabledchecked控制checkbox是否可用和是否被選中。

獲取選中行信息

html

    <div class="toolbar">
        <button id="get" class="btn btn-default">獲取商品名稱</button>
    </div>
    <table id="table" data-show-columns="true" data-height="700" data-toolbar=".toolbar"></table>

js

        /*獲取選中行對象*/
        function getContent(){
            var index = $("#table").find("tr.danger").data("index");
            return $("#table").bootstrapTable('getData')[index];
        }
        /*初始化table數據*/
        $(function(){
            $("#table").bootstrapTable('destroy').bootstrapTable({
                columns:columns,
                data:json
            });
            $("#table").on("click-row.bs.table",function(e,row,ele){
                $(".danger").removeClass("danger");
                $(ele).addClass("danger");
            });
            $("#get").click(function(){
                alert("商品名稱：" + getContent().TuanGouName);
            })
        });

給table綁定click-row.bs.table函數(行點擊事件)，callback(回調)函數列表：e(Event：事件對象)，row(Rows：table行)，ele(Element：選中行對象)。給選中行添加顏色樣式，移除上一個被選行樣式。

getContent()函數分析：

var index 獲取被選中行下表，find搜索被選中行(即帶樣式的行)，data被選中行在數據集中的下標。

return 返回table中被選中行對象。

點擊查詢按鈕click事件：

既然getContent()已獲取被選中行對象，須要獲取哪一個單元格，就調哪一個單元格的field值。

8. card-view 卡片視圖

HTML代碼

<table data-toggle="table"
       data-card-view="true">
    <thead>
    <tr>
        <th data-field="name">Name</th>
        <th data-field="stargazers_count">Stars</th>
        <th data-field="forks_count">Forks</th>
        <th data-field="description">Description</th>
    </tr>
    </thead>
</table>

data-card-view改變table視圖方式，true:卡片視圖，false:表格視圖。

9. toolbar工具欄(經常使用 搜索 刷新 切換試圖 篩選列)

HTML代碼

    <table id="goods"
        data-search="true"
                data-show-refresh="true"
                data-show-toggle="true"
                data-show-columns="true">
        <thead>
            <tr>
                <th data-sortable="true" data-field="Code" >序號</th>
                <th data-sortable="true" data-field="TuanGouName" data-switchable="false">商品名稱</th>
                <th data-sortable="true" data-field="name">名稱</th>
                <th data-sortable="true" data-field="EndTime" data-visible="false">結束時間</th>
            </tr>
        </thead>
    </table>

data-search：搜索(自動搜索，輸入後自動搜索)

data-show-refresh：刷新

data-show-toggle：切換試圖(卡片試圖 and 表格試圖)

data-show-columns：篩選列

自定義添加工具欄按鈕

<div id="toolbar" class="btn-group">
    <button type="button" class="btn btn-default">
        <i class="glyphicon glyphicon-plus"></i>
    </button>
    <button type="button" class="btn btn-default">
        <i class="glyphicon glyphicon-heart"></i>
    </button>
    <button type="button" class="btn btn-default">
        <i class="glyphicon glyphicon-trash"></i>
    </button>
</div>
<table data-toggle="table"
       data-toolbar="#toolbar">
    <thead>
    <tr>
        <th data-field="name">Name</th>
        <th data-field="stargazers_count">Stars</th>
        <th data-field="forks_count">Forks</th>
        <th data-field="description">Description</th>
    </tr>
    </thead>
</table>

data-toolbar添加自定義工具欄(value建議爲ID值)。

10.分頁pagination

HTML代碼

    <table id="goods" data-query-params="queryParams" data-pagination="true"></table>

js代碼

        function queryParams() {
            return {
                type: 'owner',            
                sort: 'updated',     
                direction: 'desc',            //排序方向
                per_page: 10,                //一次加載數據條數
                page:1                        //加載數據第幾回
            };
        }

data-page-list定義每頁顯示條數，接受數組。例：data-page-list="[2,4,6,10,20]"

data-pagination值爲true，表格使用分頁，data-query-params分頁配置參數，接受js函數(必須有返回值)。

direction排序方向：asc升序，desc降序

per_page一次性加載數據條數：int整數

page請求數據次數

例：如共有190條數據，page值爲1，per_page值爲100。table加載第1~100條數據，

page值爲2，per_page值爲100。table加載第201~300條數據。

注意：data-query-params僅對請求數據地址有對應參數的返回值才生效，對json拉取到本頁解析的數據和本頁直接生成的數據皆無效。詳細DEMO地址，不懂的本身多調試幾遍，這裏我調了半個小時。

關於服務器端分頁請參考這個demo

更多詳細仍是看官方文檔：地址

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程