Available only in PRO Edition
Diese Funktionalität ist nur in der PRO-Edition verfügbar.
Die gantt.ext.formatters-Erweiterung bietet zwei praktische Methoden zur Formatierung:
Sie können auch einen benutzerdefinierten Formatter erstellen, indem Sie die bereitgestellten als Basis verwenden.
Die Methode gantt.ext.formatters.durationFormatter(config) erstellt eine neue DurationFormatter-Instanz.
Beispiele:
So richten Sie einen Dauer-Formatter mit Standardeinstellungen ein:
const formatter = gantt.ext.formatters.durationFormatter();
// erstellt eine Instanz des Formatter-Objekts mit der Fabrikmethode
formatter.parse("1"); // behandelt den Wert als 1 Tag, wenn enter:"day" (Standard)
formatter.parse("1"); // behandelt den Wert als 1 Stunde, wenn enter:"hour"
formatter.parse("1 day"); // speichert den Wert als 8, wenn store:"hour"
formatter.parse("1 day"); // speichert den Wert als 480, wenn store:"minute"
gantt.ext.formatters.durationFormatter({
format: ["hour", "minute"], store:"minute"
}).format(260); // 4 Stunden 20 Minuten
gantt.ext.formatters.durationFormatter({
format: "hour", store:"minute"
}).format(260); // 4.33 Stunden
gantt.ext.formatters.durationFormatter({
format: ["week", "hour", "minute"],
store:"minute",
short: false }).format(10021); // "4 Wochen 7 Stunden 1 Minute"
gantt.ext.formatters.durationFormatter({
format: ["week", "hour", "minute"],
store:"minute",
short: true }).format(10021); // "4wk 7h 1min"
Hier ist ein Beispiel für eine vollständige 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 bietet folgende Methoden:
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));
// 3 days
const formatter = gantt.ext.formatters.durationFormatter();
console.log(formatter.parse("1 day"));
// 8
Für weitere Details, siehe die durationFormatter-Methode im Artikel Arbeitszeiterfassung.
Die Methode gantt.ext.formatters.linkFormatter(config) erstellt eine neue LinkFormatter-Instanz. Sie teilt einige Methoden und Konfigurationsoptionen mit dem Dauer-Formatter.
Beispiele:
So richten Sie einen Link-Formatter mit Standardeinstellungen ein:
const formatter = gantt.ext.formatters.linkFormatter();
// erstellt eine Instanz des Formatter-Objekts mit der Fabrikmethode
gantt.ext.formatters.linkFormatter()
.format({id:1, type:"1", source: 1, target: 2, lag: 5});
// "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});
// "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});
// "1SS+5 days"
const formatter = gantt.ext.formatters.linkFormatter();
formatter.parse("1SS+5 days");
// {id:1, type:"1", source: 1, target: null, lag: 5}
Der LinkFormatter unterstützt zwei Linkformate:
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 Verzögerung oder Vorlauf werden im kurzen Format formatiert, während andere Linktypen das vollständige Format verwenden. Ebenso, wenn nur der WBS-Code an die parse-Methode übergeben wird, nimmt der Formatter einen Finish-to-Start-Typ mit null Verzögerung an.
Für weitere Details zur linkFormatter-Methode, siehe den Artikel Inline-Bearbeitung im Raster.
Gantt ermöglicht es, benutzerdefinierte Formatter basierend auf den vorhandenen zu erstellen. Diese benutzerdefinierten Formatter können dem Inline-Editor hinzugefügt werden. Intern speichert Gantt die Daten in seinem Standardformat, aber wenn der Inline-Editor geöffnet wird, zeigt er den Wert im gewünschten Format an.
Benutzerdefinierte Formatter sind Objekte, die zwei Funktionen enthalten: format() und parse().
So sehen benutzerdefinierte Formatter aus:
const customDurationFormatter = {
format: function (duration) {
let formattedDuration;
// Logik, um eine Zahl in das gewünschte Format umzuwandeln
return formattedDuration;
},
parse: function (formattedValue) {
let duration;
// Logik, um das gewünschte Format zurück in eine Zahl umzuwandeln
return duration;
}
};
const customLinkFormatter = {
format: function (link) {
let formattedLink;
// Logik, um ein Linkobjekt in das gewünschte Format umzuwandeln
return formattedLink;
},
parse: function (formattedValue) {
let link;
// Logik, um das gewünschte Format zurück in ein Linkobjekt umzuwandeln
return link;
}
};
Vorhandene Formatter können auch in benutzerdefinierte Formatter integriert werden, wobei deren Ausgabe bei Bedarf modifiziert wird.
Um benutzerdefinierte Formatter Inline-Editoren zuzuweisen, ist der Vorgang derselbe wie bei Standard-Formatter. Zum Beispiel:
const durationEditor = {
type: "duration", map_to: "duration", formatter: customDurationFormatter
};
Hier ist ein Beispiel, wie benutzerdefinierte Dauer- und Link-Formatter implementiert werden können:
Related sample: Benutzerdefinierte Dauer- und Link-Formatter
Die Standardkonfiguration des Dauer-Formatters unterstützt nur eine Pluralform für Substantive, was für Englisch gut funktioniert, da die Pluralbildung normalerweise das Hinzufügen eines Suffixes oder die Veränderung des Substantivs beinhaltet.
Andere Sprachen können jedoch mehrere Pluralformen mit unterschiedlichen Regeln für deren Verwendung haben. Um dies zu adressieren, kann ein benutzerdefinierter Formatter erstellt werden, um die geeigneten Regeln für eine bestimmte Sprache zu definieren. Zum Beispiel, hier ist, wie benutzerdefinierte Pluralisierungsregeln für Japanisch angewendet werden können:
Zurück nach oben