Detailliertes Tutorial zur dynamischen Tabelle von BootStrapTable [mit Code]

angryTom
Freigeben: 2020-05-15 09:18:34
Original
11459 Leute haben es durchsucht

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 '女';
            }
        }
    },
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

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 = $(&#39;#sql&#39;).val();
var connectInfo = $(&#39;#connectInfo&#39;).val();
Nach dem Login kopieren

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"/>
Nach dem Login kopieren

 2.1 Ajax-Anfrageparameterkonfiguration

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

Detaillierter Code:

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

 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
    });
Nach dem Login kopieren

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
       });
   }
Nach dem Login kopieren

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.

Detailliertes Tutorial zur dynamischen Tabelle von BootStrapTable [mit Code]

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

  $(&#39;#DataQueryTable&#39;).bootstrapTable(&#39;destroy&#39;).bootstrapTable({
       //得到的json数据,会根据columns参数进行对应赋值配置
       data: json,
       //Bstable工具导航条
       toolbar: &#39;#toolbar&#39;,
       //浏览器缓存,默认为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
   });
 },
Nach dem Login kopieren

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

error: function () {
    alert("SQL查询错误,请输入正确的SQL语句!");
    location.reload();
}
Nach dem Login kopieren

Vollständiger JS-Code

/**
 *  BsTable动态表格生成
 */
DataQuery.sqlExecute = function (){

    var sql = $(&#39;#sql&#39;).val();
    var connectInfo = $(&#39;#connectInfo&#39;).val();

    $(&#39;#DataQueryTable&#39;).bootstrapTable({
        ajax: function (request) {
            $.ajax({
                type: "GET",
                url: Feng.ctxPath + "/dataQuery/list" + "/" + sql + "/" + connectInfo,
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                json: &#39;callback&#39;,
                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();
                }
            });
        }
    });
};
Nach dem Login kopieren

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]");
    }
Nach dem Login kopieren

 3.2 Sehen Sie sich die von der Anfrage zurückgegebenen JSON-Daten an

Detailliertes Tutorial zur dynamischen Tabelle von BootStrapTable [mit Code]

 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.

Detailliertes Tutorial zur dynamischen Tabelle von BootStrapTable [mit Code]

Schauen Sie sich unseren dynamischen Tischgenerierungsstatus an:

Detailliertes Tutorial zur dynamischen Tabelle von BootStrapTable [mit Code]


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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage