排序richfaces数据表时出现问题

Question

我正试图让我的richfaces数据表具有可排序的头。我基本上遵循了这里的代码：http://richfaces-showcase.appspot.com/richfaces/component-sample.jsf?demo=dataTable&sample=tableSorting&skin=blueSky

我的标题有链接，当我点击它们时，你可以在firebug控制台中看到一个post请求正在发生。完成处理后，表不会发生任何变化。

此外，我有一些jquery代码，当鼠标悬停在某行上时，它会高亮显示该行。一旦单击其中一个标题，该行高亮显示就不会再发生了。

这是我的密码。

<h:form>
    <rich:dataTable value="#{protocolDetail.details.protocolEvents}" var="detail" id="table" rows="20" rowClasses="odd, even" styleClass="stable">
        <rich:column sortBy="#{detail.date}">
            <f:facet name="header">
                <a4j:commandLink value="Date" render="table" action="#{protocolDetail.sortByDate}" />
            </f:facet>
            <f:facet name="footer">
                <a4j:commandLink value="Date" render="table" action="#{protocolDetail.sortByDate}" />
            </f:facet>
            <h:outputText value="#{detail.date}" />
        </rich:column>
        <rich:column sortBy="#{detail.description}">
            <f:facet name="header">
                <a4j:commandLink value="Description" render="table" action="#{protocolDetail.sortByDescription}" />
            </f:facet>
            <f:facet name="footer">
                <a4j:commandLink value="Description" render="table" action="#{protocolDetail.sortByDescription}" />
            </f:facet>
            <h:outputText value="#{detail.description}" />
        </rich:column>
        <rich:column sortBy="#{detail.comment}">
            <f:facet name="header">
                <a4j:commandLink value="Comment" render="table" action="#{protocolDetail.sortByComments}" />
            </f:facet>
            <f:facet name="footer">
                <a4j:commandLink value="Comment" render="table" action="#{protocolDetail.sortByComments}" />
            </f:facet>
            <h:outputText value="#{detail.comment}" />
        </rich:column>
    </rich:dataTable>

</h:form>
<rich:jQuery selector=".stable tr" event="mouseover" query="jQuery(this).addClass('active')" />
<rich:jQuery selector=".stable tr" event="mouseout" query="jQuery(this).removeClass('active')" />

bean：

