2 Stimmen

Primefaces Datatable JSF2.0

Nun Ive wurde die Entwicklung einer JSF-Schnittstelle, und mit primefaces haben es geschafft, zwei Datentabellen, die Daten aus einem SAP / Oracle ondemand crm System ziehen zu erstellen. Allerdings ist alles nicht so glatt gehen, Im mit Schwierigkeiten mit der datatable in einer Reihe von Bereich ist.

  1. Ich kann nicht scheinen, um Befehlsschaltflächen mit eindeutigen IDs zuweisen, wenn ich sie innerhalb einer Spalte in der Datentabelle hinzufügen (kann nicht rowindexvar verwenden, da es nicht für die Verarbeitung verwendet werden kann). Grundsätzlich muss ich zwei Schaltflächen einfügen und aktualisieren als unsichtbar, bis eine Zeile in der zweiten datatable in der Zeit die Schaltfläche für die zugehörige Tabelle in der oben datatable ausgewählt ist dann aktiviert und wird klickbar.

  2. Ich kann nicht scheinen, um die Highlight-Farbe der rowselect seine Farbe zu ändern, es behält eine seltsame gelbe Einrückung Farbe, die nicht stark genug, um wirklich lassen den Benutzer wissen, dass sie die Zeile ausgewählt haben.

  3. Wenn ich in der Datentabelle zoomen, die Spalten überlaufen aus der Datentabelle, (aufgrund der Anzahl der Spalten) und ich wirklich wirklich nicht finden, ein Workaround.

Alle diese Probleme habe ich ausgiebig gesucht, ohne Erfolg, so dass ich hoffe, dass some1 hier vielleicht sogar "Cagatay Civici" kann versuchen, mir in irgendeiner Hinsicht zu helfen, würde ich wirklich wirklich schätzen die Hilfe.

