Question

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

这是一个例子，dataTable：

<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

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

Answer 2

尝试以下几行：

（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>

（bean的变化）

@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。

更新h：dataTable通过JQuery传递参数

2 个答案: