Thymeleaf复选框没有传递值

时间:2017-02-13 18:34:55

标签: java checkbox spring-boot thymeleaf

两个问题。

  1. 我有User和Note课程。用户可以有很多笔记。如何通过Thymeleaf展示属于用户的每个笔记?个:文本=" $ {u.notes.id}"没有工作
  2. 我有表格(见图片),每个用户的复选框都有布尔值isUserChecked值,下面是删除已检查用户的按钮。 Thymeleaf正确显示isUserChecked值的状态。当我手动选中复选框时,删除按钮不起作用,但是当我在代码中设置isUserChecked值时,该按钮起作用。所以问题在于我的Thymeleaf这个复选框的语法。
  3. 截图:

    enter image description here

    HTML

    <div class="container">
    <div class="row">
            <div class="col-sm-6">
                  <table class="table table-hover">
                    <thead>
                      <tr>
                        <th>Id</th>
                        <th>Username</th>
                        <th>First name</th>
                        <th>Last name</th>
                        <th>Password (Hash)</th>
                        <th>Role</th>
                        <th>Notes</th>
                        <th>Select</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr th:each="u : ${listOfUsers}">
                        <td th:text="${u.id}"></td>
                        <td th:text="${u.username}"></td>
                        <td th:text="${u.firstName}"></td>
                        <td th:text="${u.lastName}"></td>
                        <td th:text="${#strings.substring(u.password,0,5) +'...'}"></td>
                        <td th:text="${u.role}"></td>
                        <td th:text="${u.notes}"></td>     
                        <td><input type="checkbox" name="mycheckbox" 
                         th:value="*{u.isUserChecked()}" th:checked="${u.isUserChecked()}"  /></td>
                      </tr>
                    </tbody>
                  </table>
    
                <form th:action="@{/users}" method="post">
                    <button class="buttonLogin" type="submit">Submit</button>
                </form>
            </div>
      </div>
    

    更新1

    正如@Metroids提到的第一个问题可以解决:

    <td><span th:each="note, i: ${u.notes}" th:text="${(i.index > 0 ? ', ' : '') + note.id}" /></td>

    第二个问题。在我的html中使用它:

    <tr th:each="u, i : ${userWrapper}">
    <!-- other rows removed for readability -->
    <td><input type="checkbox" th:field="*{listOfUsers[__${i.index}__].userChecked}" /></td>
    

    我需要具有属性List<User> listOUsers的UserWrapper类。但是怎么做呢? 我创造了这样的东西:

    @Component
    public class UserWrapper {
    
    @Autowired
    UserService userService;
    
    List<User> listOfUsers = userService.findAll();
    
    public List<User> getListOfUsers() {
        return listOfUsers;
    }
    
    public void setListOfUsers(List<User> listOfUsers) {
        this.listOfUsers = listOfUsers;
    }
    }
    

    以下是此页面的控制器:

    @Controller
    public class UserController {
    
    @Autowired
    UserService userService;
    
    @Autowired 
    UserWrapper userWrapper;
    
    @RequestMapping("/users")
    public String home(Model model){
        List<User> listOfUsers = userService.findAll();
        model.addAttribute("listOfUsers", listOfUsers);
        return "users";
    }
    
    @RequestMapping(value = "users", method = RequestMethod.POST)
    public String deleteUser(User user, Model model){
        userService.deleteCheckedUser(user);
    
        return "redirect:/users";
    }
    }
    

    之后我有错误:

    org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'userController': Unsatisfied dependency expressed through field 'userWrapper'; nested exception is org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'userWrapper' defined in file [C:\Users\luk89\Desktop\Java\STS Projects\StickyNotes\target\classes\com\twistezo\models\UserWrapper.class]: Instantiation of bean failed; nested exception is org.springframework.beans.BeanInstantiationException: Failed to instantiate [com.twistezo.models.UserWrapper]: Constructor threw exception; nested exception is java.lang.NullPointerException
    

    更新2

    用户控制器:

    @Controller
    public class UserController {
    
    @Autowired
    UserService userService;
    
    @Autowired
    UserWrapper userWrapper;
    
    @RequestMapping("/users")
    public String home(Model model){
        List<User> listOfUsers = userService.findAll();
        userWrapper.setListOfUsers(listOfUsers);
    
        for(User u : userWrapper.getListOfUsers()){
            System.out.println("username: " +u.getUsername()+ ", checked?: " +u.isUserChecked());
        }
    
        model.addAttribute("listOfUsers", listOfUsers);
        model.addAttribute("userWrapper", userWrapper);
    
        return "users";
    }
    
    @RequestMapping(value = "/users", method = RequestMethod.POST)
    public String deleteUser(@ModelAttribute UserWrapper userWrapper, Model model){
    
        for(User u : userWrapper.getListOfUsers()){
            System.out.println("username: " +u.getUsername()+ ", checked?: " +u.isUserChecked());
        }
    
        userService.deleteCheckedUser(userWrapper);
    
        return "redirect:/users";
        }
    }
    

    从我的服务类中删除方法:

    @Override
    public void deleteCheckedUser(UserWrapper userWrapper) {
    
        for(User u : userWrapper.getListOfUsers()){
            if(u.isUserChecked() == true){
                this.userDAO.delete(u.getId());
            }
        }
    }
    

    结果:

    username: user1, checked?: false
    username: user2, checked?: false
    username: user3, checked?: false
    username: user4, checked?: false
    username: user5, checked?: false
    username: asd, checked?: false
    username: qwe, checked?: false
    username: xcv, checked?: false
    username: ghj, checked?: false
    username: dfh, checked?: false
    username: n, checked?: false
    username: ed, checked?: false
    
    username: null, checked?: true
    username: null, checked?: false
    username: null, checked?: false
    username: null, checked?: false
    username: null, checked?: false
    username: null, checked?: false
    username: null, checked?: false
    username: null, checked?: false
    username: null, checked?: false
    username: null, checked?: false
    username: null, checked?: false
    username: null, checked?: true
    

    Thymeleaf部分现在很棒,但是当我在控制器中调用POST方法时,我的userWrap列表没有值。我正在尝试复制

    List<User> listOfUsers = userService.findAll(); userWrapper.setListOfUsers(listOfUsers);

    到POST方法,但有情况:用户名:好的,检查?:没有听鼠标点击复选框(所有值都是假的)。

