javascript - 更新 h:dataTable 通过 JQuery 传递参数

Question

如何使用 JSF dataTable 显示 orderList 项的行并在调用 jQuery 函数 showOrderNum(orderNum) 时更新数据表以仅显示具有该 orderNum 的订单？问题是让 jquery 函数调用传递参数的 dataTable 的支持 bean。

这是一个示例，数据表：

<h:dataTable value="#{order.orderList}" var="o">
                        <h:column>
                            <f:facet name="header">
                                <h:outputText value="Order No."/>
                            </f:facet>
                            #{o.orderNo}
                        </h:column>

                        <h:column>
                            <f:facet name="header">
                                <h:outputText value="Product Name"/>
                            </f:facet>
                            #{o.productName}
                        </h:column>
</h:dataTable>

这是支持 bean 的顺序：

@ManagedBean(name="order")
@SessionScoped
public class OrderBean implements Serializable{

    private static final Order[] orderList = new Order[] {
        new Order(1, "Intel CPU"),
        new Order(2, "Harddisk 10TB")
    };

    public Order[] getOrderList() {

        return orderList;

    }

    public Order getOrderList(int id) {

        // return orderList item with id number = id

    }

    public static class Order{

        String orderNo;
        String productName;


        public Order(String orderNo, String productName) {
            this.orderNo = orderNo;
            this.productName = productName;
        }
        //getter and setter methods
    }
}

这里应该让dataTable更新的jquery函数：

function showOrderNum(orderNum) {
    //update datatable passing orderNum parameter
}

Answer 1

尝试以下几行：

（xhtml 的变化）

<h:dataTable value="#{order.orderList}" var="o" id="resultsGrid">
    <h:column>
        <f:facet name="header">
            <h:outputText value="Order No."/>
        </f:facet>
        <h:commandLink value="#{o.orderNo}">
            <f:setPropertyActionListener target="#{order.selectedOrder}" value="#{o}" />
            <f:ajax render="resultsGrid" />
        </h:commandLink>
    </h:column>
    ...
</h:dataTable>

（豆的变化）

@ManagedBean(name="order")
@SessionScoped
public class OrderBean implements Serializable{
    ...
    private Order selectedOrder;
    // getter and setter for selectedOrder

    public Order[] getOrderList() {
        if( selectedOrder == null ) return orderList;
        else return getOrderList(selectedOrder.getOrderNo());
    }

    ...
}

将commandLink使用 AJAX 调用服务器并填充order.selectedOrder。它的子<f:ajax>节点重新渲染网格，调用getOrderList()，它现在看到一个过滤器处于活动状态并采取相应的行动。某处还应该有一个清晰的过滤器按钮。

顺便说一句，这个不需要 jQuery。

Answer 2

Richfaces 提供 a4j:jsFunction 来执行来自 javascript 本身的 ajax 请求。如果您使用的是richfaces，您可以考虑这一点。