2016-08-09 49 views
2

Ich möchte die Spalten meiner Tabelle, um seine Breite an das größte Element anzupassen. Wie Doppelklick eine Excel-Spalte ...Anpassen der Breite der Spalte an den Inhalt in p: dataTable

Ich habe viele Attribute und Lösungen anderer Fragen ausprobiert, aber nichts hat wirklich getan, was ich wollte.

Hier sind meine Einstellungen für die Datatable, die in ap verschachtelt ist: scollPanel:

<p:dataTable scrollable="true" scrollWidth="auto" scrollHeight="390" 
      tableStyle="width: auto; white-space: nowrap; font-size: smaller" 
      id=carTable" var="vehicles" 
      value="#{dgBean.vehicles}"> 

Verwendung:

  • primefaces 6.0
  • JSF 2.2.1

UPDATE :

Ich weiß nicht warum, aber es scheint wie Tisch-Layout: Auto wird nicht verwendet UND zwei Divs generiert werden. 1 für die Kopfzeile meines Tisches und die andere für den Körper meines Tisches. Deshalb erscheint das erste Layout, das ich gepostet habe, und Header und Body passen gut alleine, aber der Header passt nicht zum Body.

generiert HTML:

<div class="ui-widget-header ui-datatable-scrollable-header" style="width: 1199px;"> 
    <div class="ui-datatable-scrollable-header-box" style="margin-right: 15px;"> 
     <table role="grid"> 
      <thead id="j_idt5:j_idt14:carTable_head">...</thead> 
     </table> 
    </div> 
</div> 
<div class="ui-datatable-scrollable-body" tabindex="-1" style="height: 390px; margin-right: 0px; width: 1199px;"> 
    <table role="grid"> 
     <thead class="ui-datatable-scrollable-theadclone" style="height: 0px;">...</thead> 
     <tbody id="j_idt5:j_idt14:carTable_data" class="ui-datatable-data ui-widget-content" tabindex="0">...</tbody> 
    </table> 
</div> 

So scheint es, wie zwei Tabellen erzeugt werden. Hat jemand eine Idee, wie man dies mit pf beheben kann?

UPDATE von Kommentar

Anwendung

.ui-datatable-scrollable-header-box table, .ui-datatable-scrollable-footer-box table, .ui-datatable-scrollable-body table { 
    table-layout: auto; 
} 

zum Showcase produziert (meine früheren Bildern gelöscht als Ruf nicht hoch genug für mehr als 2 ist):

Showcase with edited css

+0

es, wenn nicht funktioniert Sie entfernen das benutzerdefinierte CSS? – Kukeltje

+0

@Kukeltje Ich denke, du meinst das Hauptthema? nein es ändert nichts – cluecke

+0

nein das tableStyle Zeug und wenn es immer noch nicht funktioniert, überprüfen Sie auch die issuelist und versuchen Sie eine neuere Version (versuchen Sie, nur für dieses Problem) – Kukeltje

Antwort

5

I want the columns of my table to adjust its width to the biggest element.

PrimeFaces DataTable-Standardstil verwendet . So wenn nur diese, ersetzen Sie tableStyle Inhalt mit table-layout: auto; zur Verwendung des automatischen Tabellenlayout Algorithmus zu machen als auf w3schools.com erklärte:

Die Spaltenbreite wird durch den breitesten unzerbrechlich Inhalt in den Zellen eingestellt

Von allem, was Sie geschrieben haben (einschließlich Kommentare) bis jetzt, nehme ich an, Sie wollen eine vertikal und horizontal scrollbarDataTable, dass automatisch die Größe der Spalten zu seinem Inhalt.

Ich behaupte dies nicht möglich mit dem in Funktionalitäten von PrimeFaces Datatable gebaut ist, weil, wie Sie bereits erwähnt, wenn Sie die Datatable scrollbaren machen, die gerenderte Ausgabe in unterscheiden, dass es verschiedene Tabellen für die Header, Body und Footer (um Header und Footer sticky zu machen).

I don't get it why its not working.

Säulengrößen mit dem automatischen Tabellen-Layout-Algorithmus berechnet mit table-layout: auto; für alle drei Tabellen unterscheiden (außer sie übrigens den gleichen weitesten unzerbrechlich Inhalt hat, wie Kopf- und Fußzeilen in ShowCase). Der Größenunterschied wird relativiert, wenn die Tabelle breiter wird (weil zusätzlicher Speicherplatz gleichmäßig auf die Spalten verteilt wird), so dass es aussehen könnte, als wäre alles in Ordnung, wie Kukeltje commented. Wenn Sie jedoch die Breite der Tabelle verkleinern, werden Unterschiede sichtbar.

Wie Sie vielleicht bemerkt haben, enthält die gerenderte Body-Tabelle auch den Header-Inhalt, aber versteckt. So angenommen, der Header-Inhalt wäre breiter als der Body-Inhalt, alles wäre zumindest für die Header- und Body-Tabelle in Ordnung.

    | broadest content 
======================================== 
        | column 1 | column 2 
======================================== 
header table  | 5  | 7 
---------------------------------------- 
hidden header part | 5  | 7 
body part   | 4  | 6 
________________________________________ 
body table   | 5  | 7 
---------------------------------------- 
footer table  | 2  | 3 

Die einfachste Abhilfe ist Verschiebbarkeit zu deaktivieren und Paginierung aktivieren. Damit haben Sie eine mehr oder weniger steuerbare Höhe von DataTable (mit Zeilen Attribut) unter Beibehaltung der verbleibenden Anforderungen.

From my point of view the paginator looks like it is just replacing the vertical scrolling.

Mehr oder weniger (daher die einfachste Abhilfe). Wichtigste ist, dass nur eine Tabelle renderd ist und daher Header, Body und Footer Inhalt verwendet wird, die Spaltenbreiten zu berechnen:

  | broadest content 
--------------------------------- 
      | column 1 | column 2 
--------------------------------- 
header part | 2  | 3 
body part | 4  | 6 
footer part | 2  | 3 
_________________________________ 
full table | 4  | 6 

How does that aid my horizontal problem?

Mit table-layout: auto; Sie horizontales Scrollen erhalten innerhalb der Paginator-Ansichtsfenster aus der Box.

Ein weiterer Ansatz ist Verschiebbarkeit zu deaktivieren und die Datatable mit einem Scroll wickeln. Dies hat einige Nachteile, da die Kopfzeile auch scrollbar ist und es Probleme mit der Größenanpassung gibt, die Sie behandeln müssen, also würde ich es nicht empfehlen.

Beste Lösung wird einen maßgeschneiderten Renderer (man beachte den versteckten Inhalt des Headers in der gerenderten Körper Tabelle, wenn Verschiebbarkeit aktiviert ist und umge verca erweitern) und/oder kundenspezifische JS/CSS für Ihr Datatable, aber das ist aus Umfang Ihrer Frage.

Die einfachste Lösung wäre, nicht auf automatische Spaltenanpassung nach Tabelleninhalt zu bestehen und DataTable mit Scroll-Funktionen zu übernehmen.

+0

Ich habe es ausprobiert ... ohne Erfolg. Wie gesagt habe ich die anderen Fragen hier gelesen. Ich nehme an, dass das erste Attribut in meinen Einstellungen bedeutet, dass meine Datentabelle scrollbar sein soll (:-P). Nur Spalten in der Tabelle keine columnGroups. – cluecke

+1

@cluecke Sie sagten, Sie haben hier andere Fragen gelesen, aber nicht welche. Tut mir leid, ich bin kein Hellseher. Abgesehen von Ihrer Anforderung, die Spaltenbreite an den Inhalt anzupassen, sollte Ihre DataTable gescrollt werden können. – irieill

+0

@cluecke: Wenn Sie anwenden, was oben vorgeschlagen wird, wo endet das 'table-layout: auto '? Da, wenn ich es explizit auf jede Tabelle in der [Schaufenster] (http://www.primefaces.org/showcase/ui/data/datatable/scroll.xhtml) (Header, Körper und Fußzeile) anwenden, funktioniert es für mich. '.ui-datatable-scrollbare-header-box-Tabelle, .ui-datatable-scrollbare-footer-box-Tabelle, .ui-datatable-scrollbare-body-Tabelle { table-layout: auto; } ' – Kukeltje

0

hatte ich die gleiche Problem Kopf- und Tabelleninhalt Breite war anders, ich unten CSS erstellt und wie ein Zauber für mich gearbeitet, muß nicht alles wie Filter oder Bildlaufleisten entfernen

.ui-datatable-scrollable-header-box table th, .ui-datatable-scrollable-footer-box table th, .ui-datatable-scrollable-body table td{ 
    width: 20% !important; 
} 
+0

Breite kann natürlich geändert werden :) – Yasir