如何使用Spring和Thymeleaf轻松地在HTML表单映射上显示多个复选框

在这篇快速文章中，我将与您分享一些代码示例，以使用Spring MVC和百里叶以HTML形式显示多个复选框。复选框的值与一个集合进行映射，该集合是模型类的字段。例如，您希望对如下所示的用户窗体进行编码：

用户可以具有一个或多个（多个）角色，因此此窗体中的“角色”字段由与数据库中的角色名称对应的多个复选框表示。在数据库中，我们有3个表来实现用户和角色之间的多对多关系，如下所示：

在Java代码中，我们创建实体类User如下（我只在这篇文章的上下文中显示相关代码）：

package net.codejava
 
import java.util.*;
import javax.persistence.*
 
@Entity
@Table(name = "users")
public class User {
     
     
    @ManyToMany(cascade = CascadeType.PERSIST, fetch = FetchType.EAGER)
    @JoinTable(
            name = "users_roles",
            joinColumns = @JoinColumn(name = "user_id"),
            inverseJoinColumns = @JoinColumn(name = "role_id")
            )
    private Set roles = new HashSet<>();
     
}

你看，User类有一组角色s。您应该重写角色类中的字符串（），等于（）和哈希代码（），如下所示：

package net.codejava;
 
import javax.persistence.*;
 
@Entity
@Table(name = "roles")
public class Role {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;
    private String name;
 
    // getters and setters are not shown
     
    @Override
    public String toString() {
        return this.name;
    }
 
    @Override
    public int hashCode() {
        final int prime = 31;
        int result = 1;
        result = prime * result + ((id == null) ? 0 : id.hashCode());
        return result;
    }
 
    @Override
    public boolean equals(Object obj) {
        if (this == obj)
            return true;
        if (obj == null)
            return false;
        if (getClass() != obj.getClass())
            return false;
        Role other = (Role) obj;
        if (id == null) {
            if (other.id != null)
                return false;
        } else if (!id.equals(other.id))
            return false;
        return true;
    }  
}

我们需要重写toString（）方法，以便角色名称将显示在表单中。并且必须覆盖等于（）和哈希码（），以便当表单处于编辑模式时，Spring MVC和Thymeleaf将正确显示复选标记。对于Spring数据JPA存储库接口，即用户存储库和角色存储库 - 没有什么特别的。我们不必编写任何额外的代码。

在Spring MVC控制器类中，我们需要对处理程序进行编码以创建新用户并编辑现有用户，如下所示：

package net.codejava;
 
@Controller
public class UserController {
 
    @Autowired
    private UserServices service;
     
    @Autowired
    private RoleRepository roleRepository;
     
    @GetMapping("/users/new")
    public ModelAndView newUser() {
        User user = new User();
        ModelAndView mav = new ModelAndView("user_form");
        mav.addObject("user", user);
         
        List roles = (List) roleRepository.findAll();
         
        mav.addObject("allRoles", roles);
         
        return mav;    
    }  
     
    @GetMapping("/users/edit/{id}")
    public ModelAndView editUser(@PathVariable(name = "id") Integer id) {
        User user = service.get(id);
        ModelAndView mav = new ModelAndView("user_form");
        mav.addObject("user", user);
         
        List roles = (List) roleRepository.findAll();
         
        mav.addObject("allRoles", roles);
         
        return mav;
    }  
}

这里的关键点是将角色对象的集合添加到模型中：

List roles = (List) roleRepository.findAll();
mav.addObject("allRoles", roles);

并且在Thymeleaf的视图中，编写用于显示复选框的代码，如下所示：

<form th:action="@{/users/save}" th:object="${user}" method="post">
<p>
    <label>Roles:
        <input type="checkbox" name="roles"
            th:each="role : ${allRoles}"
            th:text="${role.name}"
            th:value="${role.id}"
            th:field="*{roles}"
        />
    label>
p>
form>

然后在创建新模式下， 它将显示与数据库中的角色名称相对应的带有标签的复选框：

我们不必为保存用户处理程序方法编写任何特殊代码，因为Spring MVC，Thymeleaf和Spring Data JPA在自动持久化User对象和关联角色对象方面做得非常出色。在编辑模式下，它将根据用户和角色之间的关联正确显示复选标记，例如：

这是一些代码示例，说明如何使用Spring和Thymeleaf轻松地在HTML表单映射上显示多个复选框，其中包含数据库中的值。我希望这篇文章对您有所帮助。