Hier ist mein 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">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <p:themeSwitcher initialText="Change Skin"  buttonPreText="Skin: "/>   
        <title>Elpone Facelet</title>
        <style type="text/css"> 
            td{ font-family:sans-serif; font-size: 10px;}
            h{ font-family:sans-serif; font-size: 10px; font-weight: bold;}
            body{background-color: grey;}
            #bannerImage{width:100%; height:160px;}
            .ui-datatable .ui-state-highlight {
            background-color:#83AAB4;}
           #buttonPanel{visibility:hidden;} 

        </style>
    </h:head>
    <h:body >
        <div id="bannerContainer">
        <h:graphicImage id="bannerImage" alt="ban_eloma" url="/resources/Eloma_banner1.jpg"/> 
        </div>

      <h:form>
                <p:panel header="SAP Accounts" id="sapPanel">    

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

            <p:dataTable style="width:101%;"
                scrollable="false"    
                rowIndexVar="rowID"   
                id="debTable"
                var="debitors" 
                value="#{tableBean.deblst}"  
                paginator="true"
                rows="8"
                selection="#{tableBean.selectedRec}"
                rowSelectListener="#{tableBean.onRowSelect}"   
                update="debAccTable"
                selectionMode="single"
                paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                rowsPerPageTemplate="8,15,20"

                >

                <p:column>

                    <f:facet name="header">
                        <h:outputText value="Kunnr" />
                    </f:facet>
                    <h:outputText value="#{debitors.debitorPK.kunnr}"/>
                </p:column>   

                <p:column>
                    <f:facet name="header">
                        <h:outputText value="SAP gelöscht"/>
                    </f:facet>
                    <h:outputText value="#{debitors.loevm}"/>
                </p:column>
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="Name1"/>
                    </f:facet>
                    <h:outputText value="#{debitors.name1}"/>
                </p:column>  

                <p:column>
                    <f:facet name="header">
                        <h:outputText value="Name2"/>
                    </f:facet>
                    <h:outputText value="#{debitors.name2}"/>
                </p:column>

                <p:column>
                    <f:facet name="header">
                        <h:outputText value="Name3"/>
                    </f:facet>
                    <h:outputText value="#{debitors.name3}"/>
                </p:column> 

                <p:column>
                    <f:facet name="header">
                        <h:outputText value="#{bundle.ListDebitorTitle_ort01}"/>
                    </f:facet>
                    <h:outputText value="#{debitors.ort01}"/>
                </p:column>

                <p:column>
                    <f:facet name="header">
                        <h:outputText value="#{bundle.ListDebitorTitle_pstlz}"/>
                    </f:facet>
                    <h:outputText value="#{debitors.pstlz}"/>
                </p:column>

                <p:column>
                    <f:facet name="header">
                        <h:outputText value="#{bundle.ListDebitorTitle_smtpaddr}"/>
                    </f:facet>
                    <h:outputText value="#{debitors.smtpaddr}"/>
                </p:column>

                <p:column>
                    <f:facet name="header">
                        <h:outputText value="#{bundle.ListDebitorTitle_stras}"/>
                    </f:facet>
                    <h:outputText value="#{debitors.stras}"/>
                </p:column>

                <p:column>
                    <f:facet name="header">
                        <h:outputText value="#{bundle.ListDebitorTitle_land1}"/>
                    </f:facet>
                    <h:outputText value="#{debitors.land1.country}"/>
                </p:column>

                <p:column>
                    <f:facet name="header">
                        <h:outputText value="#{bundle.ListDebitorTitle_telf1}"/>
                    </f:facet>
                    <h:outputText value="#{debitors.telf1}"/>
                </p:column>

                <p:column>
                    <f:facet name="header">
                        <h:outputText value="#{bundle.ListDebitorTitle_telfx}"/>
                    </f:facet>
                    <h:outputText value="#{debitors.telfx}"/>
                </p:column>
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="Hauptzielgruppe"/>
                    </f:facet>
                    <h:outputText value="#{debitors.brsch.maintarget}"/>
                </p:column>
                 <p:column >
                    <f:facet name="header">
                        <h:outputText value="Unterzielgruppe"/>
                    </f:facet>
                    <h:outputText value="#{debitors.brsch.subtarget}"/>
                </p:column>

                <p:column>
                    <h:panelGrid columns="2" styleClass="actions" id="buttonPanel">  

                      <p:commandButton id="insertbutton" update=":form:display" value="Insert" title="Insert"> 
                 </p:commandButton>  
                        <p:commandButton disabled="#{tableBean.isButtonDisabled}" id="var22" update=":form:display" value="Update" title="Update"> 
                 </p:commandButton>  
                    </h:panelGrid>  
                </p:column> 

            </p:dataTable>
</p:panel>  

          <div style="background-color:#D01C2E; width:100%; height:12px;"></div>

            <p:panel header="Related Accounts">    
                 <p:dataTable id="debAccTable"                
                var="debAcc" 
                rows="5"
                paginator="true"
                update="debTable"
                value="#{tableBean.debAcclst}"
                selection="#{tableBean.selectedAccRec}"
                rowSelectListener="#{tableBean.onDecAccSelect}"  
                selectionMode="single"          
                paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                rowsPerPageTemplate="3,5,10"
                 >                
        <p:column selectionMode="single">

            </p:column>
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="#{bundle.ListDebAccTitle_id_row_id}"/>
                    </f:facet>
                    <h:outputText value="#{debAcc.id.row_id}"/>
                </p:column>
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="#{bundle.ListDebAccTitle_accountname}"/>
                    </f:facet>
                    <h:outputText value="#{debAcc.accountname}"/>
                </p:column>
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="#{bundle.ListDebAccTitle_streetaddress}"/>
                    </f:facet>
                    <h:outputText value="#{debAcc.streetaddress}"/>
                </p:column>
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="#{bundle.ListDebAccTitle_odkundennummer}"/>
                    </f:facet>
                    <h:outputText value="#{debAcc.odkundennummer}"/>
                </p:column>
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="#{bundle.ListDebAccTitle_plz}"/>
                    </f:facet>
                    <h:outputText value="#{debAcc.plz}"/>
                </p:column>
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="#{bundle.ListDebAccTitle_city}"/>
                    </f:facet>
                    <h:outputText value="#{debAcc.city}"/>
                </p:column>
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="#{bundle.ListDebAccTitle_name2}"/>
                    </f:facet>
                    <h:outputText value="#{debAcc.name2}"/>
                </p:column>
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="#{bundle.ListDebAccTitle_name3}"/>
                    </f:facet>
                    <h:outputText value="#{debAcc.name3}"/>
                </p:column>
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="#{bundle.ListDebAccTitle_hauptzielgruppe}"/>
                    </f:facet>
                    <h:outputText value="#{debAcc.hauptzielgruppe}"/>
                </p:column>
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="#{bundle.ListDebAccTitle_unterzielgruppe}"/>
                    </f:facet>
                    <h:outputText value="#{debAcc.unterzielgruppe}"/>
                </p:column>
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="#{bundle.ListDebAccTitle_email}"/>
                    </f:facet>
                    <h:outputText value="#{debAcc.email}"/>
                </p:column>
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="#{bundle.ListDebAccTitle_tel}"/>
                    </f:facet>
                    <h:outputText value="#{debAcc.tel}"/>
                </p:column>
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="#{bundle.ListDebAccTitle_saploeschen}"/>
                    </f:facet>
                    <h:outputText value="#{debAcc.saploeschen}"/>
                </p:column>
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="#{bundle.ListDebAccTitle_fax}"/>
                    </f:facet>
                    <h:outputText value="#{debAcc.fax}"/>
                </p:column>
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="#{bundle.ListDebAccTitle_deb}"/>
                    </f:facet>
                    <h:outputText value="#{debAcc.deb}"/>
                </p:column>

            </p:dataTable> 
            </p:panel>
        </h:form>
    </h:body>
</html>

Ich glaube nicht, dass Sie die Tablebean benötigen, da die Logik hinter allem gut funktioniert, es gibt nur Anzeigeprobleme und XHTML-Eigenschaften. Allerdings, wenn erforderlich, werde ich zur Verfügung stellen. Auch beachten Sie, dass in der XHTML im derzeit messing um mit einer Menge Dinge, so dass es einige redundante Sachen in dort sein kann.

0voto

Tim Brückner Punkte 1163

Welche Version von primefaces verwenden Sie?

1) Ich bin bei PrimeFaces 3.0 und ich bin mir ziemlich sicher, dass jede Tabellenzelle eine eindeutige ID wiedergibt. Elemente innerhalb von Tabellenzellen sollten daher auch eindeutige IDs erhalten. Ich vermute, Ihr Problem besteht darin, dass Sie die ID der Schaltfläche kennen müssen, um ihren Zustand zu aktualisieren. Am einfachsten ist es wohl, die gesamte datierbare Komponente zu aktualisieren, anstatt die Schaltfläche zu aktualisieren. Vielleicht sollten Sie einen Blick auf die Input- und Output-Facetten werfen, die den Datentabellen hinzugefügt wurden: http://www.primefaces.org/showcase/ui/datatableEditing.jsf

2) Scheint mir eine Frage von CSS zu sein. Haben Sie versucht, Ihren eigenen Stil auf die CSS-Klasse anzuwenden ui-state-highlight ? Sie können Tools wie Firebug verwenden, um herauszufinden, warum Ihre Stile nicht angewendet werden. Vielleicht müssen Sie einige Regeln aufstellen !important .

3) Ich bin mir nicht sicher, was Sie mit "auf den Tisch zoomen" meinen. Aber ich denke, dass die Anwendung Ihrer eigenen CSS-Stile auf die Tabelle eine Möglichkeit sein könnte, Ihr Problem zu umgehen.

Viel Glück .-)

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X