我需要动态生成html表并在下面列出driver_id。
它与pivot类似，但问题是zone_name可以每天更改。
我正在使用jquery和linq.js。
到目前为止，我尝试过：
var data =
[
{
"ColorCode": "green",
"StatusName": "ACTIVE",
"rankId": 0,
"zone_name": "Zone A",
"driver_id": 100,
"zone_rank": 1,
"status_id": null,
"company_id": null,
"updated_on": null,
"Driver": null,
"login_status": null
},
{
"ColorCode": "yellow",
"StatusName": "BREAK",
"rankId": 0,
"zone_name": "Zone B",
"driver_id": 101,
"zone_rank": 1,
"status_id": null,
"company_id": null,
"updated_on": null,
"Driver": null,
"login_status": null
},
{
"ColorCode": "green",
"StatusName": "ACTIVE",
"rankId": 0,
"zone_name": "Zone A",
"driver_id": 102,
"zone_rank": 4,
"status_id": null,
"company_id": null,
"updated_on": null,
"Driver": null,
"login_status": null
}
]
var zTable = document.getElementById('tblZoneRank');
var allzones = Enumerable.From(data)
.Distinct(p => p.zone_name)
.Select(p => p.zone_name).ToArray();
$.each(allzones, function (i, item) {
var tr = document.createElement('tr');
var td = document.createElement("td");
var txt = document.createTextNode(item);
td.appendChild(txt);
tr.appendChild(td);
var childItem = Enumerable.From(data)
.Where(p => p.zone_name == item)
.ToArray();
$.each(childItem, function (j, citem) {
var ctd = document.createElement("td");
var ctxt = document.createTextNode(citem.driver_id);
ctd.appendChild(ctxt);
$(ctd).css('background-color', citem.ColorCode);
tr.appendChild(ctd);
});
zTable.appendChild(tr);
});
它以这种方式给我输出：
| Zone A | 100 | 102 |
| Zone B | 101 |
但我需要这种格式的输出：
它应该显示zone_name作为列名，并在driver_id下面，第一个id应该是zone_rank 1和2，依此类推。
扫一扫
