JSF2에서 JQuery를 사용하여 단일 행의 요소를 표시합니다.

Question

목표는 N 행과 M 열로 편집 가능한 HTML 표를 사용하는 것입니다. 그래서 나는 하나의 행의 모든 ​​요소를 ​​편집 가능한 것으로 표시하고 다른 행은 간단한 outputText로 유지하는 솔루션을 제안합니다. 지금까지 행의 정확한 ID를 알고 있다면 숨겨진 필드를 표시 할 수 있습니다. 거기에 문제가 있습니다 ... JSF가 자체 ID를 생성하고 N (불특정 다수) 행을 가지고 있음을 알기 때문에 ID를 알지 못합니다.

이

은 (Primefaces도 통합)

<h:panelGroup id="table" layout="block" styleClass="ui-datatable ui-widget bearbeiten-ergebnisse__tabelle"> 
    <table> 
     <thead> 
     <tr> 
     <th class="ui-state-default"> 
      <h:outputText value="Editieren" /> 
     </th> 
     <ui:repeat 
      var="column" value="#{AuswahlBean.selectedMetaDataVersionColums}"> 
      <th class="ui-state-default"> 
      <h:outputText value="#{func:getColumnNameSplit(column.header)}" escape="false"/> 
      </th> 
     </ui:repeat> 
     </tr> 
     </thead> 
     <tbody class="ui-datatable-data ui-widget-content"> 
     <ui:repeat id="rowTable" 
      var="rows" value="#{AuswahlBean.selectedMetaDataVersionResultSet}"> 
      <tr 
       id="#{component.clientId}" 
       class="ui-widget-content clickable-row"> 
       <td class="row-operation"> 
        <h:outputText styleClass="ui-row-edit" value="edit" /> 
        <h:outputText styleClass="ui-row-save hide-field" value="save " /> 
        <h:outputText styleClass="ui-row-cancel hide-field" value="cancel" /> 
       </td> 
       <ui:repeat 
       var="column" value="#{AuswahlBean.selectedMetaDataVersionColums}"> 
       <td> 
        <!-- Zelleninhalt, der nicht-editierbar ist --> 
        <h:outputText 
         value="#{rows[column.property]}" 
         styleClass="ui-outputfield" 
         rendered="#{column.typeText}"/> 
        <h:outputText 
        value="#{rows[column.property]}" 
        styleClass="ui-outputfield" 
        rendered="#{column.typeNumeric}" > 
        <f:converter converterId="DwhNumberConverter"/> 
        </h:outputText> 
        <h:outputText 
        value="#{rows[column.property]}" 
        styleClass="ui-outputfield" 
        rendered="#{column.typeDate}"> 
        <f:converter converterId="DwhDateConverter"/> 
        </h:outputText> 

        <!-- Zelleninhalt, der nicht-editierbar ist --> 
        <p:inputText 
         rendered="#{column.typeText}" 
         value="#{rows[column.property]}" 
         styleClass="hide-field" 
         required="true" 
         requiredMessage="Überprüfungsfehler: Eine Eingabe wird erwartet."/> 
        <p:inputText 
         rendered="#{column.typeNumeric}" 
         value="#{rows[column.property]}" 
         styleClass="hide-field" 
         required="true" 
         requiredMessage="Überprüfungsfehler: Eine Zahl wird erwartet." 
         converter="DwhNumberConverter"> 
         <p:ajax event="valueChange" async="TRUE" 
         update="@this :theForm:msg" /> 
        </p:inputText> 
        <p:calendar 
         rendered="#{column.typeDate}" 
         value="#{rows[column.property]}" 
         styleClass="calendar-inputfield hide-field" 
         pattern="dd.MM.yyy" 
         required="true" 
         requiredMessage="Ein Datum wird erwartet. Bitte geben Sie in Datum im Format tt.mm.jjjj an." 
         converter="DwhDateConverter"> 
         <p:ajax event="valueChange" async="TRUE" 
         update="@this :theForm:msg"/> 
        </p:calendar> 
       </td> 
       </ui:repeat> 
      </tr> 
     </ui:repeat> 
     </tbody> 
     </table> 
     </h:panelGroup> 

