Question

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

我的标题有链接，当我点击它们时，你可以在firebug控制台中看到发布了一个帖子请求。完成处理后，表格没有任何反应。

此外，我有一些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')" />

豆：

@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可以通过创建一个实时处理程序来处理这个问题。实时处理程序还将触发行，这些行是在执行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>

排序richfaces数据表时出现问题

3 个答案: