प्राइमफ़ेस डेटाटेबल पंक्तिबद्ध: केवल एक पंक्ति संपादन को अनुमति दें

Question

मैं जेएसएफ 2.1.6 और प्राइमफेस 3.4.1 के साथ काम कर रहा हूं और मेरे पास एक प्रश्न है।

मेरे पास पंक्ति संपादक के साथ एक संपादन योग्य डेटाटेबल है। आप प्रत्येक पंक्ति के पेंसिल बटन पर क्लिक कर सकते हैं, और पंक्ति संपादन योग्य होगी। लेकिन डिफ़ॉल्ट रूप से कई पेंसिल बटन पर क्लिक करना संभव है, और इसी कारण से कई पंक्तियां संपादन योग्य होंगी।

लेकिन मुझे संपादन मोड में केवल एक पंक्ति चाहिए।

<p:dataTable value="rows" var="row" editable="true" 
id="myTable" widgetVar="myTableVar" styleClass="myTableStyle"> 

    <p:ajax event="rowEdit" listener="#{myBean.onUpdateRow}" /> 
    <p:ajax event="rowEditCancel" /> 

    <p:columnGroup type="header"> 
     <p:column headerText="Name" /> 
     <p:column headerText="Age" /> 
     ... 
     <p:column headerText="Edit" /> 
    </p:columnGroup> 

    <p:column> 
     <p:cellEditor> 
     <f:facet name="output"> 
       <h:outputText value="#{row.name}" /> 
      </f:facet> 
      <f:facet name="output"> 
       <h:inputText value="#{row.name}" /> 
      </f:facet> 
     </p:cellEditor> 
    </p:column> 

    <p:column> 
     <p:cellEditor> 
     <f:facet name="output"> 
       <h:outputText value="#{row.age}" /> 
      </f:facet> 
      <f:facet name="output"> 
       <h:inputText value="#{row.age}" /> 
      </f:facet> 
     </p:cellEditor> 
    </p:column> 

    ... 

    <p:column> 
     <p:commandLink update="myTable"> 
      <p:rowEditor /> 
     </p:commandLink> 
    </p:column> 

</p:dataTable> 

<p:commandButton icon="ui-icon-plus" action="#{myBean.addNewRow}" update="myTable" 
oncomplete="$('.myTableStyle tbody.ui-datatable-data tr:last-child td span.ui-row-editor span.ui-icon-pencil').click()" 
title="Add new row" /> 

मैं एक कमांड लिंक घटक में पंक्ति संपादक घटक समझाया गया है, जब पंक्ति संपादक पर क्लिक क्योंकि अब मैं जावास्क्रिप्ट कोड जोड़ सकते हैं:

यह मेरा कोड का एक नमूना है।

मैं commandLink को यह जावास्क्रिप्ट कोड जोड़ने की कोशिश की है:

onclick="$('.myTableStyle tbody.ui-datatable-data tr td span.ui-row-editor span.ui-icon-cancel').click()" 

लेकिन यह इतना प्रत्यावर्तन और नहीं काम करता है बनाएँ।

पंक्ति संपादक में तीन अवधि लिंक हैं: एक संपादन मोड (ui-icon-pencil) खोलने के लिए, दूसरा संस्करण (ui-icon-check) सहेजता है, और अन्य जो संस्करण को रद्द करता है (ui-icon- बंद करे)। थर सहेजने के लिए एक AJAX घटना है (rowEdit), और रद्द करने के लिए अन्य घटना (rowEditCancel)।

फ़ाइलें जहां संपादन मोड सक्रिय नहीं है, पंक्ति संपादक इस तरह फैला होता है:

<span class="ui-icon ui-icon-pencil"></span> 
<span class="ui-icon ui-icon-check" style="display:none"></span> 
<span class="ui-icon ui-icon-close" style="display:none"></span> 

और फ़ाइलों जहां संपादन मोड पंक्ति संपादक सक्रिय होता है इस तरह फैला होता है:

<span class="ui-icon ui-icon-pencil" style="display:none"></span> 
<span class="ui-icon ui-icon-check"></span> 
<span class="ui-icon ui-icon-close"></span> 

तो, क्या मैं केवल उन पंक्तियों पर क्लिक कर सकता हूं जहां संपादन मोड सक्रिय है? या संपादन मोड में केवल एक पंक्ति की अनुमति देने के लिए कोई फ़ंक्शन या प्रॉपर्टी है? क्या मैं केवल jQuery के साथ आइकन ui-icon-close के साथ स्पैन कर सकता हूं जब उस अवधि में इनलाइन प्रदर्शित होती है, और अन्य कोई भी प्रदर्शित नहीं करता है?

अद्यतन: समाधान मैं

पाया है मैं सिर्फ एक घर का बना समाधान मिल गया है। यहां यह है: मैंने लिंक पर एक ऑनस्टार्ट फ़ंक्शन जोड़ा है, लेकिन यह एक प्रदर्शन समस्या उत्पन्न करता है: इसे सहेजने, संपादित करने और रद्द करने के लिए दोनों कहा जाता है। और मैंने ऐड पंक्ति बटन के अपूर्ण कार्य को भी बदल दिया है।

