java - 使用 Spring MVC 和 thymeleaf 的“下一个”/“上一个”按钮更改列表中的对象

Question

我在 editPLayer 页面上使用了 Thymeleaf。我想添加按钮“下一步”和“先前”来更改有关玩家的表单中的信息。

按钮如:

<input class="button2 button-switch" value="&lt;&lt;"/>
<input class="button2 button-switch" value="&gt;&gt;"/>

editPlayer.html 看起来像这样:

<div class="card">
        <form action="#" th:action="@{/editPlayer}" th:object="${player}" method="post">

            <input type="hidden" th:field="*{id_player}"></input>

            <div class="info">Name: </div>
            <input type="text" th:field="*{name}" placeholder="Imie" th:class="${#fields.hasErrors('name')}? 'error'" /><br/>

            <div class="info">Surname: </div>
            <input type="text" th:field="*{surname}" placeholder="Nazwisko" th:class="${#fields.hasErrors('surname')}? 'error'" /><br/>

            <div class="info">Age: </div>   
            <input type="text" th:field="*{age}" th:class="${#fields.hasErrors('age')}? 'error'"/><br/>

            <div class="info">Number: </div>
            <input type="text" th:field="*{number}" th:class="${#fields.hasErrors('number')}? 'error'"/><br/>

            <input type="submit" class="button button-submit" value="EDIT"/>
        </form>
    </div>

上面的代码中的player是从Controller返回的对象:

@Controller
@RequestMapping(value = "/editPlayer")
public class EditPlayerController {

    @Autowired
    private PlayerRepository playerRepository;

    @RequestMapping(method = RequestMethod.GET)
    public String editPlayerForm(Model model){

        model.addAttribute("player", playerRepository.findOne((long) 1));

        return "editPlayer";
    }

    @RequestMapping(method = RequestMethod.POST)
    public String editPlayerSubmit(@Valid @ModelAttribute("player") Player player, 
            BindingResult bindingResult, Model model, 
            HttpSession session){

        if(bindingResult.hasErrors()) {
            return "editPlayer";
        }

        playerRepository.save(player);

        return "redirect:/coachSite";
    }
}

现在我将 Id = 1 添加到模型 Player 对象(在这一行中)

model.addAttribute("player", playerRepository.findOne((long) 1));

我想添加到模型玩家列表中，例如:

model.addAttribute("player", playerRepository.findAll());

...并在 editPlayer.html 中放置切换按钮(下一个和上一个)以显示 inf 表单，例如列表中的第一个用户，单击 Next 并显示下一个用户从表格列表中。我怎样才能做到这一点 ？任何想法 ？也许有人有使用 JavaScript 的好主意？

Answer 1

I dont need pages, only currently displayed object player and option to Next and Prevoius object, it must be show in my form int editPlayer.html. I don't know how implements this.

但可以肯定的是，您可能需要此解决方案的一个子集来实​​现上一个/下一个按钮。您要么通过 javascript 和样式(例如 css 显示属性)进行分页，要么向服务器发送请求。

你有两个选择:

1. 将所有数据加载到一页中(您的想法)
2. 为每次按下上一个/下一个按钮执行 ajax 请求

我的看法:

1. 所有数据仅加载一次，但这可能是交付给客户端的大量 html。大多数时候，您编辑一名球员后就会离开页面。这会造成浪费。

2. 您有一个干净的页面，仅包含所需的数据，并且可以通过 ajax 调用、片段渲染和 html 替换来替换它。缺点:每个页面都会有一次服务器往返。

也许我误解了你的意思，但我读到你想一次只显示一名玩家。我知道这不是您问题的技术答案，但是 a) 对于评论来说太长了 b) 在强制执行一个列表请求之前需要考虑一下。