入力の列を持つDatatable

Question

私はテキスト入力と選択リストの行を生成するデータテーブルを持っています。これは、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

フォームでJSF以外のHTML入力とボタンを使用する理由を理解できません。代わりに<h:inputText>と<h:commandButton>を使用し、その値をバッキングBeanのプロパティにバインドします。もちろんテーブル全体は<h:form> ... </h:form>タグの内側にあるはずです。

また、あなたの出力は、出力のためのように、おそらく "item"変数のプロパティにバインドされている必要があります。そうでない場合、各行は、バッキングBeanの同じプロパティにバインドされた入力を持ちます。

JSPまたはFaceletsを使用していますか？

Answer 2

JSFは

IDがランダムでない入力ごとに別々のランダムIDを生成しています。 h：dataTableはNamingContainerであり、その子はclientIdであるため、それらが一意になるように管理します（HTML仕様の要件）。 JSF：working with component IDs (id vs clientId)。

追加したストレートHTMLは、JSFモデルビュープレゼンターフレームワークとの統合が難しいでしょう。 JSFコントロールに固執する方がよいでしょう。このコードは、JavaScriptと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> 

呼び出されたJavaScript：

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

あなたが代わりのJSPのFaceletsのを使用している場合は、あなたが定義する必要がありますFacelets tag libraryの機能。