Available only in PRO Edition
此功能仅在 PRO 版本中可用。
gantt.ext.formatters 扩展提供了两种格式化数值的方式:
您也可以通过现有格式化器创建自定义格式化器。
gantt.ext.formatters.durationFormatter(config) 方法用于创建新的 DurationFormatter 实例。
示例:
使用默认设置创建一个持续时间格式化器:
const formatter = gantt.ext.formatters.durationFormatter();
// 通过工厂方法创建格式化器实例
formatter.parse("1"); // 如果 enter:"day"(默认),解析为 1 天
formatter.parse("1"); // 如果 enter:"hour",解析为 1 小时
formatter.parse("1 day"); // 如果 store:"hour",存储为 8
formatter.parse("1 day"); // 如果 store:"minute",存储为 480
gantt.ext.formatters.durationFormatter({
format: ["hour", "minute"], store:"minute"
}).format(260); // 输出 "4 hours 20 minutes"
gantt.ext.formatters.durationFormatter({
format: "hour", store:"minute"
}).format(260);// 输出 "4.33 hours"
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"
完整配置示例:
const formatter = gantt.ext.formatters.durationFormatter({
// 默认值
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"
}
}
});
DurationFormatter 实例提供以下方法:
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
关于 durationFormatter 的更多细节可参见 工作时间计算 文章。
gantt.ext.formatters.linkFormatter(config) 方法用于创建新的 LinkFormatter 实例。它与持续时间格式化器共享部分方法和配置。
示例:
使用默认设置创建一个链接格式化器:
const formatter = gantt.ext.formatters.linkFormatter();
// 通过工厂方法创建格式化器实例
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({
// 默认值
durationFormatter: gantt.ext.formatters.durationFormatter(),
labels: {
finish_to_start: "FS",
start_to_start: "SS",
finish_to_finish: "FF",
start_to_finish: "SF"
}
});
LinkFormatter 实例提供以下方法:
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}
LinkFormatter 支持两种链接格式:
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
没有任何时差的“完成-开始”链接将以简短格式显示,其他类型的链接则使用完整格式。同样,如果仅向parse方法提供任务的 WBS 代码,格式化器会默认其为零时差的“完成-开始”类型。
关于linkFormatter方法的更多细节,请参见 在网格中进行内联编辑 文章。
Gantt 工具允许您基于内置格式化器创建自定义格式化器。您可以将这些自定义格式化器添加到内联编辑器中。在内部,Gantt 会以其预期的格式保存数据,但当用户打开内联编辑器时,会以首选格式显示该值。
自定义格式化器是包含两个函数的对象:format() 和 parse()。
format() 函数将数字(针对自定义持续时间格式化器)或链接(针对自定义链接格式化器)转换为期望的显示值。parse() 函数则把格式化后的值转换回数字或链接对象。
自定义格式化器通常如下所示:
const customDurationFormatter = {
format: function (duration) {
let formattedDuration;
// 代码:将数字转换为期望的值
return formattedDuration;
},
parse: function (formattedValue) {
let duration;
// 代码:将期望的值转换为数字
return duration;
}
};
const customLinkFormatter = {
format: function (link) {
let formattedLink;
// 代码:将链接对象转换为期望的值
return formattedLink;
},
parse: function (formattedValue) {
let link;
// 代码:将期望的值转换为`link`对象
return link
}
};
您可以在自定义格式化器中使用现有的格式化器,并根据需要调整它们的输出。
将自定义格式化器分配给内联编辑器的方式与默认格式化器相同。例如:
const durationEditor = {
type: "duration", map_to: "duration", formatter: customDurationFormatter
};
下面是一个自定义持续时间和链接格式化器的示例:
Related sample: Custom duration and link formatters
默认的 Duration Formatter 设计用于处理英语的复数形式,通常只需添加后缀或稍作词形变化。
其他语言往往有多种复数形式,并且使用规则各不相同。为此,您可以创建一个自定义格式化器,以应用适合您语言的规则。以下示例展示了如何为日语实现这些规则:
Related sample: Custom duration formatter with different plural values for Japanese locale
Back to top