如何基于数组实现rowspan行合并？事件管理项目Thymeleaf需求

Hey there! Let's tackle this row merging challenge for your event management system. From what you described, you want to combine rows where all data is identical except for the "standards" column—since each event can link to multiple standards. Here's a straightforward approach to make this work:

Step 1: Group Your Data on the Backend First #

Before diving into Thymeleaf, it’s way simpler to organize your event data on the backend. You’ll want to create a structure that bundles shared event details with a list of its associated standards. For example, if you’re using Spring Boot:

// DTO to hold grouped event data
public class GroupedEvent {
    private Long eventId;
    private String eventName;
    private String eventDescription;
    // Add other shared event fields here
    private List<String> linkedStandards; // List of standards tied to this event

    // Getters and setters
}

// In your controller, transform raw events into grouped format
@GetMapping("/events")
public String loadEvents(Model model) {
    List<Event> rawEvents = eventService.fetchAllEvents(); // Your existing event list
    Map<String, GroupedEvent> eventGroups = new HashMap<>();

    for (Event event : rawEvents) {
        // Create a unique key using all shared fields (exclude standard)
        String groupKey = event.getEventId() + "-" + event.getEventName() + "-" + event.getEventDescription();
        
        if (!eventGroups.containsKey(groupKey)) {
            GroupedEvent newGroup = new GroupedEvent();
            newGroup.setEventId(event.getEventId());
            newGroup.setEventName(event.getEventName());
            newGroup.setEventDescription(event.getEventDescription());
            newGroup.setLinkedStandards(new ArrayList<>());
            eventGroups.put(groupKey, newGroup);
        }
        eventGroups.get(groupKey).getLinkedStandards().add(event.getStandard());
    }

    model.addAttribute("groupedEvents", new ArrayList<>(eventGroups.values()));
    return "event-dashboard";
}

Step 2: Update Thymeleaf Template to Render Merged Rows #

Now in your Thymeleaf template, you’ll loop through the grouped events and use the rowspan attribute to merge cells for shared data. Here’s how your table would look:

<table class="event-table" border="1">
    <thead>
        <tr>
            <th>Event ID</th>
            <th>Event Name</th>
            <th>Description</th>
            <th>Affected Standard</th>
        </tr>
    </thead>
    <tbody>
        <th:block th:each="eventGroup : ${groupedEvents}">
            <!-- First row: render shared fields with rowspan matching number of standards -->
            <tr>
                <td th:rowspan="${eventGroup.linkedStandards.size()}" th:text="${eventGroup.eventId}"></td>
                <td th:rowspan="${eventGroup.linkedStandards.size()}" th:text="${eventGroup.eventName}"></td>
                <td th:rowspan="${eventGroup.linkedStandards.size()}" th:text="${eventGroup.eventDescription}"></td>
                <td th:text="${eventGroup.linkedStandards[0]}"></td>
            </tr>
            <!-- Subsequent rows: only render the standard column -->
            <tr th:each="standard, stat : ${eventGroup.linkedStandards}" th:if="${stat.index > 0}">
                <td th:text="${standard}"></td>
            </tr>
        </th:block>
    </tbody>
</table>

Quick Explanations: #

• rowspan="${eventGroup.linkedStandards.size()}": This tells the table cell to span across exactly as many rows as there are standards for the event, merging the shared data cells.
• th:block: Acts as an invisible container for the loop, so we don’t render extra HTML elements while grouping rows for each event.
• The first row of each group renders all shared columns plus the first standard; subsequent rows only render the remaining standards (since the other cells are already merged).

This setup will give you the clean, merged-row layout you’re aiming for!

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