sposób montażu DataTable do panelu z max-procentowy wysokości

Primefaces [5,0]sposób montażu DataTable do panelu z max-procentowy wysokości

mam TabView trzymającego DataTable. W zależności od karty, datatable jest wypełniany różnymi danymi (tj. Inną liczbą kolumn i wierszy). Następująca konfiguracja obsługuje dane w porządku, ale bez względu na to, czy nałożę ograniczenie maksymalnej wysokości na panel, kartę lub datatable, nie wydaje się, aby ograniczało to do tego procentu ekranu. Jeśli ustawię ograniczenie na konkretną wartość (na przykład 300px), działa, ale wolałbym nie.

Zasadniczo: Chcę danych, które będą pasować do jego zawartości do tego stopnia, że zajmuje 30% ekranu. W tym momencie powinien przewijać.

<body style="min-width: 1366px;min-height: 768px;height: 100%;margin-left: 20px;"> 
    <div style="width: 10%;float: left"> ... </div> 
    <div style="width: 90%;float: right"> 
      <p:panel classStyle="panel" header="Instance Data View" style="width: 100%;max-height: 30%;margin-bottom: 1%"> 
       <p:tabView value="#{pageBean.tables}" var="table" dynamic="true"> 
        <p:tab title="#{table.tableName}" > 
         <p:dataTable var="row" 
          value="#{pageBean.tableData[table.tableName].data}" 
          resizableColumns="true"> 
          <p:columns value="#{pageBean.tableData[table.tableName].columns}" style="white-space: normal;" 
           var="column" columnIndexVar="columnIndex"> 
           <f:facet name="header"> 
            <p:outputLabel value="#{column}"/> 
           </f:facet> 
           <p:outputLabel value="#{row[columnIndex]}"/> 
          </p:columns> 
         </p:dataTable> 
        </p:tab> 
       </p:tabView> 
      </p:panel> 
      ... 
    </div> 
    </body>

Źródło

2014-06-23 user2303325

Ci cas korzystania ScrollWidth i ScrollHeight dla DataTable. Istnieją trzy opcje do tego celu. na przykład:

scrollHeight="30%" 
scrollWidth="30%" 
scrollable="true"

za pomocą tej metody można kontrolować swój rozmiar danych.

p.s: Nie powinieneś mówić o swojej pierwotnej wersji.

Źródło

2014-06-23 07:18:50

Problem z tego rozwiązania jest to, że chcę DataTable mają być zawarte do konkretnego procentowa ekran - maksymalnie 30% tego. Jednak użycie ograniczenia scrollHeight w tym dniu ogranicza je do procentu * danych *. Ponieważ liczba rzędów, które będę miała, nie jest ustawiona w kamieniu, to nie rozwiązuje mojego problemu. Dodałem lepszy opis w moim pytaniu. – user2303325

Możesz użyć „VH” od wielkości max-height, na wysokości rzutni tak:

<body style="min-width: 1366px;min-height: 768px;height: 100%;margin-left: 20px;"> 
<div style="width: 10%;float: left"> ... </div> 
<div style="width: 90%;float: right"> 
     <p:panel classStyle="panel" header="Instance Data View" style="width: 100%;margin-bottom: 1%"> 
      <p:tabView value="#{pageBean.tables}" var="table" dynamic="true"> 
       <p:tab title="#{table.tableName}" > 
        <p:dataTable var="row" 
         value="#{pageBean.tableData[table.tableName].data}" 
         resizableColumns="true" style="max-height: 30vh;"> 
         <p:columns value="#{pageBean.tableData[table.tableName].columns}" style="white-space: normal;" 
          var="column" columnIndexVar="columnIndex"> 
          <f:facet name="header"> 
           <p:outputLabel value="#{column}"/> 
          </f:facet> 
          <p:outputLabel value="#{row[columnIndex]}"/> 
         </p:columns> 
        </p:dataTable> 
       </p:tab> 
      </p:tabView> 
     </p:panel> 
     ... 
</div> 
</body>

Źródło

2017-05-29 13:37:29

sposób montażu DataTable do panelu z max-procentowy wysokości

Odpowiedz

Powiązane problemy