Devextreme предоставляет множество функций. Одним из них является настройка значения фильтра заголовков в devextreme, которое применяется к столбцам.
Иногда нам нужно применить наши собственные данные для фильтров. Здесь я объясню, как добавить наши собственные пользовательские данные в фильтр заголовков столбцов. На изображении ниже показано значение фильтра по умолчанию в devextreme.
Здесь, на изображении ниже, я применил пользовательский фильтр в столбце размера.
Раздел кода:
Column[
...
...
...
{
dataField: "displaySize",
caption: "Size",
width: 200,
visibleIndex: 3,
allowFiltering: true,
calculateFilterExpression:calculateFilterExpression
headerFilter: {
dataSource: setDynamicDataSoruceFilterValues()
}
},
]
compareFilterSizeValae(value) в этой функции я буду сравнивать значение с lessThen, GreatThan или равным в соответствии с выбранными пользователем значениями из всплывающего окна фильтра. Внутри этой функции я назвал эту функцию getFileSizeBytes(). Эта функция вычисляет данные о размере в соответствии с КБ, МБ и ГБ и возвращает вычисленные данные независимо от типа размера, заданного пользователем. выбирает.
setDynamicDataSoruceFilterValues():- Эта функция создает динамический источник данных для значения фильтра и текста, который будет отображаться во всплывающем окне поиска фильтра, показанном на втором изображении. Я установил значение в тексте, например
‹ 100 КБ,
›= 100 КБ ‹ 1 МБ,
›= 1 МБ ‹ 100 МБ,
›= 100 МБ ‹ 1 ГБ,
› 1 ГБ и применить ту же логику для фильтрации.
var filterValues = ["100KB", "1MB", "10MB", "100MB", "1GB"];
function getFileSizeBytes(rowData) {
if (rowData.displaySize) {
var displaySizeInNumber = parseInt(rowData.displaySize);
let sizeType = rowData.displaySize.toUpperCase();
if (sizeType.endsWith("KB"))
return displaySizeInNumber * 1024;
else if (sizeType.endsWith("MB"))
return displaySizeInNumber * 1024 * 1024;
else if (sizeType.endsWith("GB"))
return displaySizeInNumber * 1024 * 1024 * 1024;
else
return displaySizeInNumber;
}
if (rowData.displaySize)
return (parseInt(rowData.displaySize));
else
return -1;
}
function calculateFilterExpression(value, selectedFilterOperations, target) {
debugger;
if (target === "headerFilter") {
let valueArray = value.split('-');
let operationType = "Between";
var displaySizeInNumber = 0;
let value1 = 0, value2 = 0;
if (valueArray.length == 1) {
operationType = value.startsWith('=", value1], "and", [getFileSizeBytes, "<", value2]];
}
else if (operationType == "LessThan") {
return [[getFileSizeBytes, "=", 0], "or", [getFileSizeBytes, "<", displaySizeInNumber]];
}
else {
return [getFileSizeBytes, ">=", displaySizeInNumber];
}
}
return this.defaultCalculateFilterExpression.apply(this, arguments);
}
function convertValueToBytes(value) {
let parsedValue = parseInt(value);
let sizeType = value.toUpperCase();
if (sizeType.endsWith("KB"))
return parsedValue * 1024;
else if (sizeType.endsWith("MB"))
return parsedValue * 1024 * 1024;
else if (sizeType.endsWith("GB"))
return parsedValue * 1024 * 1024 * 1024;
else
return parsedValue;
}
function setDynamicDataSoruceFilterValues() {
var sizeHeaderFilterDataSource = [
{
key: 1,
text: "< 100 KB",
value: "<100KB"
}
];
for (i = 0; i < filterValues.length - 1; i++) {
var dataSourceValue = {
key: i + 2,
text: ">=" + filterValues[i] + " < " + filterValues[i + 1],
value: filterValues[i] + "-" + filterValues[i + 1] };
sizeHeaderFilterDataSource.push(dataSourceValue);
if (i === 3) {
var lastIndexFilterValue = {
key: 6,
text: "> 1 GB",
value: ">1GB"
}
sizeHeaderFilterDataSource.push(lastIndexFilterValue);
}
}
return sizeHeaderFilterDataSource;
}
Webner Solutions — компания по разработке программного обеспечения, специализирующаяся на разработке систем управления страховыми агентствами, систем управления обучением и приложений Salesforce. Свяжитесь с нами по адресу [email protected] для подачи заявок на страхование, электронное обучение и Salesforce.
Первоначально опубликовано на https://blog.webnersolutions.com 15 ноября 2021 г.
