在本文中，我将指导你如何在 Java 中创建一个动态删除模态框。你需要构建一个模态弹出框，该弹出框可以根据你想要删除的具体项目调整其内容。这意味着，当你点击某个特定项目的删除按钮时，模态框应该更新以显示该项目的详细信息，并确认删除操作。
一. 创建动态删除模态框的步骤
1. 创建模态框布局
首先，在您的 HTML 或 JSP 文件中设计模态框的基本结构。这个模态框应包括标题、询问用户是否确定要删除该项目的消息，以及两个按钮：一个确认删除，另一个取消。
<div id="deleteModal" class="modal">
<div class="modal-content">
<span class="close">×span>
<h2>确认删除h2>
<p id="modalMessage">您确定要删除这个项目吗？p>
<button id="confirmDelete">删除button>
<button id="cancelDelete">取消button>
div>
div>
2. 设置点击事件监听器
在您的 JavaScript 或 jQuery 代码中，为删除按钮添加点击事件监听器。此监听器将在点击删除按钮时触发模态框的显示。
// 使用 jQuery 添加点击事件监听器
$(document).on('click', '.delete-button', function() {
var itemId = $(this).data('item-id'); // 获取要删除的项目 ID
var itemName = $(this).data('item-name'); // 获取要删除的项目名称
$('#modalMessage').text('您确定要删除项目 ' + itemName + ' 吗？'); // 更新模态框消息文本
$('#confirmDelete').data('item-id', itemId); // 将项目 ID 存储在确认按钮的 data 属性中
$('#deleteModal').show(); // 显示模态框
});
3. 传递项目数据到模态框
当点击删除按钮时，JavaScript 或 jQuery 代码应将有关该项目的相关数据（如 ID 或名称）传递到模态框。这可能涉及将模态框消息的文本设置为包含项目名称或在模态框内的隐藏字段中存储项目 ID。
// 更新模态框的消息文本
$('#modalMessage').text('您确定要删除项目 ' + itemName + ' 吗？');
4. 处理 Java 中的删除操作
在 Java 代码（如 Servlet 或 Controller）中，编写逻辑以在用户确认删除时从数据库中删除项目。当用户点击确认按钮时，应触发表单提交或 AJAX 调用，将项目 ID 发送到 Java 代码。Java 代码处理此请求并从数据库中删除项目。
// 删除项目的 Controller 示例
@RestController
public class ItemController {
@Autowired
private ItemService itemService;
@PostMapping("/deleteItem")
public ResponseEntity deleteItem(@RequestParam("itemId") UUID itemId) {
itemService.delete(itemId);
return ResponseEntity.ok("项目删除成功");
}
}
5. 提供用户反馈
删除操作后，更新 UI 以反映已删除的项目。您可以关闭模态框并从页面上的列表中删除已删除的项目，或显示成功消息。
// 确认删除按钮的点击事件
$('#confirmDelete').click(function() {
var itemId = $(this).data('item-id');
$.post('/deleteItem', { itemId: itemId }, function(response) {
alert(response);
$('#deleteModal').hide(); // 关闭模态框
// 从页面上移除已删除的项目
});
});
二. 后端代码示例
1. 模态框/实体类
import java.io.Serializable;
import java.util.Date;
import java.util.UUID;
import jakarta.persistence.Column;
import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import jakarta.persistence.Table;
import jakarta.persistence.Temporal;
import jakarta.persistence.TemporalType;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@NoArgsConstructor
@AllArgsConstructor
@Entity
@Table(name = "Item")
public class Item implements Serializable {
private static final long serialVersionUID = 7550366616815293436L;
@Id
@GeneratedValue(strategy = GenerationType.UUID)
@Column(name = "item_id", unique = true, nullable = false)
private UUID id; // 项目 ID
@Column(name = "item_name")
private String name; // 项目名称
@Column(name = "payrun_id")
private UUID payrunId; // 支付运行 ID
@Column(name = "cobalt_entity_id")
private UUID entityId; // 钴蓝实体 ID
@Column(name = "pay_element_no")
private UUID payElementCode; // 支付元素编号
@Column(name = "pay_element_name")
private String payElementName; // 支付元素名称
@Column(name = "wage_group")
private String wageGroup; // 工资组
@Column(name = "value")
private String value; // 值
@Column(name = "rate")
private String rate; // 比率
@Column(name = "units")
private String units; // 单位
@Column(name = "currency")
private String currency; // 货币
@Column(name = "Recurring")
private String recurring; // 是否定期
@Column(name = "frequency")
private String frequency; // 频率
@Column(name = "effective_date")
private Date effectiveDate; // 生效日期
@Column(name = "status")
private String status; // 状态
@Column(name = "created_by")
private UUID createdBy; // 创建者
@Temporal(TemporalType.TIMESTAMP)
@Column(name = "created_at")
private Date createdAt; // 创建时间
@Temporal(TemporalType.TIMESTAMP)
@Column(name = "updated_at")
private Date updatedAt; // 更新时间
@Column(name = "updated_by")
private UUID updatedBy; // 更新者
}
2. 控制器类
@RestController
public class ItemController {
@Autowired
private ItemService itemService;
@GetMapping("/getItemDetails")
public ResponseEntity- getItemDetails(@RequestParam("itemId") UUID itemId)
{
// 从数据库中获取项目详情
Item item = itemService.findById(itemId);
return ResponseEntity.ok(item);
}
@PostMapping("/deleteItem")
public ResponseEntity deleteItem(@RequestParam("itemId") UUID itemId) {
// 从数据库中删除项目
itemService.delete(itemId);
return ResponseEntity.ok("项目删除成功");
}
}
3. 服务层
@Service
public class ItemService {
@Autowired
private ItemRepository itemRepository;
public Item findById(UUID itemId) {
return itemRepository.findById(itemId).orElseThrow(() -> new ItemNotFoundException("项目未找到"));
}
public void delete(UUID itemId) {
itemRepository.deleteById(itemId);
}
}
4. 仓储层
@Repository
public interface ItemRepository extends JpaRepository<Item, UUID> {
}
三. 总结
本文介绍了如何实现一个动态删除模态框，使其能够根据所选项目动态显示内容。通过使用 JavaScript 和 AJAX 进行前端交互，结合 Java 控制器处理删除请求，可以确保删除操作既快速又准确。这种方法不仅提高了用户体验，也减少了操作错误的可能性。