使用 <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