在 Primefaces 中永远不会触发使用 <p:dataTable> cellEdit 事件答案

【问题标题】：using <p:dataTable> cellEdit event is never fired in Primefaces在 Primefaces 中永远不会触发使用 <p:dataTable> cellEdit 事件
【发布时间】：2019-02-20 00:29:37
【问题描述】：

我在对数据表的 cellEdit 事件触发 ajax 调用时遇到问题。该表格在 UI 上显示得很好，但是当我单击任何单元格时没有任何反应。

xhtml

<h:form>
<p:dataTable id="decisionTree" var="tree"
                        value="#{treeBean.content}" editable="true" editMode="cell"
                        styleClass="smallGrid">

                        <f:facet name="header">
                         Notes Decision Tree
                     </f:facet>


                        <p:ajax event="cellEdit" listener="#{treeBean.onCellEdit}"
                            immediate="true" update=":#{p:component('notesTextArea')}" />
                        <p:column headerText="Comment Type">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{tree.commentType}" />
                                </f:facet>
                                <f:facet name="input">
                                    <p:inputText value="#{tree.commentType}" disabled="true" />
                                </f:facet>
                            </p:cellEditor>
                        </p:column>

                        <p:column headerText="MTCNs">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{tree.mtcns}" />
                                </f:facet>
                                <f:facet name="input">
                                    <p:inputText value="#{tree.mtcns}" disabled="true" />
                                </f:facet>
                            </p:cellEditor>
                        </p:column>

                        <p:column headerText="Call Type">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{tree.callType}" />
                                </f:facet>
                                <f:facet name="input">
                                    <p:inputText value="#{tree.callType}" disabled="true" />
                                </f:facet>
                            </p:cellEditor>
                        </p:column>

                        <p:column headerText="Phone">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{tree.phone}" />
                                </f:facet>
                                <f:facet name="input">
                                    <p:inputText value="#{tree.phone}" disabled="true" />
                                </f:facet>
                            </p:cellEditor>
                        </p:column>


                        <p:column headerText="Dispute Reason">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{tree.disputeReason}" />
                                </f:facet>
                                <f:facet name="input">
                                    <p:inputText value="#{tree.disputeReason}" disabled="true" />
                                </f:facet>
                            </p:cellEditor>
                        </p:column>


                        <p:column headerText="Placement Decision">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{tree.placementDescision}" />
                                </f:facet>
                                <f:facet name="input">
                                    <p:inputText value="#{tree.placementDescision}" disabled="true" />
                                </f:facet>
                            </p:cellEditor>
                        </p:column>
                        <!-- 
                        <p:column>
                            <p:rowEditor />
                        </p:column>
                        --> 
                    </p:dataTable>
</h:form>

这是豆子。

@Component("treeBean")
@Scope(value = "view", proxyMode = ScopedProxyMode.TARGET_CLASS)
public class TreeBean {

    private List<TreeDto> content;
    private String result="";

    public List<TreeDto> getContent() {
        return content;
    }

    public void setContent(List<TreeDto> content) {
        this.content = content;
    }

    @PostConstruct
    public void init() {
        content=new ArrayList<TreeDto>();
        TreeDto dto1=new TreeDto();
        dto1.setCommentType("First Attempt");
        dto1.setMtcns("mtcn1");
        dto1.setCallType("OBC");
        dto1.setPhone("8975730838");
        dto1.setDisputeReason("Fraud");
        dto1.setPlacementDescision("Write Off");
        content.add(dto1);

    }

    public void onCellEdit(CellEditEvent event) {

        RequestContext.getCurrentInstance().showMessageInDialog(new FacesMessage(FacesMessage.SEVERITY_INFO, "Status","something clicked"));

    }


}

我打算捕获单击的单元格的值。但是我无法在单元格编辑时首先触发事件。请给我一些关于如何解决这个问题的建议。

【问题讨论】：

标签： jsf primefaces

【解决方案1】：

尝试向您的 dataTable 添加一个 widgetVar，然后使用您的数据表的 contextMenu 编辑您的单元格，调用 onclick="PF('yourWidgetVar').showCellEditor();return false;"

类似的东西

<p:contextMenu for="decisionTree" widgetVar="cMenu">   
       <p:menuitem value="Edit Cell" icon="ui-icon-search" onclick="PF('yourWidgetVar').showCellEditor();return false;"/>  
       <p:menuitem value="Hide Menu" icon="ui-icon-close" onclick="PF('cMenu').hide()"/>  
</p:contextMenu>

您也可以查看 Primefaces 文档：

https://www.primefaces.org/showcase/ui/data/datatable/edit.xhtml

【讨论】：

您使用的是什么 Primefaces 版本？
只有在我编辑单元格中的值时才有效。我不希望他的用户能够编辑单元格值并禁用输入文本。因此 cellEdit 事件永远不会被触发。如何在用户选择特定单元格时捕获单元格值而无需编辑单元格值。有什么办法可以使用 onClick 事件吗？请提出建议。
看看这个帖子stackoverflow.com/questions/18611479/…