@ManagedBean(name = "protocolDetail")
@SessionScoped
public class ProtocolDetailBacker extends BaseObject {
    private String protocol = "";
    private int studyNumber;
    // private ArrayList<ProtocolDetailBean> details;
    private ProtocolDetailBean details = new ProtocolDetailBean();
    ProtocolDAO dao = new ProtocolDAO();
    private SortOrder dateOrder = SortOrder.UNSORTED;
    private SortOrder descriptionOrder = SortOrder.UNSORTED;
    private SortOrder commentsOrder = SortOrder.UNSORTED;
    public ProtocolDetailBacker() {
        FacesContext context = FacesContext.getCurrentInstance();
        String[] values = context.getExternalContext().getRequestParameterValuesMap().get("protocol");
        setProtocol(values[0]);
    }
    public String getProtocol() {
        return protocol;
    }
    public void setProtocol(String protocol) {
        this.protocol = protocol;
    }
    public ProtocolDetailBean getDetails() {
        try {
            studyNumber = dao.getStudyNumber(getProtocol());
            details.setProtocolNumber(getProtocol());
            details.setStudyChair(dao.getStudyChair(studyNumber));
            details.setShortDesc(dao.getShortDescription(studyNumber));
            details.setLongDesc(dao.getLongDescription(studyNumber));
            details.setPdc(dao.getPDC(studyNumber));
            details.setProtocolEvents(dao.getProtocolEventDetails(getProtocol()));
            System.out.println("");
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return details;
    }
    public void setDetails(ProtocolDetailBean details) {
        this.details = details;
    }
    public int getStudyNumber() {
        return studyNumber;
    }
    public void setStudyNumber(int studyNumber) {
        this.studyNumber = studyNumber;
    }
    public SortOrder getDateOrder() {
        return dateOrder;
    }
    public void setDateOrder(SortOrder dateOrder) {
        this.dateOrder = dateOrder;
    }
    public SortOrder getDescriptionOrder() {
        return descriptionOrder;
    }
    public void setDescriptionOrder(SortOrder descriptionOrder) {
        this.descriptionOrder = descriptionOrder;
    }
    public SortOrder getCommentsOrder() {
        return commentsOrder;
    }
    public void setCommentsOrder(SortOrder commentsOrder) {
        this.commentsOrder = commentsOrder;
    }
    public void sortByDate() {
        descriptionOrder = SortOrder.UNSORTED;
        commentsOrder = SortOrder.UNSORTED;
        System.out.println("dateOrder = "+dateOrder);
        if(dateOrder.equals(SortOrder.ASCENDING)) {
            setDateOrder(SortOrder.DESCENDING);
            System.out.println("dateOrder now = "+dateOrder);
        } else if(dateOrder.equals(SortOrder.DESCENDING)) {
            setDateOrder(SortOrder.ASCENDING);
            System.out.println("dateOrder now = "+dateOrder);
        } else {
            setDateOrder(SortOrder.ASCENDING);
            System.out.println("else dateOrder now = "+dateOrder);
        }
    }
    public void sortByDescription() {
        dateOrder = SortOrder.UNSORTED;
        commentsOrder = SortOrder.UNSORTED;
        System.out.println("dateOrder = "+dateOrder);
        if(descriptionOrder.equals(SortOrder.ASCENDING)) {
            setDescriptionOrder(SortOrder.DESCENDING);
            System.out.println("dateOrder now = "+dateOrder);
        } else if(descriptionOrder.equals(SortOrder.DESCENDING)) {
            setDescriptionOrder(SortOrder.ASCENDING);
            System.out.println("dateOrder now = "+dateOrder);
        } else {
            setDescriptionOrder(SortOrder.ASCENDING);
            System.out.println("else dateOrder now = "+dateOrder);
        }
    }
    public void sortByComments() {
        descriptionOrder = SortOrder.UNSORTED;
        commentsOrder = SortOrder.UNSORTED;
        System.out.println("dateOrder = "+dateOrder);
        if(commentsOrder.equals(SortOrder.ASCENDING)) {
            setCommentsOrder(SortOrder.DESCENDING);
            System.out.println("dateOrder now = "+dateOrder);
        } else if(commentsOrder.equals(SortOrder.DESCENDING)) {
            setCommentsOrder(SortOrder.ASCENDING);
            System.out.println("dateOrder now = "+dateOrder);
        } else {
            setCommentsOrder(SortOrder.ASCENDING);
            System.out.println("else dateOrder now = "+dateOrder);
        }
    }
}

Answer 1

对表进行排序将重新创建行。因此，onmouseover和onmouseout事件在排序后不再绑定到您的行。

幸运的是，jQuery可以通过创建一个实时处理程序来处理这个问题。Live Handlers还将触发在执行jQuery调用后添加的行。

以下对我有效：

<rich:jQuery selector=".stable tr" query="live('mouseover mouseout', function(event) {
              if ( event.type == 'mouseover' ) {
                jQuery(this).addClass('active-row');
              } else {
                jQuery(this).removeClass('active-row');
              }});"/>

Answer 2

我在使用richfaces演示中给出的示例代码时也遇到了同样的问题，仍然是问题

我在a:commandlink中添加了f:ajax，现在排序正在正确更新

<a4j:commandLink execute="@this" value="Vendor" 
render="carstable" action="#{carsSortingBean.sort}">
<f:param name="sortProperty" value="vendor" />
<f:ajax  render="carstable"  />
</a4j:commandLink>

Answer 3

如果有人仍在寻找这个答案，如果您使用的是RichFaces 4.0和JSF 2，请尝试在web.xml中将JSF的部分状态保存设置为true，如下所示：

<context-param>
    <param-name>javax.faces.PARTIAL_STATE_SAVING</param-name>
    <param-value>true</param-value>
</context-param>