jsf - <P: ajax event="cellEdit"> पर पूरा<p: dataTable> को अपडेट कर रहा है




primefaces celleditorlistener (3)

सेल संपादित होने के बाद मुझे प्राइमफेस डेटाटेबल को दोबारा प्रस्तुत करने में कठिनाई हो रही है। एक सेल में मान बदलने से अन्य कोशिकाओं में प्रविष्टियां बदल सकती हैं, इसलिए पूरी तालिका को रीफ्रेश करने की आवश्यकता है।

जेएसएफ पेज यहां है:

<h:form id="testForm">
    <p:outputPanel id="testContainer">

        <p:dataTable id="testTable" value="#{tableBean.data}" var="entry" editable="true" editMode="cell">

            <p:ajax event="cellEdit" listener="#{tableBean.onCellEdit}" update=":testForm:testContainer" />

            <p:column headerText="Col1">  
                <p:cellEditor>
                    <f:facet name="output"><h:outputText value="#{entry.col1}" /></f:facet>
                    <f:facet name="input"><p:inputText value="#{entry.col1}" /></f:facet>
                </p:cellEditor> 
            </p:column>

            <p:column headerText="Col2">
                <p:cellEditor>
                    <f:facet name="output"><h:outputText value="#{entry.col2}" /></f:facet>
                    <f:facet name="input"><p:inputText value="#{entry.col2}" /></f:facet>
                </p:cellEditor>  
            </p:column>

        </p:dataTable>

        <p:commandButton id="refreshButton" value="Redisplay" update="testContainer" />

    </p:outputPanel>                                    
</h:form>

और यहां बैकिंग बीन है:

@ManagedBean(name = "tableBean", eager = false)
@ViewScoped 
public class TableBean {

    public TableBean() {
        RowData entry = new RowData("a1", "b1");
        entries.add(entry);
        entry = new RowData("a2", "b2");
        entries.add(entry);
        entry = new RowData("a3", "b3");
        entries.add(entry);
    }

    public class RowData {

        private String col1;
        private String col2;

        public RowData(String col1, String col2) {
            this.col1 = col1;
            this.col2 = col2;
        }

        public String getCol1() {
            return col1;
        }

        public void setCol1(String col1) {
            this.col1 = col1;
        }

        public String getCol2() {
            return col2;
        }

        public void setCol2(String col2) {
            this.col2 = col2;
        }
    }

    private ArrayList<RowData> entries = new ArrayList<RowData>();

    public List<RowData> getData() {
        return entries;
    }

    public void onCellEdit(CellEditEvent event) {
        entries.get(event.getRowIndex()).setCol1("Dummy Col 1");
        entries.get(event.getRowIndex()).setCol2("Dummy Col 2");        
    }   
}

सेलएडिट एजेक्स इवेंट के भीतर अद्यतन = ": testForm: testContainer" सहित, सेल मान बदलने से स्क्रीन पर डेटाटेबल को हटा दिया जाता है और केवल सेल सामग्री (बटन के साथ) प्रस्तुत करता है - मुझे समझ में नहीं आता कि यह क्यों है। जब अद्यतन विशेषता निर्दिष्ट नहीं होती है, तो तालिका सक्रिय सेल के साथ स्क्रीन पर बनी रहती है, लेकिन अन्य कोशिकाओं में से कोई भी अपडेट नहीं किया जाता है (जैसा कि उम्मीद की जा सकती है)।

वांछित व्यवहार को AJAX सेल एडिट ईवेंट के भीतर अद्यतन विशेषता निर्दिष्ट नहीं करके और सेल के मान को संपादित करने के बाद Redisplay बटन पर क्लिक करके (एक गैर-स्वचालित तरीके से) प्राप्त किया जा सकता है। मैं इसे स्वचालित तरीके से कैसे प्राप्त कर सकता हूं, और अपडेट विशेषता क्यों काम नहीं करती है?

मैं प्राइमफेस 4.0 का उपयोग कर रहा हूं।


BaLusC समाधान सीधे मेरे लिए काम नहीं किया है। OnCellEdit को सेलएडिटइवेंट को सर्वो के रूप में चाहिए। मेरा कामकाज निम्नानुसार है:

<p:remoteCommand name="onCellEdit" update="testContainer" />
<p:dataTable ...>
    <p:ajax event="cellEdit" listener="#{tableBean.onCellEdit}" oncomplete="onCellEdit()" />
    ...
