怎么實現(xiàn)BootStrapTable的動態(tài)表格

怎么實現(xiàn)BootStrapTable的動態(tài)表格？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

成都創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站設計、成都網(wǎng)站設計與策劃設計,渝北網(wǎng)站建設哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設10余年,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:渝北等地區(qū)。渝北做網(wǎng)站價格咨詢:028-86922220

本篇文章將為大家介紹如何使用bootstrap table插件來實現(xiàn)動態(tài)表格。

在我們構(gòu)建BootStrapTable(下文中均稱：BsTable)，其中columns參數(shù)作為表格列的內(nèi)容存儲，我們的需求是根據(jù)返回的數(shù)據(jù)動態(tài)的生成columns參數(shù)的內(nèi)容。從而生成動態(tài)表格。

columns參數(shù)格式：類似下文

columns: {
    {
        field: 'Id',
        title: '編號',
    },{
        field: 'name',
        title: '名稱',
    },{
        field: 'sex',
        title: '性別',
        //自定義方法
        formatter: function (value) {
            if (value == 1) {
                return '男';
            } else if (value == 2) {
                retuen '女';
            }
        }
    },
}

需求：通過點擊按鈕發(fā)送ajax請求，針對請求返回的數(shù)據(jù)進行動態(tài)表格的構(gòu)建。

按鈕構(gòu)造：設置點擊事件

<button type="button" class="btn btn-primary" onclick="DataQuery.sqlExecute()">
    <i class="fa fa-check"></i>&nbsp;SQL語句執(zhí)行
</button>

點擊事件編寫：dataQuery.js (注意：這里將逐段解析，最后將貼上完整版代碼)

1、獲取html頁面元素值

由于實現(xiàn)該功能的需要兩個參數(shù)：SQL語句(sql) + 連接信息(connectInfo) ，所以要先從頁面上獲取兩個元素的值：類選擇器選擇元素獲取對應值。

var sql = $('#sql').val();
var connectInfo = $('#connectInfo').val();

2、選定頁面表格元素，發(fā)送ajax請求，構(gòu)建BSTable

頁面上的表格元素：采用beetl的標簽，將重復使用的html代碼用一行代碼標簽代替，方便使用，易于維護。

<#table id="DataQueryTable"/>

　　2.1 ajax請求參數(shù)配置

參數(shù)含義
type請求類型
url請求鏈接地址
contentType發(fā)送給服務器的格式
dataType收到數(shù)據(jù)的格式
data發(fā)送給服務端的數(shù)據(jù)
success請求成功時調(diào)用
error請求失敗時調(diào)用

詳細代碼：

$('#DataQueryTable').bootstrapTable({
    ajax: function (request) {
        $.ajax({
            type: "GET",
            url: Feng.ctxPath + "/dataQuery/list" + "/" + sql + "/" + connectInfo,
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            json: 'callback',
            success: 見下文
            error: 見下文
    })
})

　　2.2 ajax請求成功，根據(jù)返回json數(shù)據(jù)構(gòu)造動態(tài)表頭

2.2.1 初始化自定義動態(tài)表頭數(shù)組

 //定義動態(tài)表頭字段數(shù)組
    var dynamicHeader = [];
    //向數(shù)組中填入屬性
    dynamicHeader.push({
        field: "state",
        check: true
    });

2.2.2 動態(tài)表頭生成

  //針對返回的json數(shù)據(jù)，遍歷json數(shù)據(jù)的key集合
   for (var i = 0; i<(Object.keys(json[0])).length; i++) {
       //獲取對應索引的value值，將獲取的值設置到動態(tài)表頭字段中。
       var property = (Object.keys(json[0]))[i];
       dynamicHeader.push({
           "title": property,
           "field": property,
           //顯示是否顯示隱藏
           switchable: true,
           //是否開啟排序
           sortable: true
       });
   }

這段代碼我們可以結(jié)合瀏覽器F12，查看Object.keys(json[0])中的具體內(nèi)容：模擬一個請求/test。

怎么實現(xiàn)BootStrapTable的動態(tài)表格

2.2.3 構(gòu)造表格，構(gòu)造表格前要進行table銷毀，否則會保留上次加載的內(nèi)容

  $('#DataQueryTable').bootstrapTable('destroy').bootstrapTable({
       //得到的json數(shù)據(jù)，會根據(jù)columns參數(shù)進行對應賦值配置
       data: json,
       //Bstable工具導航條
       toolbar: '#toolbar',
       //瀏覽器緩存，默認為true，設置為false避免頁面刷新調(diào)用瀏覽器緩存
       cache: false,
       //是否顯示行間隔色
       striped: true,
       //分頁方式：client客戶端分頁，server服務端分頁
       sidePagination: "client",
       //排序方式
       sortOrder: "desc",
       //每頁記錄行數(shù)
       pageSize: 25,
       //初始化加載第一頁
       pageNumber: 1,
       //可供選擇的每頁行數(shù)
       pageList: "[25, 50, 100, All]",
       //是否顯示切換按鈕
       showToggle: true,
       //是否顯示所有的列
       showColumns: true,
       //是否顯示導出按鈕(下篇文章將會提到)
       showExport: true,
       //導出數(shù)據(jù)類型(下篇文章將會提到)
       exportDataType: "basic",
       //是否顯示分頁
       pagination: true,
       //是否啟用全匹配搜索，否則為模糊搜索
       strictSearch: true,
       //開啟搜索
       search: true,
       //自定義所生成的動態(tài)表頭放入，結(jié)合上述json數(shù)據(jù)，實現(xiàn)表格數(shù)據(jù)內(nèi)容的構(gòu)建
       columns: dynamicHeader
   });
 },

