PrimeFaces行编辑如何禁止未保存或取消上一行编辑就切换下一行

PrimeFaces DataTable的行编辑组件没有内置的编辑行互斥配置，通过前端事件拦截+后端状态标记即可实现「未保存/取消当前编辑行时禁止切换到其他行」的需求，具体实现如下：

第一步：修改DataTable前端配置 #

首先给表格绑定widgetVar方便前端调用，同时新增行编辑初始化事件拦截，原有保存、取消事件保留即可：

<!-- 给p:dataTable新增widgetVar配置，其余原有属性保持不变 -->
<p:dataTable id="orderEquipmentFinancialListTable" 
             widgetVar="orderEqTable" 
             editable="true">
    <!-- 原有行保存、行取消事件保留 -->
    <p:ajax event="rowEdit"
            listener="#{orderBean.orderProductEquipmentBean.onRowEditCpeFinancialSelectListener}"
            update="orderEquipmentFinancialListTable" />

    <p:ajax event="rowEditCancel"
            listener="#{orderBean.orderProductEquipmentBean.onRowCancelCpeFinancialSelectListener}"
            update="orderEquipmentFinancialListTable" />
    
    <!-- 新增行编辑初始化拦截 -->
    <p:ajax event="rowEditInit" 
            onstart="return checkEditingLock()"
            listener="#{orderBean.orderProductEquipmentBean.recordEditingRow}"
            update="@none" />

    <!-- 其余列、行编辑器配置保持原有代码不变 -->
</p:dataTable>

如果表格开启了分页、排序、筛选功能，给对应操作的<p:ajax>事件也加上onstart="return checkEditingLock()"配置，避免用户通过这类操作绕过编辑锁。

第二步：添加前端拦截逻辑 #

在页面脚本块中加入编辑状态校验逻辑，检测到未完成的编辑时直接拦截操作并弹出提示：

function checkEditingLock() {
    // 检测当前是否存在处于编辑状态的行
    const editingRows = PF('orderEqTable').tbody.find('tr.ui-row-editing');
    if (editingRows.length > 0) {
        // 可替换为PrimeFaces内置confirm组件实现统一样式
        alert('请先保存或取消当前正在编辑的行，再操作其他行');
        return false;
    }
    return true;
}

// 拦截行点击切换操作
$(document).on('click', '#orderEquipmentFinancialListTable tr', function(e) {
    const editingRows = PF('orderEqTable').tbody.find('tr.ui-row-editing');
    if (editingRows.length > 0 && !$(this).hasClass('ui-row-editing')) {
        e.stopImmediatePropagation();
        alert('请先保存或取消当前正在编辑的行，再操作其他行');
        return false;
    }
});

第三步：补充后端状态兜底逻辑 #

在对应Managed Bean中新增编辑状态标记，避免前端被绕过的异常情况，原有业务逻辑不需要改动：

// 新增成员变量记录当前正在编辑的行ID，支持新增行场景可替换为记录行索引
private Long currentEditingRowId = null;

// 新增行编辑初始化监听方法
public void recordEditingRow(RowEditEvent<OrderComponentFinancialDetail> event) {
    OrderComponentFinancialDetail editingRow = event.getObject();
    if (currentEditingRowId != null && !currentEditingRowId.equals(editingRow.getId())) {
        throw new IllegalStateException("请先完成当前行的编辑操作");
    }
    this.currentEditingRowId = editingRow.getId();
}

// 修改原有行保存方法，操作完成后清空编辑锁
public void onRowEditCpeFinancialSelectListener(RowEditEvent<OrderComponentFinancialDetail> event) {
    OrderComponentFinancialDetail selectedCpeFinancialDetail = event.getObject();
    if (selectedCpeFinancialDetail.getId() != null) {
        this.getOrderService().updateCpeFinancialDetail(this.processCpeMultiSelectionFinancialDetails(selectedCpeFinancialDetail));
        this.getOrderComponentFinancialDetails();
        this.addMessage(FacesMessage.SEVERITY_INFO, "CPE Updated", "Order Component CPE Financial" + selectedCpeFinancialDetail.getEventType() + " updated");
        // 保存成功后释放编辑锁
        this.currentEditingRowId = null;
    }
}

// 修改原有行取消方法，操作完成后清空编辑锁
public void onRowCancelCpeFinancialSelectListener(RowEditEvent<OrderComponentFinancialDetail> event) {
    // 原有取消业务逻辑保留
    // ......
    // 取消后释放编辑锁
    this.currentEditingRowId = null;
}

// 原有价格计算方法不需要改动
private BigDecimal calculateNetPrice(OrderComponentFinancialDetail financialDetail) {
    if ((financialDetail.getPercentDiscount() != null) && (financialDetail.getPercentDiscount().compareTo(Constants.BIG_DECIMAL_ZERO) == 0) && ((financialDetail.getManufacturerPercentageDiscount() != null) && (financialDetail.getManufacturerPercentageDiscount().floatValue() != 0)))
        return (financialDetail.getListPrice().subtract(financialDetail.getListPrice().multiply(financialDetail.getManufacturerPercentageDiscount().divide(Constants.BIG_DECIMAL_ONE_HUNDRED)))).setScale(2, RoundingMode.HALF_UP);
    else if ((financialDetail.getChargeAmount() != null) && (financialDetail.getPercentDiscount() != null) && (financialDetail.getChargeAmount().compareTo(Constants.BIG_DECIMAL_ZERO) == 0) && (financialDetail.getPercentDiscount().compareTo(Constants.BIG_DECIMAL_ZERO) == 0) && ((financialDetail.getManufacturerPercentageDiscount() != null) && (financialDetail.getManufacturerPercentageDiscount().compareTo(Constants.BIG_DECIMAL_ZERO) == 0)))
        return financialDetail.getListPrice();
    else
        return (financialDetail.getListPrice().subtract(financialDetail.getListPrice().multiply(financialDetail.getPercentDiscount().divide(Constants.BIG_DECIMAL_ONE_HUNDRED)))).setScale(2, RoundingMode.HALF_UP);
}

可选优化 #

可以将前端默认的alert提示替换为PrimeFaces官方的p:confirmDialog组件，提示后自动把焦点定位回当前编辑行，交互体验更统一。

内容的提问来源于stack exchange，提问作者Isabella