具有输入行的数据表

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

我不明白为什么您在表单中使用 HTML 输入和按钮而不是 JSF 输入和按钮。请改用<h:inputText> 和<h:commandButton>，并将它们的值绑定到支持bean 中的属性。当然，整个表格应该在<h:form> ... </h:form> 标签内。

此外，您的输入可能应该绑定到“item”变量的属性，就像您对输出所做的那样。如果没有，每一行都会有一个输入绑定到您的支持 bean 的相同属性。

您使用的是 JSP 还是 Facelets？

Answer 2

jsf 正在为每个输入生成单独的随机 ID

ID 不是随机的； h:dataTable 是 NamingContainer 并管理其子 clientIds，因此它们变得独一无二（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;
}

如果您使用 Facelets 而不是 JSP，则需要在 Facelets tag library 中定义函数。