　　2.3 ajax請求失敗，彈窗報告錯誤信息，頁面重加載

error: function () {
    alert("SQL查詢錯誤，請輸入正確的SQL語句！");
    location.reload();
}

完整js代碼

/**
 *  BsTable動態(tài)表格生成
 */
DataQuery.sqlExecute = function (){

    var sql = $('#sql').val();
    var connectInfo = $('#connectInfo').val();

    $('#DataQueryTable').bootstrapTable({
        ajax: function (request) {
            $.ajax({
                type: "GET",
                url: Feng.ctxPath + "/dataQuery/list" + "/" + sql + "/" + connectInfo,
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                json: 'callback',
                success: function (json) {

                    var dynamicHeader = [];
                    dynamicHeader.push({
                        field: "state",
                        check: true
                    });

                    for (var i = 0; i<(Object.keys(json[0])).length; i++) {
                        var property = (Object.keys(json[0]))[i];
                        //console.log(property);
                        dynamicHeader.push({
                            "title": property,
                            "field": property,
                            switchable: true,
                            sortable: true
                        });
                    }

                    //console.log(Object.keys(json[0]));

                    $('#DataQueryTable').bootstrapTable('destroy').bootstrapTable({
                        data: json,
                        toolbar: '#toolbar',
                        cache: false,
                        striped: true,
                        sidePagination: "client",
                        sortOrder: "desc",
                        pageSize: 25,
                        pageNumber: 1,
                        pageList: "[25, 50, 100, All]",
                        showToggle: true,
                        showColumns: true,
                        showExport: true,
                        exportDataType: "basic",
                        pagination: true,
                        strictSearch: true,
                        search: true,
                        columns: dynamicHeader
                    });
                },
                error: function () {
                    alert("SQL查詢錯誤，請輸入正確的SQL語句！");
                    location.reload();
                }
            });
        }
    });
};

3.測試動態(tài)表格生成結(jié)果

　　3.1 測試分兩部分，首先獲取請求所得到的json數(shù)據(jù)，模擬請求獲取100條數(shù)據(jù)

@RequestMapping(value = "/test")
    @ResponseBody
    public Object test(){
        return iDataQueryService.windQuery("SELECT TOP 100 [OBJECT_ID]\n" +
                "      ,[S_INFO_WINDCODE]\n" +
                "      ,[S_CON_WINDCODE]\n" +
                "      ,[S_CON_INDATE]\n" +
                "      ,[S_CON_OUTDATE]\n" +
                "      ,[CUR_SIGN]\n" +
                "      ,[OPDATE]\n" +
                "      ,[OPMODE]\n" +
                "  FROM [WIND].[db_datareader].[AINDEXMEMBERS]");
    }

　　3.2 查看請求所返回的json數(shù)據(jù)

怎么實現(xiàn)BootStrapTable的動態(tài)表格

　　3.3測試動態(tài)表格生成

上述的請求可以正常返回數(shù)據(jù)，那我們通過ajax請求所構(gòu)建的動態(tài)BSTable呢？

請求為：SQL語句/鏈接信息，ajax請求返回json數(shù)據(jù)，與上述請求一致。

怎么實現(xiàn)BootStrapTable的動態(tài)表格

查看我們的動態(tài)表格生成狀況：

怎么實現(xiàn)BootStrapTable的動態(tài)表格


賓果，至此BootStrapTable動態(tài)表格功能已實現(xiàn)。

關于怎么實現(xiàn)BootStrapTable的動態(tài)表格問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關知識。

新聞名稱：怎么實現(xiàn)BootStrapTable的動態(tài)表格
網(wǎng)站URL：http://muchs.cn/article14/pidcde.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供云服務器、電子商務、關鍵詞優(yōu)化、域名注冊、品牌網(wǎng)站設計、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設