angular js + 类型脚本中的动态列 table
Dynamic column table in angular js + Type scripts
我想使用 anguler js 创建以下动态列 table。
根据我的要求,fruit,vegetables等列集可以根据数据集动态变化。我想从 json 文件加载数据。
例如:
[
{
"clusterID":"1",
"storeCode": "S2HK",
"storeName": "store 1",
"Vegetables":
{
"Ordered":"272",
"Delivery":"250",
"FR":"70%",
"Gap":"22"
},
"Fruit":
{
"Ordered":"300",
"Delivery":"250",
"FR":"60%",
"Gap":"50"
}
},
{
"clusterID":"1",
"storeCode": "SCCC",
"storeName": "store 2",
"Vegetables":
{
"Ordered":"500",
"Delivery":"500",
"FR":"100%",
"Gap":"0"
},
"Fruit":
{
"Ordered":"750",
"Delivery":"700",
"FR":"90%",
"Gap":"50"
}
}
]
我尝试了很多方法,但无法创建动态 table。我怎样才能创建这种类型的 table ?
您需要像这样制作 table 结构:
<table border="1" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th rowspan="2">Store</th>
<th rowspan="2">Store Name</th>
<th colspan="4">Vegetables</th>
<th colspan="4">Fruit</th>
</tr>
<tr>
<th>Ordered</th>
<th>Delivery</th>
<th>FR</th>
<th>Gap</th>
<th>Ordered</th>
<th>Delivery</th>
<th>FR</th>
<th>Gap</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of items">
<td>item.storeCode</td>
<td>item.storeName</td>
<td>item.Vegetables.Ordered</td>
<td>item.Vegetables.Delivery</td>
<td>item.Vegetables.FR</td>
<td>item.Vegetables.Gap</td>
<td>item.Fruit.Ordered</td>
<td>item.Fruit.Delivery</td>
<td>item.Fruit.FR</td>
<td>item.Fruit.Gap</td>
</tr>
</tbody>
您可以看到正在运行的 jsBin here
我想使用 anguler js 创建以下动态列 table。
根据我的要求,fruit,vegetables等列集可以根据数据集动态变化。我想从 json 文件加载数据。 例如:
[
{
"clusterID":"1",
"storeCode": "S2HK",
"storeName": "store 1",
"Vegetables":
{
"Ordered":"272",
"Delivery":"250",
"FR":"70%",
"Gap":"22"
},
"Fruit":
{
"Ordered":"300",
"Delivery":"250",
"FR":"60%",
"Gap":"50"
}
},
{
"clusterID":"1",
"storeCode": "SCCC",
"storeName": "store 2",
"Vegetables":
{
"Ordered":"500",
"Delivery":"500",
"FR":"100%",
"Gap":"0"
},
"Fruit":
{
"Ordered":"750",
"Delivery":"700",
"FR":"90%",
"Gap":"50"
}
}
]
我尝试了很多方法,但无法创建动态 table。我怎样才能创建这种类型的 table ?
您需要像这样制作 table 结构:
<table border="1" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th rowspan="2">Store</th>
<th rowspan="2">Store Name</th>
<th colspan="4">Vegetables</th>
<th colspan="4">Fruit</th>
</tr>
<tr>
<th>Ordered</th>
<th>Delivery</th>
<th>FR</th>
<th>Gap</th>
<th>Ordered</th>
<th>Delivery</th>
<th>FR</th>
<th>Gap</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of items">
<td>item.storeCode</td>
<td>item.storeName</td>
<td>item.Vegetables.Ordered</td>
<td>item.Vegetables.Delivery</td>
<td>item.Vegetables.FR</td>
<td>item.Vegetables.Gap</td>
<td>item.Fruit.Ordered</td>
<td>item.Fruit.Delivery</td>
<td>item.Fruit.FR</td>
<td>item.Fruit.Gap</td>
</tr>
</tbody>
您可以看到正在运行的 jsBin here