Question

我有这个用于显示数据的JSF表。我想使用AJAX来更新表的行。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
    <h:head>
        <h:outputStylesheet library="css" name="table-style.css"  />
    </h:head>
    <h:body>

        <h1>JSF 2 dataTable example</h1>
        <h:form>
            <h:dataTable id="ajaxtable" 
                        value="#{order.orderModel}" var="o"
                styleClass="order-table"
                headerClass="order-table-header"
                rowClasses="order-table-odd-row,order-table-even-row">

                        <h:column>

                    <f:facet name="header">No</f:facet>

                    <h:inputText rendered="false"/>

                    <h:outputText value="#{order.orderModel.rowIndex + 1}"  />

                </h:column>
                <h:column>

                    <f:facet name="header">Order No</f:facet>

                    <h:inputText value="#{o.orderNo}" size="10" rendered="#{o.editable}" />

                    <h:outputText value="#{o.orderNo}" rendered="#{not o.editable}" />

                </h:column>

                <h:column>

                    <f:facet name="header">Product Name</f:facet>

                    <h:inputText value="#{o.productName}" size="20" rendered="#{o.editable}" />

                    <h:outputText value="#{o.productName}" rendered="#{not o.editable}" />

                </h:column>

                <h:column>

                    <f:facet name="header">Price</f:facet>

                    <h:inputText value="#{o.price}" size="10" rendered="#{o.editable}" />

                    <h:outputText value="#{o.price}" rendered="#{not o.editable}" />

                </h:column>

                <h:column>

                    <f:facet name="header">Quantity</f:facet>

                    <h:inputText value="#{o.qty}" size="5" rendered="#{o.editable}" />

                    <h:outputText value="#{o.qty}" rendered="#{not o.editable}" />

                </h:column>

                <h:column>

                    <f:facet name="header">Action</f:facet>

                    <h:commandLink id="editlink" value="Edit" action="#{order.editAction(o)}" rendered="#{not o.editable}">
                                    <f:ajax execute="@this" render="editlink"/>
                                </h:commandLink>

                </h:column>

            </h:dataTable>

            <h:commandButton value="Save Changes" action="#{order.saveAction}">
                    <f:ajax execute="@this" render="ajaxtable"/>
                </h:commandButton>


        </h:form>
    </h:body>

</html>

当我按下此按钮（链接）时，表格的行不会更新。

    <h:commandLink id="editlink" value="Edit" action="#{order.editAction(o)}" rendered="#{not o.editable}">
          <f:ajax execute="@this" render="editlink"/>
    </h:commandLink>

我怀疑当我有链接时无法使用AJAX。

第二个问题是：

            <h:column>

                <f:facet name="header">No</f:facet>

                <h:inputText rendered="false"/>

                <h:outputText value="#{order.orderModel.rowIndex + 1}"  />

            </h:column>

如果我删除inputText，我会收到此错误：Index: 0, Size: 0。我应该离开吗？

祝福

Answer 1

错误在于ajax链接的render属性：

<h:commandLink id="editlink" ...>
    <f:ajax execute="@this" render="editlink" />
</h:commandLink>

你告诉它只渲染编辑链接本身。你基本上和render="@this"一样。你没有告诉它渲染表格。你需要告诉它渲染表。

首先为<h:form>提供固定id，以便您稍后在render中指定固定的客户ID。

<h:form id="form">

然后按如下方式修复ajax链接，告诉它渲染表：

<h:commandLink id="editlink" ...>
    <f:ajax execute="@this" render=":form:ajaxtable" />
</h:commandLink>

另一种方法是将表绑定到视图，以便您可以动态获取其客户端ID：

<h:dataTable binding="#{table}" ...>

带

<h:commandLink id="editlink" ...>
    <f:ajax execute="@this" render=":#{table.clientId}" />
</h:commandLink>

（这样您还可以#{table.rowIndex}显示行号而无需DataModel）

另见：

Communication in JSF 2.0

无法使用AJAX编辑表行

1 个答案:

另见：