ブートストラップでテーブルデータを取得する方法

ブートストラップがテーブル データを取得する方法: 1. テーブル パラメーターの URL を通じて取得します; 2. "$.get()" メソッドを通じて操作し、テーブル パラメーターのデータを使用して、受け取るメソッドをカスタマイズします。データ形式。

この記事の動作環境: Windows 7 システム、ブートラップ バージョン 3.3.7、DELL G3 コンピューター

ブートストラップを使用してテーブル データを取得する方法 ?

#ブートストラップ テーブル データを取得する 2 つの方法

#データを取得するには、一般的に 2 つの方法が使用されます。1 つは次の方法です。テーブル パラメーターの URL json データを介して取得する方法、もう 1 つは $.get() を介して取得する方法です。2 つの実装の効果は同じですが、データを受信するときに少し異なります。それぞれ 2 つの違いを紹介しましょう

1. テーブル パラメーターの URL を通じて取得します。ここでの URL はバックエンド インターフェイスのアドレスです。最終的に返されたデータはテーブルに直接レンダリングされます。ただし、ここで注意すべき点は、インターフェイスから返される json 形式は、テーブルで定義されている形式と一致している必要があるということであり、次の例によれば、json によって返されるデータ形式は次のようになります。

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

コード スニペットは次のとおりです:

<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;
} ]
});

ただし、返された json 形式が次の場合、テーブルを直接レンダリングすることはできないため、カスタマイズするには列パラメータのフォーマッタを使用する必要があります。その方法。

以下の JSON では、ID、名前、価格のそれぞれにカスタム メソッドを実装する必要があります。フロントエンドとバックエンドが完全に分離されている開発モデルの場合、この方法を使用してデータを操作することは明らかに最適ではありません。

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

2. $.get()メソッドで操作することで、バックグラウンドで返されるデータをより柔軟に操作できるようになります ここでは、tableパラメータのデータを利用して、データ形式を受け取るメソッドをカスタマイズします.

コード スニペット

<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
} ;

推奨される調査: 「

ブートストラップの使用方法のチュートリアル」

以上がブートストラップでテーブルデータを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。