如何对dataTable中的列进行排序。 JSF 2.0

时间:2012-04-02 06:15:29

标签: java javascript sorting jsf-2 datatables

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

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

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

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

3 个答案:

答案 0 :(得分:4)

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

例如,

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

只需查看showcasedocumentation

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

答案 1 :(得分:4)

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

  • MyFaces Tomahawk - docs
  • ICEfaces - docs
  • RichFaces - docs
  • PrimeFaces - docs
  • 等,太多无法陈述。

但是如果你不想使用上面的工具包,那么在你的托管bean中,你可以定义你的List和排序顺序(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。它使用三态排序方法:unsorted(默认),升序和降序,并通过设置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 :(得分:1)

您也可以在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中一样)。