Bagaimana untuk mendapatkan data jadual dalam bootstrap

Cara bootstrap mendapatkan data jadual: 1. Dapatkannya melalui url parameter jadual 2. Kendalikan melalui kaedah "$.get()", dan gunakan data parameter jadual untuk menyesuaikan kaedah untuk menerima; format data boleh.

Persekitaran pengendalian artikel ini: sistem Windows 7, bootsrap versi 3.3.7, komputer DELL G3

Bagaimana untuk mendapatkan data jadual dengan bootstrap ?

Dua cara untuk mendapatkan data daripada jadual bootstrap

Terdapat dua cara yang biasa digunakan untuk mendapatkan data, satu ialah dapatkannya melalui data url parameter jadual json, yang lain adalah untuk mendapatkannya melalui $.get(). Kesan kedua-dua pelaksanaan adalah sama, tetapi ia sedikit berbeza apabila menerima data. Mari perkenalkan perbezaan antara kedua-duanya

1. Dapatkannya melalui url parameter jadual Url di sini ialah alamat antara muka bahagian belakang, dan data akhir yang dikembalikan akan dipaparkan terus ke dalam jadual. Walau bagaimanapun, terdapat sesuatu yang perlu diperhatikan di sini, iaitu, format json yang dikembalikan oleh antara muka mestilah konsisten dengan yang ditakrifkan dalam jadual Menurut contoh berikut, format data yang dikembalikan oleh json adalah seperti berikut.

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

Coretan kod adalah seperti berikut:

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

Tetapi jika format json yang dikembalikan adalah seperti berikut, jadual tidak boleh diberikan secara langsung dan pemformat dalam parameter lajur mesti digunakan.

Untuk json di bawah, anda perlu melaksanakan kaedah tersuai untuk id, nama dan harga masing-masing. Untuk model pembangunan di mana hujung depan dan belakang dipisahkan sepenuhnya, menggunakan kaedah ini untuk memanipulasi data jelas tidak optimum.

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

2. Dengan beroperasi dalam kaedah $.get(), anda boleh mengendalikan data yang dikembalikan oleh latar belakang dengan lebih fleksibel Di sini kami menggunakan data parameter jadual untuk menyesuaikan kaedah untuk menerima data. Format

coretan kod

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

Kajian yang disyorkan: "tutorial penggunaan bootstrap"

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan data jadual dalam bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!