如何在Freemarker模板语言中勾选复选框时从表格传递两个值

Hey, let's get this sorted for you. You need to pass two values from each table row when its checkbox is selected in your FreeMarker template—here's a straightforward approach with code examples:

Core Approach #

The key is to either:

1. Combine the two values into a single checkbox value (with a safe separator like :), then split them on the backend
2. Pair each checkbox with hidden input fields that store the second value, linked to the first value for easy retrieval

Full Updated Template Code #

Here's how to modify your existing template (I'll assume your userDatas objects have userId and rollNo as the two values you want to pass—adjust field names to match your actual data):

<#if userDatas?? >
  <form action="remove-list" method="POST" autocomplete="on" class="form-horizontal" role="form" id="form1">
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th class="minwidth">
            Select All <input type="checkbox" onchange="checkAll(this)">
          </th>
          <th>Roll No</th>
          <th>Name</th>
          <th>Created Date</th>
          <th>Modified Date</th>
        </tr>
      </thead>
      <tbody>
        <#list userDatas as user>
          <tr>
            <td>
              <!-- Option 1: Combine values in checkbox value -->
              <input type="checkbox" name="selectedPairs" value="${user.userId!}:${user.rollNo!}" class="row-checkbox">
              
              <!-- Option 2: Use hidden inputs paired with checkbox -->
              <!-- 
              <input type="checkbox" name="selectedUserIds" value="${user.userId!}" class="row-checkbox">
              <input type="hidden" name="rollNos[${user.userId!}]" value="${user.rollNo!}">
              -->
            </td>
            <td>${user.rollNo!}</td>
            <td>${user.name!}</td>
            <td>${user.createdDate?string("yyyy-MM-dd HH:mm:ss")!}</td>
            <td>${user.modifiedDate?string("yyyy-MM-dd HH:mm:ss")!}</td>
          </tr>
        </#list>
      </tbody>
    </table>
    <!-- Add a submit button if you haven't already -->
    <button type="submit" class="btn btn-danger">Delete Selected</button>
  </form>

  <script>
    // Fix the checkAll function to target row checkboxes
    function checkAll(checkbox) {
      const rowCheckboxes = document.querySelectorAll('.row-checkbox');
      rowCheckboxes.forEach(cb => cb.checked = checkbox.checked);
    }
  </script>
</#if>

Backend Handling (Example with Java) #

Choose the backend code that matches the template option you used:

For Option 1 (Combined Values)

@PostMapping("/remove-list")
public String processSelectedItems(@RequestParam("selectedPairs") List<String> selectedPairs) {
    for (String pair : selectedPairs) {
        String[] values = pair.split(":");
        String userId = values[0];
        String rollNo = values[1];
        
        // Your logic here (e.g., delete records, update status)
        System.out.printf("Processing user ID: %s, Roll No: %s%n", userId, rollNo);
    }
    return "redirect:/your-user-list-page";
}

For Option 2 (Paired Hidden Inputs)

@PostMapping("/remove-list")
public String processSelectedItems(@RequestParam("selectedUserIds") List<String> userIds,
                                  @RequestParam Map<String, String> rollNos) {
    for (String userId : userIds) {
        String rollNo = rollNos.get(userId);
        
        // Your logic here
        System.out.printf("Processing user ID: %s, Roll No: %s%n", userId, rollNo);
    }
    return "redirect:/your-user-list-page";
}

Notes to Avoid Issues #

• Use ! in FreeMarker expressions (like ${user.rollNo!}) to handle null values gracefully
• If your values might contain the separator (e.g., :), use a more unique separator like ||| or URL-encode the values before combining
• The checkAll function uses querySelectorAll to target all row checkboxes, ensuring full select/unselect works correctly

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