基于jQuery和linq.js动态生成按区域列展示的Driver_ID表格

Got it, let's adjust your code to build the table exactly how you want it—with zone names as column headers, and drivers sorted by zone_rank (rank 1 first) under each corresponding zone. Here's the breakdown and modified code:

Step-by-Step Breakdown #

1. Grab Unique Zones: We still start by getting all distinct zone names, just like before.
2. Sort Drivers per Zone: For each zone, we sort its drivers by zone_rank to ensure the highest priority ranks show up first.
3. Calculate Maximum Ranks: Find the highest zone_rank across all drivers so we know how many rows we need (to cover every possible rank position, even if some zones don't have a driver there).
4. Build the Header: Create the first row with zone names as column titles.
5. Build Data Rows: For each rank position, create a row and fill in the driver ID for each zone (or leave the cell empty if there's no driver for that rank), applying the driver's background color.

Modified Working Code #

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');
zTable.innerHTML = ''; // Clear any existing table content

// Get unique zone names
var allzones = Enumerable.From(data)
    .Distinct(p => p.zone_name)
    .Select(p => p.zone_name)
    .ToArray();

// Store sorted drivers for each zone
var zoneDriversMap = {};
allzones.forEach(zone => {
    zoneDriversMap[zone] = Enumerable.From(data)
        .Where(p => p.zone_name === zone)
        .OrderBy(p => p.zone_rank)
        .ToArray();
});

// Find the highest zone_rank to determine total rows needed
var maxRank = Enumerable.From(data)
    .Max(p => p.zone_rank) || 0;

// Create header row with zone names
var headerRow = document.createElement('tr');
allzones.forEach(zone => {
    var headerCell = document.createElement('th');
    headerCell.textContent = zone;
    headerRow.appendChild(headerCell);
});
zTable.appendChild(headerRow);

// Create a row for each rank position
for (var currentRank = 1; currentRank <= maxRank; currentRank++) {
    var dataRow = document.createElement('tr');
    allzones.forEach(zone => {
        var drivers = zoneDriversMap[zone];
        // Find the driver matching the current rank
        var matchedDriver = drivers.find(driver => driver.zone_rank === currentRank);
        
        var dataCell = document.createElement('td');
        if (matchedDriver) {
            dataCell.textContent = matchedDriver.driver_id;
            dataCell.style.backgroundColor = matchedDriver.ColorCode;
        } else {
            dataCell.textContent = ''; // Empty cell if no driver for this rank
        }
        dataRow.appendChild(dataCell);
    });
    zTable.appendChild(dataRow);
}

Expected Output #

This code will generate a table structure like this:

<table id="tblZoneRank">
  <tr>
    <th>Zone A</th>
    <th>Zone B</th>
  </tr>
  <tr>
    <td style="background-color: green;">100</td>
    <td style="background-color: yellow;">101</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td style="background-color: green;">102</td>
    <td></td>
  </tr>
</table>

Key Improvements Over Original Code #

• Column-First Layout: Switched from rows per zone to columns per zone, with each row representing a rank position.
• Rank Sorting: Added .OrderBy(p => p.zone_rank) to ensure drivers are displayed in the correct priority order.
• Consistent Structure: Handles empty rank positions by leaving cells blank, so the table stays aligned even if some zones have fewer drivers.

内容的提问来源于stack exchange，提问作者dawncode