입력 행이있는 Datatable

Question

텍스트 입력 및 선택 목록의 행을 생성하는 데이터 테이블이 있고 제출시 값이 null입니다. 왜냐하면 jsf가 각 입력에 대해 별도의 임의 ID를 생성하기 때문입니다. 난 정말 행에 의해 데이터가 필요하고 내가 원하는 걸 구문 분석. 어떤 제안? :

<h:dataTable id="returnableItems" value="#{returnableItemsBean.orderCustomerFamilyItems}" var="item" styleClass="data stripeTable center"> 
    <h:column> 
    <f:facet name="header">Item Number</f:facet> 
    <h:outputText id="itemNum" value="#{item.itemNum}"/> 
    </h:column> 
    <h:column> 
    <f:facet name="header">Description</f:facet> 
    <h:outputText value="#{item.itemDescription}"/> 
    </h:column> 
    <h:column> 
    <f:facet name="header">Original Quantity</f:facet> 
    <h:outputText value="#{item.originalQuantity}"/> 
    </h:column> 
    <h:column> 
    <f:facet name="header">Remaining Quantity</f:facet> 
    <h:outputText value="#{item.eligibleQuantity}"/> 
    </h:column> 
    <h:column> 
    <f:facet name="header">Quantity For Return</f:facet> 
    <h:panelGrid styleClass="stepper"> 
     <span class="ns ui-stepper"> 
     <input id="returnQuantity" type="text" name="returnQuantity" size="2" autocomplete="off" class="ui-stepper-textbox" value="0" /> 
     <button type="button" name="ns_button_1_0" value="" class="ui-stepper-plus" onclick="setMaxVal(this,#{item.eligibleQuantity});">+</button> 
     <button type="button" name="ns_button_2_0" value="" class="ui-stepper-minus">-</button> 
     </span> 
    </h:panelGrid> 
    </h:column> 
    <h:column> 
    <f:facet name="header">Reason for Return</f:facet> 
    <h:selectOneMenu id="returnReason" value="#{returnableItemsBean.orderReason.ordReasonCode}"> 
     <f:selectItems value="#{returnableItemsBean.orderReasons}"/> 
     <f:converter converterId="orderReasonConverter"/> 
    </h:selectOneMenu> 
    </h:column> 
    <h:column> 
    <f:facet name="header">Return/Replacement</f:facet> 
    <h:selectOneMenu id="returnOption"> 
     <f:selectItem itemLabel="Option" itemValue=""/> 
     <f:selectItem itemLabel="Return" itemValue="return"/> 
     <f:selectItem itemLabel="Replacement" itemValue="replacement"/> 
    </h:selectOneMenu> 
    </h:column> 
</h:dataTable> 

Answer 1

HTML 입력과 버튼을 사용하는 이유와 양식에서 JSF가 아닌 이유를 이해하지 못합니다. 대신 <h:inputText> 및 <h:commandButton>을 사용하고 해당 값을 백업 빈의 등록 정보에 바인드하십시오. 물론 전체 표는 <h:form> ... </h:form> 태그 안에 있어야합니다.

또한 출력과 마찬가지로 입력 내용이 "item"변수의 속성에 바인딩되어야합니다. 그렇지 않은 경우 각 행에는 입력 bean이 동일한 bean의 속성에 바인드됩니다.

JSP 또는 Facelets를 사용하고 있습니까?

Answer 2

JSF는

IDS는 랜덤하지 않은 각각의 입력에 대해 별도의 임의의 ID를 생성하고; h : dataTable은 NamingContainer이며 자식이 clientId으로 관리되므로 고유하게됩니다 (HTML 사양 요구 사항). JSF : working with component IDs (id vs clientId).

추가 한 직선 HTML은 JSF 모델 뷰 프레젠터 프레임 워크와 통합하기가 어렵습니다. JSF 컨트롤을 고수하는 것이 좋습니다. 이 코드는 자바 스크립트를 사용하여 클라이언트 측 필드 값을 조작 할 수있는 방법을 보여줍니다과 custom TLD function :

<h:dataTable value="#{rowDataBean.data}" var="row"> 
    <h:column> 
     <f:facet name="header"> 
     <h:outputText value="product" /> 
     </f:facet> 
     <h:outputText value="#{row.name}" /> 
    </h:column> 
    <h:column id="column2"> 
     <f:facet name="header"> 
     <h:outputText value="quantity" /> 
     </f:facet> 
     <h:inputText id="quantityCount" value="#{row.quantity}" /> 
     <h:commandButton value="+" 
     onclick="increment('#{id:clientId('quantityCount')}'); return false;" /> 
    </h:column> 
    </h:dataTable> 

호출 된 자바 스크립트 :

function increment(id) { 
    //TODO: error handling 
    var textField = document.getElementById(id); 
    var value = textField.value; 
    value++; 
    textField.value = value; 
} 

대신하는 JSP의 Facelets의를 사용하는 경우, 당신은 정의해야합니다을 Facelets tag library의 기능.