1

Primefaces DataTable で問題が発生しました。フィルタリングとソートを使用して複雑なデータテーブルを構築したいと考えています。私は Primefaces を初めて使用するので、Primefaces Showcase のサンプルを調べました。

並べ替えボタンを初めてクリックすると、リスト全体が再現され、並べ替えられます。2 回目のクリックでは、通常どおりに並べ替えられます。

出力は次のようになります。

初期: リストには 3 つのアイテムがあります。1 回目のクリック: リストには 6 つの項目があり、ASC でソートされます 2 回目のクリック: リストには 6 つの項目があり、DES でソートされます

私は混乱していて、間違いを見つけることができません。これで私を助けてください。

注: Apache Tomcat 7.x で Primefaces 3.4 と JSF 2.1 を使用しています。

ダッシュボード.xhtml

<?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">
<ui:composition 
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">

<h:form id="frm_dashboard">

    <p:growl autoUpdate="true" showDetail="true" />

    <p:dataTable var="AntragsDatenObj" value="#{dashboardController.obj_offAntraege}" rowKey="#{AntragsDatenObj.antr_id}" paginator="false" rows="20"  
                 selection="#{dashboardController.selektierterAntrag}" selectionMode="single" id="dt_AntragsDatenObj" style="font-size: 12px; width: 96%">  

        <p: ajax event="rowSelect" update=":frm_dashboard:display" oncomplete="Dialog.show()" />  

        <f:facet name="header">  
            Liste von Anträgen  
        </f:facet>  

        <p:column headerText="ID" sortBy="#{AntragsDatenObj.antr_id}" id="dt_antr_id" style="font-size: 12px;">  
            #{AntragsDatenObj.antr_id}  
        </p:column>  

        <p:column headerText="Start" sortBy="#{AntragsDatenObj.urlb_startdatum}" id="dt_urlb_startdatum" style="font-size: 12px;">  
            #{AntragsDatenObj.urlb_startdatum}  
        </p:column>  

        <p:column headerText="Ende" sortBy="#{AntragsDatenObj.urlb_enddatum}" id="dt_urlb_enddatum" style="font-size: 12px;">  
            #{AntragsDatenObj.urlb_enddatum}  
        </p:column>  

        <p:column headerText="Länge" sortBy="#{AntragsDatenObj.urlb_laenge}" id="dt_urlb_laenge" style="font-size: 12px;">  
            #{AntragsDatenObj.urlb_laenge}  
        </p:column>

        <p:column headerText="Benutzer" sortBy="#{AntragsDatenObj.user_name}" id="dt_user_name" style="font-size: 12px;">  
            #{AntragsDatenObj.user_name}  
        </p:column>

    </p:dataTable>

<p:dialog header="Details" widgetVar="Dialog" resizable="false"  
           width="200" showEffect="explode" hideEffect="explode">  

     <h:panelGrid id="display" columns="2" cellpadding="4">  

         <f:facet name="header">  
             Details
         </f:facet>  

         <h:outputText value="ID:" />  
         <h:outputText value="#{dashboard.selektierterAntrag.antr_id}" id="antr_id"/>  

         <h:outputText value="Startdatum:" />  
         <h:outputText value="#{dashboard.selektierterAntrag.urlb_startdatum}" id="urlb_startdatum"/>  

         <h:outputText value="Enddatum:" />  
         <h:outputText value="#{dashboard.selektierterAntrag.urlb_enddatum}" id="urlb_enddatum"/>  

         <h:outputText value="Länge:" />  
         <h:outputText value="#{dashboard.selektierterAntrag.urlb_laenge}" id="urlb_laenge"/>  
     </h:panelGrid>  
 </p:dialog>  

</h:form>

管理されたBeanはDashboardController.javaパッケージlean.controllerと呼ばれます。

import java.util.List;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;
import lean.dataobjects.AntragsDatenObj;


@ViewScoped
@ManagedBean
public class DashboardController {

    private List<AntragsDatenObj> obj_offAntraege;

    private AntragsDatenObj selektierterAntrag;

    public List<AntragsDatenObj> getObj_offAntraege() {
        return obj_offAntraege;
    }

    public AntragsDatenObj getSelektierterAntrag() {
        return selektierterAntrag;
    }

    public void setSelektierterAntrag(AntragsDatenObj selektierterAntrag) {
        this.selektierterAntrag = selektierterAntrag;
    }

    public DashboardController() {

        try{

            this.obj_offAntraege = lean.sql.QueryLibrary.getOffneAntraegeMitDaten();

        } catch (Exception e){

            FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR,"#DashBoard001 KOMPONENTE: getoffneAntraege ist abgestürzt: ",e.getMessage()));

        }

    }

}

DataObject AntragsDatenObj.java パッケージのリーン.データオブジェクト;

import java.util.Date;


public class AntragsDatenObj {

    private int antr_id;
    private int antr_status;
    private Date urlb_startdatum;
    private Date urlb_enddatum;
    private int urlb_laenge;
    private String user_name;

    public AntragsDatenObj(int antr_id, int antr_status, Date urlb_startdatum, Date urlb_enddatum, int urlb_laenge, String user_name) {
        this.antr_id = antr_id;
        this.antr_status = antr_status;
        this.urlb_startdatum = urlb_startdatum;
        this.urlb_enddatum = urlb_enddatum;
        this.urlb_laenge = urlb_laenge;
        this.user_name = user_name;
    }

    public int getAntr_id() {
        return antr_id;
    }

    public int getAntr_status() {
        return antr_status;
    }

    public Date getUrlb_startdatum() {
        return urlb_startdatum;
    }

    public Date getUrlb_enddatum() {
        return urlb_enddatum;
    }

    public int getUrlb_laenge() {
        return urlb_laenge;
    }

    public String getUser_name() {
        return user_name;
    }

}
4

1 に答える 1

0

私の英語で申し訳ありません。

datatable.js の 108 行目に問題があります

sortorder = columnHeader.data('sortorder');

if(sortorder) {
    if(sortorder === 'DESCENDING')
        _self.sort(columnHeader, 'ASCENDING');
    else if(sortorder === 'ASCENDING')
        _self.sort(columnHeader, 'DESCENDING');
}
else {
    _self.sort(columnHeader, 'ASCENDING');
}

ソートされた列が選択されていても、最初は columnHeader.data('sortorder') は空です。

修正: ajax の成功時、たとえば

$('body').ajaxSuccess(...);

行う

function() {
    $('.ui-datatable .ui-sortable-column.ui-state-active').each(function() {
        column = $(this);

        if (!column.data('sortorder')) {
            if (column.find('.ui-icon-triangle-1-n')) {
                column.data('sortorder', 'ASCENDING');
            } else if (column.find('.ui-icon-triangle-1-s')) {
                column.data('sortorder', 'DESCENDING');
            }
        }
    });
}
于 2013-01-22T11:11:43.980 に答える