So erhalten Sie Tabellendaten im Bootstrap

So erhält Bootstrap Tabellendaten: 1. Rufen Sie sie über die Tabellenparameter-URL ab. 2. Führen Sie den Betrieb über die Methode „$.get()“ aus und verwenden Sie die Daten des Tabellenparameters, um die Methode für den Empfang des Datenformats anzupassen.

Die Betriebsumgebung dieses Artikels: Windows 7-System, Bootsrap-Version 3.3.7, DELL G3-Computer

Wie erhält Bootstrap Tabellendaten?

Bootstrap-Tabelle Zwei Möglichkeiten, Daten abzurufen

Das Abrufen von Daten wird im Allgemeinen verwendet. Es gibt zwei Arten: Eine besteht darin, JSON-Daten über die Tabellenparameter-URL abzurufen, und die andere darin, sie über $.get() abzurufen. Die Wirkung beider Implementierungen ist die gleiche, jedoch beim Empfangen von Daten Etwas anders. Lassen Sie uns den Unterschied zwischen den beiden Methoden vorstellen

1. Rufen Sie ihn über den Tabellenparameter url ab. Die URL ist hier die Adresse der Backend-Schnittstelle, und die endgültigen zurückgegebenen Daten werden direkt in die Tabelle gerendert. Hier ist jedoch etwas zu beachten: Das von der Schnittstelle zurückgegebene JSON-Format muss mit dem in der Tabelle definierten übereinstimmen. Gemäß dem folgenden Beispiel lautet das von JSON zurückgegebene Datenformat wie folgt.

{
    "id": 1,
    "name": "张三",
    "price" : "100"
}

Der Codeausschnitt lautet wie folgt:

<table  id= "table" ></table>
$ ( &#39;#table&#39; ). bootstrapTable ({
url :  &#39;data1.json&#39; ,
columns :  [{
field :  &#39;id&#39; ,
title :  &#39;Item ID&#39;
},  {
field :  &#39;name&#39; ,
title :  &#39;Item Name&#39;
},  {
field :  &#39;price&#39; ,
title :  &#39;Item Price&#39;
} ]
});

Aber wenn das zurückgegebene JSON-Format wie folgt lautet, kann die Tabelle nicht direkt gerendert werden und der Formatierer im Spaltenparameter muss zum Anpassen der Methode verwendet werden.

Für den folgenden JSON müssen Sie benutzerdefinierte Methoden für ID, Name und Preis implementieren. Für ein Entwicklungsmodell, bei dem Front- und Back-End vollständig getrennt sind, ist die Verwendung dieser Methode zur Datenbearbeitung offensichtlich nicht optimal.

{
    "errcode": "OK",
    "data_list": [
                   {
                        "id": 1,
                                    "name": "张三",
                                    "price" : "100"
                    }
               ]
}

2. Durch den Betrieb über $.get() können Sie die vom Hintergrund zurückgegebenen Daten flexibler verarbeiten. Hier verwenden wir die Daten des Tabellenparameters, um das Format der Methode zum Empfangen der Daten anzupassen

Codeausschnitt

<table  id= "table" ></table>
$.get(&#39;/data/&#39;, function(data){
$ ( &#39;#table&#39; ). bootstrapTable ({
columns :  [{
field :  &#39;id&#39; ,
title :  &#39;Item ID&#39;
},  {
field :  &#39;name&#39; ,
title :  &#39;Item Name&#39;
},  {
field :  &#39;price&#39; ,
title :  &#39;Item Price&#39;
} ]
data: formatData(data)
});
})
// 格式化数据
var formatData = function (data) {
var l = [] ;
for ( var i = 0 ; i < data.data_list.length ; i++) {
           var m = data.data_list[i]
var d = {
&#39;id&#39;: m. id ,
&#39;name&#39;: m. name ,
&#39;price&#39;: m. price ,
}
l. push(d)
}
return l
} ;

Empfohlenes Lernen: „Tutorial zur Bootstrap-Nutzung“

Das obige ist der detaillierte Inhalt vonSo erhalten Sie Tabellendaten im Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!