时间戳

首页 > 解决方案 > 操作删除不会删除所选行

html - 操作删除不会删除所选行

问题描述

我正在开发一个 Spring Boot Web 应用程序。在产品列表视图中，当我想在弹出窗口出现时单击“是”后删除其中一行时，删除的行始终是表中的第一个，而不是所选行。我想我的循环有问题。我正在使用带有百里香叶的 Bootstrap

索引.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymleaf/layout">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Product Management</title>
</head>
<body>

<header>
    <div class="navbar navbar-inverse">
        <div class="container-fluid">
            <ul class="nav navbar-nav">
                <li><a th:href="@{/}">Products list</a></li>
                <li><a th:href="@{/new}">Add a product</a></li>
            </ul>
        </div>
    </div>
</header>
<div align="center">
    <br /> <br />
    <h2>
        <b><p class="bg-danger">PRODUCTS LIST</p></b>
    </h2>

    <br /> <br />


    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Manufacturer</th>
                    <th>Country</th>
                    <th>Price</th>
                    <th>Designation</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="product : ${listProducts}">
                    <td th:text="${product.id}">Product ID</td>
                    <td th:text="${product.name}">Model name</td>
                    <td th:text="${product.brand}">Manufacturer</td>
                    <td th:text="${product.madein}">Country</td>
                    <td th:text="${product.price}">Price</td>
                    <td th:text="${product.price}">Designation</td>
                    <td><a class="btn btn-primary" role="button"
                        th:href="@{'/edit/' + ${product.id}}">Edit</a>
                        &nbsp;&nbsp;&nbsp;&nbsp; <a class="btn btn-danger" role="button"
                        data-toggle="modal" data-target="#myModal">Delete</a> <!-- Modal -->
                        <div class="modal fade" id="myModal" role="dialog">
                            <div class="modal-dialog">

                                <!-- Modal content-->
                                <div class="modal-content">
                                    <div class="modal-body">
                                        <p>Are you sure to delete this products ?</p>
                                    </div>
                                    <div class="modal-footer">
                                        <a class="btn btn-primary" role="button"
                                            th:href="@{'/delete/' + ${product.id}}">Yes</a>
                                        <button type="button" class="btn btn-default"
                                            data-dismiss="modal">Cancel</button>

                                    </div>
                                </div>

                            </div>
                        </div></td>

                </tr>
            </tbody>
        </table>
    </div>


    <br /> <br /> <a class="btn btn-success" href="new" role="button">Create
        a new product</a> <br /> <br /> <br /> <br />

    <!-- Footer -->
    <footer class="page-footer font-small blue fixed-bottom">

        <!-- Copyright -->
        <div class="footer-copyright text-center py-3">
            © 2020 Copyright: <a href="@{/}"> www.sample.com</a>
        </div>
        <!-- Copyright -->

    </footer>
    <!-- Footer -->
</body>
</html>

产品控制器：

package com.gestion.products.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;

import com.gestion.products.entity.Product;
import com.gestion.products.service.ProductService;


@Controller
@RequestMapping(name = "/all")
public class ProductController {

@Autowired
private ProductService service;

@RequestMapping("/")
public String viewHomePage(Model model) {
    List<Product> listProducts = service.listAll();
    model.addAttribute("listProducts", listProducts);

    return "index";
}


@RequestMapping("/new")
public String showNewProductForm(Model model) {

    Product product = new Product();
    model.addAttribute("product",product);
    return "new_product";
}

@RequestMapping(value = "/save", method = RequestMethod.POST)
public String saveProduct(@ModelAttribute("product") Product product) {

    service.save(product);
    return "redirect:/";
}

@RequestMapping("/edit/{id}")
public ModelAndView showEditProductForm(@PathVariable(name = "id") Long id) {

    ModelAndView mav = new ModelAndView("edit_product");
    Product product = service.get(id);
    mav.addObject("product", product);
    return mav;
}

@RequestMapping("/delete/{id}")
public String deleteProduct(@PathVariable(name = "id") Long id) {

    service.delete(id);
    return "redirect:/";
}

}

标签： htmlspring-bootspring-mvcbootstrap-4thymeleaf

解决方案

我昨天遇到了同样的问题，我找到了另一种解决方法。

所以我也在使用模态，问题就出在它上面。

我建议您使用引导确认插件而不是模式，这样控制器会更容易获取所选行的 id。

使用模态会使控制器选择一个随机的 id 而不是选择的。

推荐阅读