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

Question

我在触发Data Table的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"));

    }


}

我打算捕捉点击的单元格的价值。 但是我无法在单元格编辑中首先触发一个事件。 请给我一些有关如何解决此问题的建议。

Answer 1

尝试向您的数据表中添加一个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