我试图根据用户偏好更改货币格式,并从localStorage获取值。根据此链接https://docs.telerik.com/kendo-ui/knowledge-base/show-different-currencies-in-the-grid,我向kendo列模板引入了一个函数,该模板在Kendo列函数(函数getDefaultColumns)之外声明。
我的问题:用field: 'INVOICE_AMOUNT_ORIGINAL',
编写的模板
具有调用customCurrencyFormat的函数,但该函数未得到调用,因为在Visual Studio代码中,我可以看到警告“声明函数但未使用”。还有什么可能会使此功能到达列中的模板,或者做错了什么。
我正在尝试做的事情:我正在根据用户的喜好从本地存储中获取随机货币格式,我希望根据此更改网格列。 (所有货币格式:欧元,英镑,美元...) 任何其他方法也应受到赞赏
这是文件
// eslint-disable-next-line
import kendo from 'kendo';
import { GetLocalColumns } from './invoiceLocalColumns';
/**
* @typedef {{instant: (v: string) => string}} Translate
* @typedef {{isUsUser: () => boolean}} Authentication
* @typedef {{field_label?: string; field?: string; hidden: boolean; width: number}} Column
*
* The field is used to find column details for kendo
* The column order is specified as an array of fields
*/
/**
* @param {Translate} $translate
* @returns {Column[]}
*/
function getDefaultColumns($translate, dateUserPreference) {
return [
{
field: 'CURRENCY_CODE',
title: $translate.instant('currencyCode'),
headerTemplate: '{{ \'currencyCode\' | translate }}',
width: 150
},
{
field: 'INVOICE_AMOUNT_ORIGINAL',
title: $translate.instant('invoiceAmount'),
template: '#= customCurrencyFormat(dataItem.INVOICE_AMOUNT_ORIGINAL)#',
headerTemplate: '{{ \'invAmount\' | translate }}',
attributes: {
style: 'text-align: right;'
},
width: 115
},
];
}
function customCurrencyFormat(currencyValue) {
// eslint-disable-next-line prefer-template
const curr = "'" + this.localStorage.countryWithCurrency.countrySymbol + "###.##'";
return kendo.toString(currencyValue, curr);
}
class ColumnCustomizer {
constructor($translate, $localStorage) {
const culture = kendo.culture();
console.log(culture.name);
this.localStorage = $localStorage;
this.defaultColumns = getDefaultColumns(
$translate,
$localStorage.dateFormat,
$localStorage.countryWithCurrency.countrySymbol);
}
/**
* @param {string} locale
* @param {'collection' | 'forecast'} type the view type
* @returns {Column[]}
*/
GetColumns(locale, type) {
const columnNameList = GetLocalColumns(locale, type);
const columnMap = this.defaultColumns.reduce((res, col) => {
if (col) {
const label = col.field_label || col.field;
if (res[label]) {
throw Error(`column ${label} declared twice`);
}
res[label] = col;
}
return res;
}, {});
// now the column configuration in the specified order
const res = columnNameList.map((field) => {
const col = columnMap[field];
if (!col) {
throw Error(`missing configuration for column ${field}`);
}
return col;
});
return res;
}
}
module.exports = {
ColumnCustomizer,
};