Detailliertes Tutorial zur dynamischen Tabelle von BootStrapTable [mit Code]

In diesem Artikel wird erläutert, wie Sie das Bootstrap-Tabellen-Plug-in zum Implementieren dynamischer Tabellen verwenden.

Empfohlenes Tutorial: Bootstrap-Tutorial

Wenn wir BootStrapTable (im Folgenden als: BsTable bezeichnet) erstellen, wo Spalten Parameter werden als Inhalte von Tabellenspalten gespeichert. Unsere Anforderung besteht darin, den Inhalt von Spaltenparametern basierend auf den zurückgegebenen Daten dynamisch zu generieren. Dadurch werden dynamische Tabellen generiert.

Spaltenparameterformat: ähnlich dem folgenden

columns: {
    {
        field: 'Id',
        title: '编号',
    },{
        field: 'name',
        title: '名称',
    },{
        field: 'sex',
        title: '性别',
        //自定义方法
        formatter: function (value) {
            if (value == 1) {
                return '男';
            } else if (value == 2) {
                retuen '女';
            }
        }
    },
}

Anforderung: Senden Sie eine Ajax-Anfrage, indem Sie auf die Schaltfläche klicken, und erstellen Sie eine dynamische Tabelle basierend auf den von der Anfrage zurückgegebenen Daten.

Schaltflächenstruktur: Klickereignis festlegen

<button type="button" class="btn btn-primary" onclick="DataQuery.sqlExecute()">
    <i class="fa fa-check"></i> SQL语句执行
</button>

Klickereignis schreiben: dataQuery.js (Hinweis: Dies wird Stück für Stück analysiert, Die vollständige Version wird am Ende gepostet werden Code)

1. Holen Sie sich den HTML-Seitenelementwert

Da zur Implementierung zwei Parameter erforderlich sind Funktion: SQL-Anweisung (sql) + Verbindungsinformationen (connectInfo), daher müssen Sie zunächst die Werte der beiden Elemente von der Seite abrufen: Der Klassenselektor wählt das Element aus, um den entsprechenden Wert zu erhalten.

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

2. Wählen Sie das Tabellenelement auf der Seite aus, senden Sie eine Ajax-Anfrage und erstellen Sie die BSTable

Das Tabellenelement auf der Seite : Beetl-Tags verwenden. Ersetzen Sie den wiederverwendeten HTML-Code durch eine Reihe von Code-Tags, die bequem zu verwenden und einfach zu warten sind.

<#table id="DataQueryTable"/>

　2.1 Ajax-Anfrageparameterkonfiguration

参数	含义
type	请求类型
url	请求链接地址
contentType	发送给服务器的格式
dataType	收到数据的格式
data	发送给服务端的数据
success	请求成功时调用
error	请求失败时调用

Detaillierter Code:

$('#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-Anfrage ist erfolgreich, erstellt basierend auf dem zurückgegebene JSON-Daten Dynamischer Header

2.2.1 Benutzerdefiniertes dynamisches Header-Array initialisieren

 //定义动态表头字段数组
    var dynamicHeader = [];
    //向数组中填入属性
    dynamicHeader.push({
        field: "state",
        check: true
    });

2.2.2 Dynamische Header-Generierung

  //针对返回的json数据，遍历json数据的key集合
   for (var i = 0; i<(Object.keys(json[0])).length; i++) {
       //获取对应索引的value值，将获取的值设置到动态表头字段中。
       var property = (Object.keys(json[0]))[i];
       dynamicHeader.push({
           "title": property,
           "field": property,
           //显示是否显示隐藏
           switchable: true,
           //是否开启排序
           sortable: true
       });
   }

Wir können diesen Code gemeinsam durchsuchen. Drücken Sie F12 So zeigen Sie den spezifischen Inhalt in Object.keys(json[0]) an: Simulieren Sie eine Anfrage/einen Test.

2.2.3 Erstellen der Tabelle Die Tabelle muss vor dem Erstellen der Tabelle zerstört werden, sonst bleibt der zuletzt geladene Inhalt erhalten

  $('#DataQueryTable').bootstrapTable('destroy').bootstrapTable({
       //得到的json数据，会根据columns参数进行对应赋值配置
       data: json,
       //Bstable工具导航条
       toolbar: '#toolbar',
       //浏览器缓存，默认为true，设置为false避免页面刷新调用浏览器缓存
       cache: false,
       //是否显示行间隔色
       striped: true,
       //分页方式：client客户端分页，server服务端分页
       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,
       //自定义所生成的动态表头放入，结合上述json数据，实现表格数据内容的构建
       columns: dynamicHeader
   });
 },

2.3 Ajax-Anfrage fehlgeschlagen, Popup-Fenster mit Fehlermeldung, Seite neu geladen

error: function () {
    alert("SQL查询错误，请输入正确的SQL语句！");
    location.reload();
}

Vollständiger JS-Code

/**
 *  BsTable动态表格生成
 */
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]));

                    $(&#39;#DataQueryTable&#39;).bootstrapTable(&#39;destroy&#39;).bootstrapTable({
                        data: json,
                        toolbar: &#39;#toolbar&#39;,
                        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. Testen Sie die Ergebnisse der dynamischen Tabellengenerierung

　3.1 Der Test ist in zwei Teile unterteilt: Rufen Sie zunächst die durch die Anfrage erhaltenen JSON-Daten ab Simulieren Sie die Anfrage, um 100 Daten zu erhalten

@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 Sehen Sie sich die von der Anfrage zurückgegebenen JSON-Daten an

　3.3 Dynamische Tabellengenerierung testen

Die obige Anfrage kann normal Daten zurückgeben, aber was ist mit der dynamischen BSTable, die wir über eine Ajax-Anfrage erstellt haben?

Die Anforderung lautet: SQL-Anweisungs-/Linkinformationen, und die Ajax-Anforderung gibt JSON-Daten zurück, was mit der obigen Anforderung übereinstimmt.

Schauen Sie sich unseren dynamischen Tischgenerierungsstatus an:

Bingo, So Bisher wurde die dynamische Tabellenfunktion BootStrapTable implementiert.

Das obige ist der detaillierte Inhalt vonDetailliertes Tutorial zur dynamischen Tabelle von BootStrapTable [mit Code]. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!