</p:dataTable>

मैंने आपके कोड का परीक्षण किया। सबसे पहले मैंने पी को स्थानांतरित किया: कमांड बटन से बाहर: आउटपुट पैनल। यहां संशोधित कोड है:

<h:form id="testForm">
            <p:outputPanel id="testContainer">

                <p:dataTable id="testTable" value="#{tableBean.data}" var="entry" editable="true" editMode="cell">

                    <p:ajax event="cellEdit" listener="#{tableBean.onCellEdit}" update=":testForm:testContainer" />

                    (...)

                </p:dataTable>
            </p:outputPanel>
            <p:commandButton id="refreshButton" value="Redisplay" update="testContainer" />
        </h:form>

मुझे लगता है कि यह कोड सही ढंग से काम नहीं करता है। यदि आप तालिका में कुछ भी बदलते हैं, तो पी: AJAX हर बार पूर्ण तालिका प्रस्तुत करता है। इसलिए, प्रोग्राम टेबलबीन कन्स्ट्रक्टर से मूल डेटा लोड करता है और हटाए गए नए डेटा को लोड करता है।

अगर मैं आपका पी छोड़ देता हूं: AJAX कोड स्क्रीन से कोई नया डेटा अपमान नहीं करता है। refreshButton : कमांड बटन सही तरीके से काम करता है।

सेलएडिट एजेक्स इवेंट के भीतर अद्यतन = ": testForm: testContainer" सहित, सेल मान बदलने से स्क्रीन पर डेटाटेबल को हटा दिया जाता है और केवल सेल सामग्री (बटन के साथ) प्रस्तुत करता है - मुझे समझ में नहीं आता कि यह क्यों है।

मुझे लगता है कि यह खराब डिज़ाइन update=":testForm:testContainer" AJAX पर, क्योंकि यह आपके आउटपुट को अपडेट कर रहा है, जितना अधिक से अधिक है (पहली बार सही ढंग से काम करता है, दूसरी बार सेल संपादित नहीं कर सका, क्योंकि प्रोग्राम कई बार टेबल अपडेट करता है) ।

मुझे नहीं पता कि आपका लक्ष्य क्या है। यदि आप कमांड बटन के बिना टेबल प्रस्तुत करना चाहते हैं, तो क्या आप एक जावास्क्रिप्ट ईवेंट या पी: संदेश निर्दिष्ट कर सकते हैं और यह गायब हो जाता है कि आप तालिका प्रस्तुत कर सकते हैं।

मुझे लगता है कि अगर आप पी: AJAX में अद्यतन छोड़ देते हैं या एक पी: संदेश का अद्यतन निर्दिष्ट करते हैं, और p.command बटन को testContainer बाहर ले जाएं, तो आपका कोड सही ढंग से काम करना शुरू कर देता है।


rowEdit और cellEdit घटनाएं तालिका के अंदर डिज़ाइन द्वारा वर्तमान पंक्ति की तुलना में कुछ भी अपडेट / पुनः प्रस्तुत नहीं करती हैं, भले ही update विशेषता में स्पष्ट रूप से निर्दिष्ट न हो। यह प्रतिक्रिया आकार को कम करने के लिए प्राइमफेस के थोड़ा अति उत्साही प्रयास का परिणाम है। यह ज्यादातर मामलों में समझ में आता है, लेकिन विशेष रूप से आपके मामले में नहीं। यह एक मुद्दा रिपोर्ट के लायक है।

इस बीच, जब तक वे इस व्यवहार को ठीक नहीं करते हैं, तब तक आपकी सबसे अच्छी शर्त <p:remoteCommand> का उपयोग वांछित श्रोता विधि का आह्वान करने और तालिका का पूरा अपडेट करने के लिए कर रही है।

फिर से लिखना

<p:dataTable ...>
    <p:ajax event="cellEdit" listener="#{tableBean.onCellEdit}" update=":testForm:testContainer" />
    ...
</p:dataTable>

सेवा मेरे

<p:remoteCommand name="onCellEdit" action="#{tableBean.onCellEdit}" update="testContainer" />
<p:dataTable ...>
    <p:ajax event="cellEdit" oncomplete="onCellEdit()" />
    ...
</p:dataTable>