Mit der DHTMLX UI-Komponentenbibliothek können Sie plattform- und browserübergreifende Web- und Mobilanwendungen schneller erstellen. Es umfasst einen umfangreichen Satz gebrauchsfertiger HTML5-Komponenten, die problemlos in einer einzigen Anwendungsoberfläche kombiniert werden können.
DHTMLX Suite v8.3 wurde kürzlich offiziell veröffentlicht! Dieses Update enthält eine Reihe neuer Funktionen und Verbesserungen, die Ihre Erfahrung mit der JavaScript-UI-Widget-Bibliothek verbessern sollen. Beispielsweise wurde dem Colorpicker-Widget die Möglichkeit hinzugefügt, Farbtransparenzstufen festzulegen. In Version 8.3 können beliebte Grid/TreeGrid-Funktionen wie der automatische Höhenmodus, HTML-Inhalte in Zellen und Ereignishandler ausschließlich auf Kopf- und Fußzeilen angewendet werden.
Download der offiziellen Version der DHTMLX Suite v8.3
Colorpicker – Farbtransparenzoptionen
DHTMLX Colorpicker ist ein praktisches Tool, das Farbauswahlfunktionen in verschiedenen UI-Elementen wie Formularen oder Popups ermöglicht. In Version 8.3 haben wir dieses Widget um eine umfangreiche Farbpalette ergänzt, mit der Sie die Transparenz ausgewählter Farben festlegen können.
Sie müssen Ihrem Code nichts hinzufügen, um Endbenutzern die Verwendung von Farbtransparenz zu ermöglichen, da diese Funktion standardmäßig über die neue Transparenzeigenschaft aktiviert ist, die für die Anzeige der Transparenzskala auf der Webseite verantwortlich ist.
Um die gewünschte Farbtransparenzstufe über die Benutzeroberfläche festzulegen, zieht der Endbenutzer einfach den Schieberegler auf der Transparenzskala, wie im folgenden Beispiel gezeigt.
Bei Bedarf kann die Farbtransparenzfunktion deaktiviert werden, indem der Wert der Transparenzeigenschaft auf „false“ gesetzt wird.
const colorpicker = new dhx.Colorpicker("colorpicker", {
transparency: false
});Grid & TreeGrid – neue Funktionen für Spaltenkopf- und -fußzeilen
Automatischer Höhenmodus (PRO)
In Version 8.1 haben wir den automatischen Höhenmodus für Zeilen in Tabellen eingeführt, die mit den Grid- und TreeGrid-Widgets erstellt wurden, und die neue Suite-Version erweitert diese Funktionalität auf Kopf- und Fußzeilen in Tabellenspalten. Daher passt das Grid/TreeGrid die Höhe der Kopf-/Fußzeile basierend auf dem Inhalt dynamisch an, und die Kopf- und Fußzeile können Text unterschiedlicher Länge enthalten und dennoch für den Endbenutzer vollständig sichtbar sein.
Fügen Sie programmgesteuert neue Parameter „headerAutoHeight“ und „footerAutoHeight“ im Konfigurationsobjekt „Grid/TreeGrid“ hinzu, um den automatischen Kopf-/Fußzeilen-Höhenmodus zu aktivieren. Sie ermöglichen das Umschalten des automatischen Höhenmodus einer Kopf- oder Fußzeile unabhängig von der allgemeinen Eigenschaft „Autohöhe“.
So wird es im Grid-Widget gemacht:
const grid = new dhx.Grid("grid", {
columns: [
...
],
...
autoHeight: false, // enables autoHeight in data (content)
headerAutoHeight: true, // enables autoHeight in header
footerAutoHeight: true, // enables autoHeight in footer
});
Bitte beachten Sie, dass diese Funktion nur in der PRO-Version von DHTMLX Grid verfügbar ist.
Beachten Sie, dass Sie, wenn Ihre Tabelle eine bestimmte Kopf- und Fußzeile mit fester Höhe haben soll, diese auch über die bereits vorhandenen Eigenschaften headerRowHeight und footerRowHeight angeben können.
Ereignishandler
DHTMLX Suite 8.3 bietet Ihnen eine neue praktische Möglichkeit, Ereignishandler zu Spaltenkopf- und -fußzeilen in Grid/TreeGrid hinzuzufügen. Anstatt selbst Event-Handler an die Kopf-/Fußzeile anzuhängen, können Sie sich jetzt auf das Attribut eventHandlers verlassen, um diese Aufgabe schneller zu erledigen. Während diese Eigenschaft bisher nur das Hinzufügen von Ereignishandlern zu im Datensatz definierten HTML-Elementen oder zu benutzerdefinierten Vorlagen in Spaltenzellen ermöglichte, kann sie jetzt auch für Kopf-/Fußzeilenzellen verwendet werden.
Sie können beispielsweise ein Onclick-Ereignis zum Haupt-Kontrollkästchen in der Kopfzeile hinzufügen. Dieses Ereignis sollte ausgelöst werden, wenn ein Kontrollkästchen als aktiviert/deaktiviert markiert ist und alle untergeordneten Kontrollkästchen in der Spalte aktualisiert:
const grid = new dhx.Grid("grid", {
columns: [
{
width: 60,
id: "paid",
header: [
{
text: `
<label class="dhx_checkbox dhx_cell-editor__checkbox ">
<input type="checkbox" class="dhx_checkbox__input dhx_checkbox--check-all">
<span class="dhx_checkbox__visual-input "></span>
</label>
`,
...// more options
],
...// more options
eventHandlers: {
onclick: {
"dhx_checkbox--check-all": function(event, data) {
grid.data.forEach(row => {
grid.data.update(row.id, {
[data.col.id]: event.target.checked,
});
});
}
},
},
});
Diese neue Funktion erweitert die Möglichkeiten zur Bereitstellung dynamischer und interaktiver Datentabellen mit DHTMLX.
HTML-Inhalt in Kopf-/Fußzeilenzellen
Zusätzlich zum automatischen Höhenmodus und Ereignishandlern fügt Version 8.3 eine Grid/TreeGrid-Funktionalität für Spaltenkopf-/-fußzeilen hinzu. Diese Tabellenelemente können Sie nun über das htmlEnable-Attribut mit beliebigen HTML-Inhalten ergänzen.
Sie können beispielsweise das htmlEnable-Attribut anwenden, um den Stil der Kopfzelle wie folgt zu ändern:
const grid = new dhx.Grid("grid", {
columns: [
{ width: 200, id: "country", header: [
{
text: "<span style='font-size:16px; color: steelblue'>Country</span>",
htmlEnable: true,
}
]},
{ width: 150, id: "population", htmlEnable: true, header: [
{ text: "<span class='header-title'>Population</span>" }
...// other columns' configs
],
data: dataset,
htmlEnable: false,
});
Bei Anwendung auf die Kopfzeile (oder Fußzeile) einer Spalte definiert das htmlEnable-Attribut den bereits für die übergeordnete Spalte oder die gesamte Tabelle für dieselbe Konfiguration angegebenen Wert neu.