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>，并将它们的值绑定到辅助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;
}

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

具有输入行的数据表

2 个答案: