PrimeFacesのDataTableを探る　～カラムソート～

前回エントリ「PrimeFacesのDataTableを探る　～DynamicColumn～」の続きです。

業務システム構築の設計時に、お客さんと一覧テーブルの話をすると「こういうのできる？」といった色々な意見を頂いたりします。

カラムでのソートができるかどうか？マルチにできるか？なんかもありますよねー(^^;

今日はそんな一覧のソートに関してです。

一覧での単純カラムソート

前回PrimeFacesのDataTableを定義しましたが、ソートは非常に簡単で、columnsの属性にあるsortByを以下のように指定するのみです。*1

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h:form id="dtFrm">
            <p:dataTable id="dt" var="book" value="#{bookBean.bookList}" >
                <!-- sortBy属性を指定してみる -->
                <p:columns id="colBook" var="col" value="#{bookBean.columns}"
                   sortBy="#{book[col.property]}">
                    <f:facet name="header">
                        #{col.header}
                    </f:facet>
                    <h:outputText value="#{book[col.property]}" />
                </p:columns>
            </p:dataTable>
        </h:form>
    </h:body>
</html>

DBの中身を(前回から入れ替えて)実行してみます。

初期表示時
f:id:kikutaro777:20130330135302j:plain

書籍タイトルカラムで降順
f:id:kikutaro777:20130330135341j:plain

著者で降順
f:id:kikutaro777:20130330135510j:plain

こんな感じです(^^)ただ残念なことに初期表示状態に戻すことができず、一度ソートすると昇順降順の繰り返しとなります。(戻す方法ご存知の方がいたら是非教えてください！)

一覧でのマルチカラムソート

PrimeFacesでは3.5(だったかと)からカラムのマルチソートもできるようになりました。

1つのカラムを選んだ後、Ctrlキーを押しながら、もう1つカラムを選ぶと以下のようなソートが可能です。

書籍タイトルカラムで昇順の中で著者カラムを昇順
f:id:kikutaro777:20130330135651j:plain

書籍タイトルカラムで昇順の中で著者カラムを降順
f:id:kikutaro777:20130330135657j:plain

方法はdatatableの属性にあるsortModeでmultipleを指定するだけです。

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h:form id="dtFrm">
            <!-- マルチソートを指定してみる -->
            <p:dataTable id="dt" var="book" value="#{bookBean.bookList}" sortMode="multiple">
                <!-- sortBy属性を指定してみる -->
                <p:columns id="colBook" var="col" value="#{bookBean.columns}"
                   sortBy="#{book[col.property]}>
                    <f:facet name="header">
                        #{col.header}
                    </f:facet>
                    <h:outputText value="#{book[col.property]}" />
                </p:columns>
            </p:dataTable>
        </h:form>
    </h:body>
</html>