1 个答案:

答案 0 :(得分:1)

对于列表,您需要添加另一个循环的每个音符的ID。例如,而不是

<td th:text="${u.notes}"></td>

你需要类似的东西。

<td><span th:each="note, i: ${u.notes}" th:text="${(i.index > 0 ? ', ' : '') + note.id}" /></td>

-

复选框。你需要做很多改变......

  • 所有复选框都必须位于<form></form>标记内。
  • 您需要一个具有用户列表作为属性的命令对象...我认为您不能使用Java List作为命令对象。需要将其指定为<form>标记上的th:对象。
  • 实际复选框的html应如下所示:

HTML

<form th:action="@{/users}" th:object="${userWrapper}" method="post">
    <!-- other html removed for readability -->
    <tr th:each="u, i : ${listOfUsers}">
        <!-- other rows removed for readability -->
        <td><input type="checkbox" th:field="*{users[__${i.index}__].userChecked}" /></td>
    </tr>
</form>

控制器

@Controller
public class UserController {

    @Autowired UserService userService;

    @RequestMapping("/users")
    public String home(Model model){
        List<User> listOfUsers = userService.findAll();
        UserWrapper userWrapper = new UserWrapper();
        userWrapper.setListOfUsers(listOfUsers);
        model.addAttribute("listOfUsers", listOfUsers);
        model.addAttribute("userWrapper", userWrapper);
        return "users";
    }

    @RequestMapping(value = "users", method = RequestMethod.POST)
    public String deleteUser(@ModelAttribute UserWrapper userWrapper, Model model){
        userService.deleteCheckedUser(userWrapper.getListOfUsers());
        return "redirect:/users";
    }
}

爪哇

public class UserWrapper {
    List<User> listOfUsers = new ArrayList<>();

    public List<User> getListOfUsers() {
        return listOfUsers;
    }

    public void setListOfUsers(List<User> listOfUsers) {
        this.listOfUsers = listOfUsers;
    }
}