Bootstrap Table是一款基于Bootstrap框架的強(qiáng)大、靈活、易用的響應(yīng)式表格插件。它支持各種數(shù)據(jù)格式,其中包括JSON格式。
在Bootstrap Table中使用JSON格式的數(shù)據(jù)時(shí),可以直接將JSON數(shù)據(jù)傳遞給table的data選項(xiàng)。例如:
$('#table').bootstrapTable({
data: [
{
"id": 1,
"name": "John",
"age": 25
},
{
"id": 2,
"name": "Mary",
"age": 30
}
]
});
在這個(gè)例子中,我們定義了一個(gè)數(shù)組,其中包含兩個(gè)對(duì)象。每個(gè)對(duì)象都有三個(gè)屬性:id、name和age。我們將這個(gè)數(shù)組傳遞給Bootstrap Table的data選項(xiàng),Bootstrap Table就會(huì)自動(dòng)渲染這個(gè)表格。
如果你的JSON數(shù)據(jù)有更多的屬性,你可以使用columns選項(xiàng)來顯示你想要的屬性。例如:
$('#table').bootstrapTable({
data: [
{
"id": 1,
"name": "John",
"age": 25,
"gender": "male",
"address": "New York"
},
{
"id": 2,
"name": "Mary",
"age": 30,
"gender": "female",
"address": "Los Angeles"
}
],
columns: [
{
field: 'id',
title: 'ID'
},
{
field: 'name',
title: 'Name'
},
{
field: 'age',
title: 'Age'
},
{
field: 'address',
title: 'Address'
}
]
});
在這個(gè)例子中,我們定義了四個(gè)columns,它們分別對(duì)應(yīng)JSON數(shù)據(jù)中的四個(gè)屬性:id、name、age和address。當(dāng)表格被渲染時(shí),Bootstrap Table會(huì)顯示這四個(gè)屬性的值。
總的來說,使用JSON格式的數(shù)據(jù)在Bootstrap Table中是非常簡(jiǎn)單和方便的。只需要將JSON數(shù)據(jù)傳遞給data選項(xiàng),并使用columns選項(xiàng)來顯示你想要的屬性即可。