Primefaces Datatable JSF2.0 - PullRequest
       26

Primefaces Datatable JSF2.0

2 голосов
/ 09 ноября 2011

Ну, я разрабатывал интерфейс JSF, и с помощью простых лиц удалось создать две таблицы данных, которые извлекают данные из системы SAP / oracle ondemand crm.Однако не все так гладко, у меня проблемы с данными в ряде областей.

  1. Кажется, я не могу назначить командные кнопки с уникальными идентификаторами, если я добавляю их в столбец таблицы данных (нельзя использовать rowindexvar, поскольку его нельзя использовать для обработки).По сути, мне нужно установить две кнопки вставки и обновления как невидимые, пока во втором объекте данных не будет выбрана строка, и в это время кнопка соответствующей таблицы в приведенном выше объекте данных будет активирована и станет активной.

  2. Кажется, я не могу заставить цвет выделения выделенной строки изменить свой цвет, он поддерживает странный желтый цвет отступа, который недостаточно силен, чтобы действительно дать пользователю знать, что он выбралстрока.

  3. Когда я увеличиваю масштаб данных, столбцы переполняются данными (из-за количества столбцов), и я действительно не могу найти обходной путь.

Все эти проблемы я искал широко, но безрезультатно, поэтому я надеюсь, что кто-то здесь, возможно, даже «Cagatay Civici», может попытаться помочь мне в каком-то отношении, я был бы очень признателен за помощь.

Вот мой 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>

Я не думаю, что вам понадобится Tablebean, поскольку логика, лежащая в основе всего, работает нормально - проблемы с отображением и свойства XHTML.Однако, если потребуется, я предоставлю.Также обратите внимание, что в XHTML я в настоящее время возился со многими вещами, поэтому там могут быть некоторые лишние вещи.

1 Ответ

0 голосов
/ 18 января 2012

Какую версию Primefaces вы используете?

1) Я сейчас на PrimeFaces 3.0 , и я почти уверен, что каждая ячейка таблицы отображает уникальный идентификатор. Поэтому элементы внутри ячеек таблицы также должны получать уникальные идентификаторы. Я полагаю, ваша проблема в том, что вам нужно знать идентификатор кнопки, чтобы обновить ее состояние. Я предполагаю, что самый простой способ - обновить весь компонент данных, а не обновить кнопку. Возможно, вы захотите взглянуть на фасеты ввода и вывода, которые были добавлены в таблицы данных: http://www.primefaces.org/showcase/ui/datatableEditing.jsf

2) Мне кажется, это вопрос CSS. Вы пытались применить свой собственный стиль к классу CSS ui-state-highlight? Вы можете использовать такие инструменты, как Firebug, чтобы выяснить, почему ваши стили не применяются. Возможно, вам нужно сделать некоторые правила !important.

3) Я не уверен, что вы имеете в виду под «приближением к столу». Но я думаю, что применение ваших собственных стилей CSS к таблице может быть способом обойти вашу проблему.

Удачи .-)

...