ブートストラップでテーブルデータを取得する方法-ブートストラップのチュートリアル-php.cn

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

藏色散人

リリース： 2021-11-04 16:19:59

オリジナル

8336 人が閲覧しました

ブートストラップがテーブルデータを取得する方法: 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 サイトの他の関連記事を参照してください。