그리고 여기에 자바 스크립트 snipet 내 JSF/HTML 코드입니다.

<script type="text/javascript"> 
    // Show the editable Row 
    $('.ui-row-edit').click(function(event){ 
    var editableRowId = $(this).closest('tr').attr('id'); 
    var fixedIdForJquerySelector = editableRowId.replace(/\:/g, '\\\\:'); 

    showInputFields(fixedIdForJquerySelector); 
    }); 
    function showInputFields(rowID) { 
    alert(rowID); 
    $("#"+rowID+" .ui-outputfield").css("color","red"); 
    /* $('#' + rowID + ' .ui-inputfield').removeClass('hide-field'); 
    $('#' + rowID + ' .calendar-inputfield').removeClass('hide-field'); 
    $('#' + rowID + ' .ui-outputfield').addClass('hide-field'); 
    $('#' + rowID + ' .ui-row-edit').addClass('hide-field'); 
    $('#' + rowID + ' .ui-row-save').removeClass('hide-field'); 
    $('#' + rowID + ' .ui-row-cancel').removeClass('hide-field'); */ 
    } 

    </script> 

ID 표현식은 jQuery 선택기로 허용되지 않습니다. 정확히 말하면, 콜론 뒤에 오는 것이 (정규 표현식 : '에서) CSS 의사 클래스로 읽혀지고 있다는 것입니다. 다음은 파이어 폭스 콘솔의 오류 메시지입니다 :

Error: Syntax error, unrecognized expression: unsupported pseudo: rowTable\

사람이 정규 행동은 기대 할 수도 있지만 내가 대신

이

$("#theForm\\:rowTable\\:0 .ui-outputfield").css("color","red"); 

같은 동일한 선택 (ID)를 하드 코딩하는 경우

$("#"+rowID+" .ui-outputfield").css("color","red"); 

원하는 동작을 얻습니다.

그리고 포인트를 얻으려면 : ) 누가 선택기가 작동하지 않는지 아는 사람이 있습니까? b) 변환기를 포함하여 단일 행을 편집 할 수있는 다른 솔루션이 있습니까?

미리 감사드립니다.

솔루션

@Denish에 의한 도움으로 jQuery를-솔루션입니다. row-ID가 jQuery 선택기로 받아 들여지지 않는 이유는 아직도 모르지만 (배경 지식 만 있다면 어떤 힌트일까요?).

$('.ui-row-edit').click(function(event) { 
     var editableRow = $(this).closest('tr'); 
     showInputFields(editableRow); 
    }); 

    function showInputFields(rowObject) { 
     rowObject.find('.ui-inputfield').toggleClass('hide-field'); 
     rowObject.find('.ui-outputfield').toggleClass('hide-field'); 
     // and so on for all necessary CSS-classes 
    } 

Answer 1

HTML 코드 (DEMO : http://jsbin.com/vacul/1/edit)

<table> 
    <tr> 
     <td class="Bover"></td> 
     <td class="Orun"></td> 
     <td> 
      <input type="button" value="EDIT" class="Bedit" /> 
     </td> 
    </tr> 
</table> 

는 JQUERY :

$(document).ready(function() { 

    $('.Bedit').click(function() { 
    var dad = $(this).parent().parent(); 
    var btnvalue = $(this).val(); 
    if (btnvalue == "EDIT") { 

     var data = dad.find('.Bover').text(); 
     var data1 = dad.find('.Orun').text(); 

     dad.find('.Bover').text(''); 
     dad.find('.Orun').text(''); 


     dad.find('.Bover').append('<input type="text" class="hide" name="BOvers" value='+ data +' />'); 
     dad.find('.Orun').append('<input type="text" class="hide" name="BRuns" value='+ data1 +' />'); 

     $(this).val('NEXT'); 
    } 
    else { 
     var Bover = dad.find('[name="BOvers"]').val(); 
     dad.find('.Bover').text(Bover); 
     var Orun = dad.find('[name="BRuns"]').val(); 
     dad.find('.Orun').text(Orun); 

     dad.find('.hide').hide(); 

     $(this).val('EDIT'); 
    } 
    }); 
});