<p:dataTable value="rows" var="row" editable="true" 
id="myTable" widgetVar="myTableVar" styleClass="myTableStyle"> 

    <p:ajax event="rowEdit" listener="#{myBean.onUpdateRow}" /> 
    <p:ajax event="rowEditCancel" /> 

    <p:columnGroup type="header"> 
     <p:column headerText="Name" /> 
     <p:column headerText="Age" /> 
     ... 
     <p:column headerText="Edit" /> 
    </p:columnGroup> 

    <p:column> 
     <p:cellEditor> 
     <f:facet name="output"> 
       <h:outputText value="#{row.name}" /> 
      </f:facet> 
      <f:facet name="output"> 
       <h:inputText value="#{row.name}" /> 
      </f:facet> 
     </p:cellEditor> 
    </p:column> 

    <p:column> 
     <p:cellEditor> 
     <f:facet name="output"> 
       <h:outputText value="#{row.age}" /> 
      </f:facet> 
      <f:facet name="output"> 
       <h:inputText value="#{row.age}" /> 
      </f:facet> 
     </p:cellEditor> 
    </p:column> 

    ... 

    <p:column> 
     <p:commandLink update="myTable" onstart="$('.myTableStyle tbody.ui-datatable-data tr td .ui-cell-editor-input').hide(); $('.myTableStyle tbody.ui-datatable-data tr td .ui-cell-editor-output').show(); $('.myTableStyle tbody.ui-datatable-data tr td span.ui-row-editor span.ui-icon-pencil').show(); $('.myTableStyle tbody.ui-datatable-data tr td span.ui-row-editor span.ui-icon-check').hide(); $('.myTableStyle tbody.ui-datatable-data tr td span.ui-row-editor span.ui-icon-close').hide(); $('.myTableStyle tbody.ui-datatable-data tr').removeClass('ui-state-highlight'); return false;"> 
      <p:rowEditor /> 
     </p:commandLink> 
    </p:column> 

</p:dataTable> 

<p:commandButton icon="ui-icon-plus" action="#{myBean.addNewRow}" update="myTable" 
oncomplete="$('.myTableStyle tbody.ui-datatable-data tr:last-child td .ui-cell-editor-input').show(); $('.myTableStyle tbody.ui-datatable-data tr:last-child td .ui-cell-editor-output').hide(); $('.myTableStyle tbody.ui-datatable-data tr:last-child td span.ui-row-editor span.ui-icon-pencil').hide(); $('.myTableStyle tbody.ui-datatable-data tr:last-child td span.ui-row-editor span.ui-icon-check').show(); $('.myTableStyle tbody.ui-datatable-data tr:last-child td span.ui-row-editor span.ui-icon-close').show(); $('.myTableStyle tbody.ui-datatable-data tr:last-child').addClass('ui-state-highlight'); return false; 
title="Add new row" /> 

अद्यतन-2: अंत में मैं प्रदर्शन मुद्दे का समाधान मिल गया। मेरी समस्या यह थी कि पंक्ति संस्करण को संपादित, सहेजने और रद्द करने के लिए क्लिक करते समय जावास्क्रिप्ट क्रिया को बुलाया गया था। इसे रोकने के लिए, मैंने ऑनस्टार्ट फ़ंक्शन को ऑनक्लिक फ़ंक्शन में बदल दिया है जो अन्य पंक्तियों को केवल संपादन पंक्ति बटन (पेंसिल आइकन) पर क्लिक करते समय गैर संपादन योग्य में बदल देता है। ऐसा करने के लिए मैं event.target का उपयोग करता हूं, यह जानने के लिए कि किस तत्व ने क्लिक किया है। पंक्ति संपादित करने के रूप में, पंक्ति संपादित करें और पंक्ति संपादित करें रद्द करें बटन में अलग-अलग वर्ग (ui-icon-pencil, ui-icon-check और ui-icon-close) हैं, यह संभव हो सकता है कि आप कौन सा बटन दबाया जा सके।

onclick="$(if($(event.target).hasClass('ui-icon-pencil')) {'.myTableStyle tbody.ui-datatable-data tr td .ui-cell-editor-input').hide(); $('.myTableStyle tbody.ui-datatable-data tr td .ui-cell-editor-output').show(); $('.myTableStyle tbody.ui-datatable-data tr td span.ui-row-editor span.ui-icon-pencil').show(); $('.myTableStyle tbody.ui-datatable-data tr td span.ui-row-editor span.ui-icon-check').hide(); $('.myTableStyle tbody.ui-datatable-data tr td span.ui-row-editor span.ui-icon-close').hide(); $('.myTableStyle tbody.ui-datatable-data tr').removeClass('ui-state-highlight');} return false;"

Answer 1

उपर्युक्त समाधान मेरे लिए काम नहीं कर रहा है। एक alternativ समाधान के रूप में, मैं सिर्फ संपादित करें बटन (पेंसिल) जब मैं एक पंक्ति को संपादित कर रहा हूँ सीएसएस

<p:ajax event="rowEditInit" oncomplete="$('.ui-row-editor span.ui-icon-pencil').each(function(){$(this).css('visibility','hidden')});" /> 

<p:ajax event="rowEdit" oncomplete="$('.ui-row-editor span.ui-icon-pencil').each(function(){$(this).css('visibility','visible')});"/> 

<p:ajax event="rowEditCancel" onstart="$('.ui-row-editor span.ui-icon-pencil').each(function(){$(this).css('visibility','visible')});"/> 

Answer 2

आप तत्वों के माध्यम से पुनरावृति, और किसी भी अन्य संपादित रद्द करने की आवश्यकता: तो यह समारोह onStart समारोह की जगह है।

$('.myTableStyle tbody.ui-datatable-data tr td span.ui-row-editor span.ui-icon-cancel').each(function(){ 
    $(this).click(); 
});