【问题标题】:How to sort a Column in a dataTable. JSF 2.0如何对数据表中的列进行排序。 JSF 2.0
【发布时间】:2012-04-15 19:57:08
【问题描述】:

我正在 jsf 2.0 中构建一个 WebApp,它是关于存储信息并将其显示在屏幕上的。所以我放入了一些“http://java.sun.com/jsf/html”数据表来显示一些列表。我的 Java 代码返回一个列表,然后将它们显示在屏幕上。但现在我必须按字母顺序对列进行排序。我相信没有内置的方法可以做到这一点,所以我将不得不在其他地方寻找任务。

我遇到了This dataTables example,它非常棒,但我想我不能给它一个列表并显示列表。

我还遇到了BalusC's way of incorporating the sorting intot he DataTbal,这很好,我正在寻找这个,但可能有一个 jQuery IU。

有没有这样的API可以满足我的需求?你能指出我正确的方向,还是你建议一个?我真的想要一个我只用 Java 提交的列表,但如果必须,我可以修改数据以符合 JSON 格式或其他格式...

【问题讨论】:

  • 您想在客户端(浏览器)还是在服务器端进行排序?

标签: java javascript sorting jsf-2 datatables


【解决方案1】:

使用原生 <h:dataTable>,您必须自己在托管 bean 中进行排序。您可以使用内置的现有 JSF 扩展库,例如:

  • MyFaces 战斧 - docs
  • ICEfaces - docs
  • RichFaces - docs
  • PrimeFaces - docs
  • 等等,太多了,无法说明。

但是,如果您不想使用上述工具包,那么在您的托管 bean 中,您可以定义您的列表和排序顺序(asc 或 dec)。它可以是您想要的简单或复杂。

Ordering 库更改为SortOrder 库,引用此库:import org.richfaces.component.SortOrder;

可以使用<rich:column> 属性以编程方式在变量中定义排序顺序比较器:

private SortOrder sorting = SortOrder.unsorted; 

This is an example of using SortOrder programmatically using JSF 2.x/RichFaces 4.x。它使用三态排序方法:未排序(默认)、升序和降序,并通过设置 sortOrder 属性来实现。

或者可以在代码中覆盖比较器的默认行为,如下例所示:

@ManagedBean(name="somebean")
@SessionScoped
public class OrderBean implements Serializable {
  private static final long serialVersionUID = ....;
  private List<Item> items;
  private boolean sortAscending;
  ...
}

在您看来,您定义了要排序的标题,因此添加一个 commandLink 以使每个标题都可点击。

<h:dataTable value="#{somebean.items}" var="i">
  <h:column>
    <f:facet name="header">
       <h:commandLink action="#{somebean.sort}"> Sort Column</h:commandLink>
    </f:facet>
    #{i.name}
  </h:column>
</h:dataTable>

现在您必须使用基本集合为您的 bean 实现排序,同样,它可以尽可能复杂:

private final Comparator NAME_SORT_ASC = new Comparator<Item>() {
    @Override
    public int compare(Item o1, Item o2) {
      return o1.getName().compareTo(o2.getName());
    }
  }
};

private final Comparator NAME_SORT_DESC = new Comparator<Item>() {
    @Override
    public int compare(Item o1, Item o2) {
      return o2.getName().compareTo(o1.getName());
    }
  }
};

public String sort() {
  Collections.sort(items, sortAscending ? NAME_SORT_ASC : NAME_SORT_DESC );
}

你可以通过重复使用东西来让你的生活更轻松,而不是为每一列都这样做,我会让你弄清楚这一点。您可以使用更好的 Java 库来帮助您进行比较,例如使用来自 Google 的 Guava 或来自 Apache 的 Collection Commons

与其做所有这些并重新发明轮子,不如使用一个为您抽象出所有这些的框架,它们让您的生活更轻松..

【讨论】:

    【解决方案2】:

    在 jsf-2.0 之上有几个组件库。

    Primefaces 例如有一个非常强大的datatable componentsorting / filtering 选项。 Primefaces 很容易集成到您的项目中,并且附带了很多themes(或者您可以创建自己的主题)。

    看看showcasedocumentation

    其他流行的组件库是Richfaces (根据评论数据表排序不支持)和Icefaces。

    【讨论】:

    • PrimeFaces +1。 RichFaces 开发人员拒绝添加简单的排序选项。它一直在他们的 jira 中,但什么也没发生......
    • primefaces 看起来很可靠,我想我会试一试,但我已经在他们的网站上下载了包,但我在任何地方都看不到 JAR 文件。它说这是一个jar文件,但我没有看到它。你们知道它在哪里吗?
    • RichFaces 支持按照 RichFaces 4.5.x 中的 org.richfaces.component.SortOrder 库进行排序。
    【解决方案3】:

    您也可以在Richfaces 中进行操作。 Richfaces 3.3.x 支持简单排序:

    <rich:column sortable="true" sortBy="#{res.retailerCode}">
        <f:facet name="header">
            <h:outputText value="#{msg.retailerId}" />
        </f:facet>
        <h:outputText value="#{res.retailerCode}" />
    </rich:column>
    

    在 Richfaces 4.x 中,您可以使用 Sorting bean 对数据表进行排序:

    <rich:column id="cardNumber" sortBy="#{res.instNumber}"
        sortOrder="#{cardholderSorting.cardNumberOrder}">
        <f:facet name="header">
            <a4j:commandLink value="#{msg.cardNumber}"
                action="#{cardholderSorting.sortByCardNumber}"
                render="cardholderTable" />
        </f:facet>
        <h:outputText value="#{res.cardNumber}" />
    </rich:column>
    

    或您的 DataModel(扩展 ExtendedDataModel):

    <rich:column id="retailerCode" sortBy="#{rs.retailerCode}" sortOrder="ascending">
        <f:facet name="header">
            <h:commandLink value="#{msg.retailerId}" style="text-decoration: none; color:black;">
                <rich:componentControl target="retailerTable" operation="sort">
                    <f:param name="column" value="retailerCode" />
                    <f:param value="" />
                    <f:param name="reset" value="true" />
                </rich:componentControl>
            </h:commandLink>
        </f:facet>
        <h:outputText value="#{rs.retailerCode}" />
    </rich:column>
    

    您可以在命令链接中添加箭头(用于显示排序顺序),它将与 Richfaces 3.3.3 中的完全相同。

    更新

    从 RichFaces 4.5 开始,支持在 dataTable 中进行简单排序(就像在 3.3.x 版本中一样)。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-06-07
      • 2013-12-03
      • 2019-03-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-02-18
      相关资源
      最近更新 更多