You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

点击DataTable删除按钮后,实现确认弹窗及条件触发Listbox弹窗

实现DataTable删除按钮的多级对话框逻辑

我来给你捋清楚怎么实现这个需求,用JSF+PrimeFaces的组合来做会很顺畅,下面是完整的代码示例和细节说明:

第一步:编写view.xhtml页面代码

<h:form id="userForm">
    <!-- 数据表格 -->
    <p:dataTable id="userTable" value="#{userBean.users}" var="user">
        <p:column headerText="用户名">
            <h:outputText value="#{user.username}" />
        </p:column>
        <p:column headerText="操作">
            <!-- 删除按钮:点击触发确认对话框 -->
            <p:commandButton icon="pi pi-trash" value="删除" 
                             onclick="PF('deleteConfirmDialog').show();" 
                             styleClass="ui-button-danger">
                <!-- 传递当前用户ID到后台 -->
                <f:setPropertyActionListener target="#{userBean.selectedUserId}" value="#{user.id}" />
            </p:commandButton>
        </p:column>
    </p:dataTable>

    <!-- 第一级:删除确认对话框 -->
    <p:confirmDialog id="deleteConfirm" widgetVar="deleteConfirmDialog" 
                     header="确认删除" message="确定要删除该用户吗?"
                     severity="warn" closable="true">
        <p:commandButton value="确认" oncomplete="handleDeleteResult(xhr, status, args);" 
                         action="#{userBean.checkDeleteCondition}" 
                         update=":userForm:conditionDialog" />
        <p:commandButton value="取消" onclick="PF('deleteConfirmDialog').hide();" />
    </p:confirmDialog>

    <!-- 第二级:带Listbox的条件满足对话框 -->
    <p:dialog id="conditionDialog" widgetVar="conditionDialog" 
              header="提示:需选择关联项" modal="true" visible="#{userBean.showConditionDialog}">
        <p:listbox id="relatedItemsList" value="#{userBean.relatedItems}" var="item" 
                   selection="#{userBean.selectedItem}" 
                   style="width: 100%; height: 200px;">
            <p:column>
                <h:outputText value="#{item.name}" />
            </p:column>
        </p:listbox>
        <div style="text-align: right; margin-top: 15px;">
            <p:commandButton value="确认处理" action="#{userBean.processDeleteWithItem}" 
                             oncomplete="PF('conditionDialog').hide(); PF('deleteConfirmDialog').hide();"
                             update=":userForm:userTable" />
        </div>
    </p:dialog>

    <!-- 用于处理AJAX返回结果的JS脚本 -->
    <h:outputScript>
        function handleDeleteResult(xhr, status, args) {
            // 如果后台返回条件满足,则显示带Listbox的对话框
            if (args.conditionMet) {
                PF('conditionDialog').show();
            } else {
                // 条件不满足,直接执行删除并刷新表格
                PF('deleteConfirmDialog').hide();
                PF('userTable').refresh();
            }
        }
    </h:outputScript>
</h:form>

第二步:编写对应的后台Bean代码

import javax.faces.view.ViewScoped;
import javax.inject.Named;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

@Named
@ViewScoped
public class UserBean implements Serializable {
    // 模拟用户数据列表
    private List<User> users;
    // 当前选中的用户ID
    private Long selectedUserId;
    // 控制条件对话框是否显示
    private boolean showConditionDialog;
    // 关联项列表(用于Listbox)
    private List<RelatedItem> relatedItems;
    // 选中的关联项
    private RelatedItem selectedItem;

    // 初始化模拟数据
    public UserBean() {
        users = new ArrayList<>();
        users.add(new User(1L, "张三"));
        users.add(new User(2L, "李四"));
        users.add(new User(3L, "王五"));

        relatedItems = new ArrayList<>();
        relatedItems.add(new RelatedItem(1L, "关联项目A"));
        relatedItems.add(new RelatedItem(2L, "关联项目B"));
    }

    // 检查删除条件的方法
    public void checkDeleteCondition() {
        // 这里替换成你的实际条件判断逻辑,比如检查用户是否有未完成的关联任务
        boolean conditionMet = selectedUserId == 2L; // 模拟:ID为2的用户满足条件

        // 通过AJAX返回结果给前端
        javax.faces.context.FacesContext.getCurrentInstance()
                .getExternalContext()
                .getRequestMap()
                .put("conditionMet", conditionMet);
        
        this.showConditionDialog = conditionMet;
    }

    // 选择关联项后的删除处理方法
    public void processDeleteWithItem() {
        // 这里执行删除逻辑,同时处理选中的关联项
        users.removeIf(user -> user.getId().equals(selectedUserId));
        // 可以添加对selectedItem的处理逻辑
    }

    // 省略getter和setter方法
    public List<User> getUsers() { return users; }
    public void setUsers(List<User> users) { this.users = users; }
    public Long getSelectedUserId() { return selectedUserId; }
    public void setSelectedUserId(Long selectedUserId) { this.selectedUserId = selectedUserId; }
    public boolean isShowConditionDialog() { return showConditionDialog; }
    public void setShowConditionDialog(boolean showConditionDialog) { this.showConditionDialog = showConditionDialog; }
    public List<RelatedItem> getRelatedItems() { return relatedItems; }
    public void setRelatedItems(List<RelatedItem> relatedItems) { this.relatedItems = relatedItems; }
    public RelatedItem getSelectedItem() { return selectedItem; }
    public void setSelectedItem(RelatedItem selectedItem) { this.selectedItem = selectedItem; }

    // 模拟用户实体类
    public static class User {
        private Long id;
        private String username;
        public User(Long id, String username) { this.id = id; this.username = username; }
        public Long getId() { return id; }
        public void setId(Long id) { this.id = id; }
        public String getUsername() { return username; }
        public void setUsername(String username) { this.username = username; }
    }

    // 模拟关联项实体类
    public static class RelatedItem {
        private Long id;
        private String name;
        public RelatedItem(Long id, String name) { this.id = id; this.name = name; }
        public Long getId() { return id; }
        public void setId(Long id) { this.id = id; }
        public String getName() { return name; }
        public void setName(String name) { this.name = name; }
    }
}

关键逻辑说明

  • 删除按钮触发确认框:点击删除按钮时,通过onclick="PF('deleteConfirmDialog').show();"弹出确认对话框,同时用f:setPropertyActionListener把当前用户的ID传递到后台Bean。
  • 确认后的条件检查:点击确认按钮后,调用后台的checkDeleteCondition()方法执行条件判断,通过AJAX把判断结果返回给前端JS。
  • 条件满足时显示Listbox对话框:前端JS根据返回的conditionMet值,决定是否弹出带Listbox的对话框;用户选择关联项后,点击确认按钮执行最终的删除+关联项处理逻辑,然后刷新表格并关闭所有对话框。
  • 条件不满足时直接删除:如果条件不成立,直接关闭确认框并刷新表格完成删除。

这样整个流程就完全符合你的需求啦,你只需要把模拟的条件判断和业务逻辑替换成你实际的业务代码就行~

内容的提问来源于stack exchange,提问作者scofield

火山引擎 最新活动