Available only in PRO Edition
Diese Funktionalität ist nur in der PRO-Edition verfügbar.
Die gantt.ext.formatters-Erweiterung bietet zwei Möglichkeiten zur Formatierung von Werten:
Sie können auch einen benutzerdefinierten Formatter erstellen, indem Sie auf den vorhandenen aufbauen.
Die Methode gantt.ext.formatters.durationFormatter(config) erzeugt eine neue DurationFormatter-Instanz.
Beispiele:
Einen Duration Formatter mit Standardeinstellungen erstellen:
const formatter = gantt.ext.formatters.durationFormatter();
// eine Formatter-Instanz wird mit der Factory-Methode erstellt
formatter.parse("1"); // wird als 1 Tag interpretiert, wenn enter:"day" (Standard)
formatter.parse("1"); // wird als 1 Stunde interpretiert, wenn enter:"hour"
formatter.parse("1 day"); // wird als 8 gespeichert, wenn store:"hour"
formatter.parse("1 day"); // wird als 480 gespeichert, wenn store:"minute"
gantt.ext.formatters.durationFormatter({
format: ["hour", "minute"], store:"minute"
}).format(260); // gibt "4 hours 20 minutes" aus
gantt.ext.formatters.durationFormatter({
format: "hour", store:"minute"
}).format(260);// gibt "4.33 hours" aus
gantt.ext.formatters.durationFormatter({
format: ["week", "hour", "minute"],
store:"minute",
short: false }).format(10021); //"4 weeks 7 hours 1 minute"
gantt.ext.formatters.durationFormatter({
format: ["week", "hour", "minute"],
store:"minute",
short: true }).format(10021); //"4wk 7h 1min"
Beispiel mit vollständiger Konfiguration:
const formatter = gantt.ext.formatters.durationFormatter({
// Standardwerte
enter: "day",
store: "hour",
format: "auto",
short: false,
minutesPerHour: 60,
hoursPerDay: 8,
hoursPerWeek: 40,
daysPerMonth: 30,
daysPerYear: 365,
labels: {
minute: {
full: "minute",
plural: "minutes",
short: "min"
},
hour: {
full: "hour",
plural: "hours",
short: "h"
},
day: {
full: "day",
plural: "days",
short: "d"
},
week: {
full: "week",
plural: "weeks",
short: "wk"
},
month: {
full: "month",
plural: "months",
short: "mon"
},
year: {
full: "year",
plural: "years",
short: "y"
}
}
});
Die DurationFormatter-Instanz stellt folgende Methoden bereit:
const formatter = gantt.ext.formatters.durationFormatter();
console.log(formatter.canParse("1 day"));
// true
console.log(formatter.canParse("abc"));
// false
const formatter = gantt.ext.formatters.durationFormatter();
console.log(formatter.format(24));
// Ausgabe: 3 days
const formatter = gantt.ext.formatters.durationFormatter();
console.log(formatter.parse("1 day"));
// Ausgabe: 8
Weitere Details zu durationFormatter finden Sie im Artikel Arbeitszeitberechnung.
Die Methode gantt.ext.formatters.linkFormatter(config) erstellt eine neue LinkFormatter-Instanz. Sie teilt sich einige Methoden und Konfigurationen mit dem Duration Formatter.
Beispiele:
Einen Link Formatter mit Standardeinstellungen erstellen:
const formatter = gantt.ext.formatters.linkFormatter();
// eine Formatter-Instanz wird mit der Factory-Methode erstellt
gantt.ext.formatters.linkFormatter()
.format({id:1, type:"1", source: 1, target: 2, lag: 5});
// Ausgabe: "1SS+5 days"
var durationFormatter = gantt.ext.formatters.durationFormatter({
short: true
});
gantt.ext.formatters.linkFormatter({durationFormatter: durationFormatter})
.format({id:1, type:"2", source: 1, target: 2, lag: -1});
// Ausgabe: "1FF-1d"
const formatter = gantt.ext.formatters.linkFormatter({
// Standardwerte
durationFormatter: gantt.ext.formatters.durationFormatter(),
labels: {
finish_to_start: "FS",
start_to_start: "SS",
finish_to_finish: "FF",
start_to_finish: "SF"
}
});
Die LinkFormatter-Instanz bietet folgende Methoden:
const formatter = gantt.ext.formatters.linkFormatter();
console.log(formatter.canParse("1FS + 1 day"));
// true
console.log(formatter.canParse("abc"));
// false
const formatter = gantt.ext.formatters.linkFormatter();
formatter.format({id:1, type:"1", source: 1, target: 2, lag: 5});
// Ausgabe: "1SS+5 days"
const formatter = gantt.ext.formatters.linkFormatter();
formatter.parse("1SS+5 days");
// Ausgabe: {id:1, type:"1", source: 1, target: null, lag: 5}
Der LinkFormatter arbeitet mit zwei Link-Formaten:
const formatter = gantt.ext.formatters.linkFormatter();
console.log(formatter.parse("1.1"));
// {id:1, type:"0", source: 2, target: 3, lag: 0}
console.log(formatter.format({id:2, type:"0", source: 1, target: 3, lag: 0}));
// 1.1
const formatter = gantt.ext.formatters.linkFormatter();
console.log(formatter.parse("1.1SS + 1 day"));
// {id:1, type:"1", source: 2, target: null, lag: 1}
console.log(formatter.format({id:1, type:"1", source: 2, target: 3, lag: 1}));
// 1.1SS + 1 day
Finish-to-Start-Links ohne Lag oder Lead werden im Kurzformat angezeigt, während andere Links das Komplettformat nutzen. Ebenso nimmt der Formatter beim parse-Aufruf mit nur einem Aufgaben-WBS-Code an, dass es sich um einen Finish-to-Start-Typ mit Lag 0 handelt.
Weitere Details zur Methode linkFormatter finden Sie im Artikel Inline-Bearbeitung im Grid.
Das Gantt-Tool ermöglicht es, eigene Formatter auf Basis der integrierten Formatter zu erstellen. Sie können diese benutzerdefinierten Formatter dem Inline-Editor hinzufügen. Intern speichert Gantt die Daten im erwarteten Format, aber wenn ein Benutzer den Inline-Editor öffnet, wird der Wert im bevorzugten Format angezeigt.
Ein eigener Formatter ist ein Objekt mit zwei Funktionen: format() und parse().
Die format()-Funktion wandelt eine Zahl (für einen eigenen durationFormatter) oder einen Link (für einen eigenen linkFormatter) in den gewünschten Anzeige-Wert um. Die parse()-Funktion konvertiert diesen formatierten Wert wieder in eine Zahl oder ein Link-Objekt.
So sehen eigene Formatter typischerweise aus:
const customDurationFormatter = {
format: function (duration) {
let formattedDuration;
// Code zur Umwandlung von Zahl in den gewünschten Wert
return formattedDuration;
},
parse: function (formattedValue) {
let duration;
// Code zur Umwandlung vom gewünschten Wert in eine Zahl
return duration;
}
};
const customLinkFormatter = {
format: function (link) {
let formattedLink;
// Code zur Umwandlung vom Link-Objekt in den gewünschten Wert
return formattedLink;
},
parse: function (formattedValue) {
let link;
// Code zur Umwandlung vom gewünschten Wert in das `link`-Objekt
return link
}
};
Es ist möglich, bestehende Formatter in eigenen Formattern zu verwenden und deren Ausgaben nach Bedarf anzupassen.
Sie weisen eigene Formatter Inline-Editoren genauso zu wie die Standard-Formatter. Zum Beispiel:
const durationEditor = {
type: "duration", map_to: "duration", formatter: customDurationFormatter
};
Hier ein Beispiel für eigene Duration- und Link-Formatter:
Related sample: Custom duration and link formatters
Der Standard-Duration Formatter ist darauf ausgelegt, englische Pluralformen zu verarbeiten, bei denen meist nur ein Suffix angehängt oder das Substantiv geringfügig geändert wird.
Andere Sprachen haben oft mehrere Pluralformen und unterschiedliche Regeln, wann welche Form verwendet wird. Um dies zu berücksichtigen, können Sie einen eigenen Formatter erstellen, der die korrekten Regeln für Ihre Sprache anwendet. Das folgende Beispiel zeigt, wie diese Regeln für Japanisch umgesetzt werden können:
Related sample: Custom duration formatter with different plural values for Japanese locale
Zurück nach oben