基于jQuery的订单表格渲染与行样式处理技术问询

Hey there! Let's work through your jQuery table formatting needs one by one. I've put together a complete solution that covers all your requirements, with clear explanations for each part.

First, let's fix a small syntax issue in your original JSON data (there was an extra comma in the second user object) and set up our data properly. Then we'll tackle each requirement:

1. Map PickupType to Enum Text #

I'll create a simple lookup map for your PickupMethodEnum to easily convert numeric values to their corresponding names. If your existing _enum implementation has a method to get the name from a value (like PickupMethodEnum.getValue(pickupType)), you can use that instead, but the map is a reliable fallback.

2. Show/Hide DriveThru Image #

We'll check if the pickup method is DriveThru when building each table row, and only add the image to the #imageIndicator column in that case.

3. Format Scheduled Time #

I wrote a helper function that converts the UTC pickup time to local time, then checks if it's today, tomorrow, or another date to apply the correct formatting:

• Today: Shows time in 12:15 pm format
• Tomorrow: Shows MM/DD - 7:00am format
• Other dates: Falls back to a local string (you can extend this if needed)

4. Style TakeOut Rows & Auto-Remove #

For TakeOut orders, we'll set a gray background and use setTimeout to remove the row after 2 minutes (with a fade-out effect for better UX).

Complete Code Implementation #

HTML Table Structure

Make sure your table has a <tbody> with an ID to make it easy to populate dynamically:

<table>
  <thead>
    <tr>
      <th>#imageIndicator</th>
      <th>Name</th>
      <th>PickupName</th>
      <th>Total</th>
      <th>scheduledTime</th>
    </tr>
  </thead>
  <tbody id="ordersTableBody">
    <!-- Dynamic rows will be added here -->
  </tbody>
</table>

jQuery & JavaScript Code

// Lookup map for PickupMethodEnum values to names
const pickupMethodMap = {
  1: 'DineIn',
  2: 'DriveThru',
  3: 'TakeOut'
};

// Helper function to format scheduled time
function formatScheduledTime(utcTimeStr) {
  const pickupDate = new Date(utcTimeStr);
  const now = new Date();
  
  // Convert UTC time to local time
  const localPickupDate = new Date(pickupDate.getTime() + pickupDate.getTimezoneOffset() * 60000);
  
  // Get today and tomorrow dates (without time)
  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
  const tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000);
  
  // Format time to 12-hour AM/PM
  let hours = localPickupDate.getHours();
  const minutes = localPickupDate.getMinutes().toString().padStart(2, '0');
  const ampm = hours >= 12 ? 'pm' : 'am';
  hours = hours % 12 || 12; // Convert 0 to 12 for midnight
  const timeStr = `${hours}:${minutes} ${ampm}`;
  
  // Check if pickup date is today, tomorrow, or other
  const pickupDateOnly = new Date(localPickupDate.getFullYear(), localPickupDate.getMonth(), localPickupDate.getDate());
  if (pickupDateOnly.getTime() === today.getTime()) {
    return timeStr;
  } else if (pickupDateOnly.getTime() === tomorrow.getTime()) {
    const month = localPickupDate.getMonth() + 1;
    const day = localPickupDate.getDate();
    return `${month}/${day} - ${timeStr}`;
  }
  
  // Fallback for other dates (customize this if needed)
  return localPickupDate.toLocaleString();
}

// Your corrected order data (fixed JSON syntax)
const orders = [
  { "orderId": 26, "userId": "53cf1e15", "user": { "editablePropertyNames": [], "email": "rajesh@tech.com", "firstName": "Rajesh", "id": "53cf1e15", "identities": [], "lastName": "kumar", "missingProperties": [], "phoneNumber": "45877298" }, "locationId": 4024, "pickupType": 1, "pickupTimeUtc": "2015-11-27T17:33:00.417" }, 
  { "orderId": 601, "userId": "06bf5983", "user": { "editablePropertyNames": [], "email": "rtest@wa.com", "firstName": "Rakesh", "id": "06bf5983", "identities": [], "lastName": "Pkumar", "missingProperties": [] }, "locationId": 424, "pickupType": 1, "pickupTimeUtc": "2016-11-16T21:30:00", "total": 4.32, "tax": 0.83 },
  // Added test orders for DriveThru and TakeOut
  { "orderId": 701, "userId": "abc123", "user": { "firstName": "John", "lastName": "Doe" }, "pickupType": 2, "pickupTimeUtc": new Date().toISOString(), "total": 10.50 },
  { "orderId": 801, "userId": "def456", "user": { "firstName": "Jane", "lastName": "Smith" }, "pickupType": 3, "pickupTimeUtc": new Date(Date.now() + 24*60*60*1000).toISOString(), "total": 7.25 }
];

// Populate the table with order data
$(document).ready(function() {
  const $tableBody = $('#ordersTableBody');
  $tableBody.empty();
  
  orders.forEach(order => {
    // Get pickup method name
    const pickupName = pickupMethodMap[order.pickupType] || order.pickupType;
    // Format scheduled time
    const formattedTime = formatScheduledTime(order.pickupTimeUtc);
    // Handle orders without total
    const total = order.total ? order.total.toFixed(2) : 'N/A';
    // User full name
    const fullName = `${order.user.firstName} ${order.user.lastName}`;
    
    // Create table row
    const $row = $('<tr></tr>');
    
    // 1. Image Indicator column
    const $imageCell = $('<td></td>');
    if (pickupName === 'DriveThru') {
      $imageCell.append('<img src="car.png" alt="DriveThru">');
    }
    $row.append($imageCell);
    
    // 2. Name column
    $row.append(`<td>${fullName}</td>`);
    
    // 3. PickupName column
    $row.append(`<td>${pickupName}</td>`);
    
    // 4. Total column
    $row.append(`<td>${total}</td>`);
    
    // 5. Scheduled Time column
    $row.append(`<td>${formattedTime}</td>`);
    
    // Handle TakeOut row styling and auto-removal
    if (pickupName === 'TakeOut') {
      $row.css('background-color', '#ccc');
      // Remove row after 2 minutes (120000 ms)
      setTimeout(() => {
        $row.fadeOut(300, () => {
          $row.remove();
        });
      }, 2 * 60 * 1000);
    }
    
    // Add row to table
    $tableBody.append($row);
  });
});

Notes: #

• I added test orders for DriveThru and TakeOut so you can see all behaviors in action.
• The time formatting handles UTC to local conversion, which is important since your pickupTimeUtc is in UTC.
• For orders without a total value (like your first example), it shows "N/A" instead of breaking the table.
• The fade-out effect when removing TakeOut rows is optional but makes the UI smoother.

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