如何为列或单元格定义自定义过滤函数?举个例子,假设我们有一个文本值,并且标题中有一个搜索输入
如何告诉gridview调用函数
class FooComponent {
protected doSomeFilter (value: string, searchQuery: string) {
if (someConditions(value, searchQuery)) {
return true;
}
return false;
}
}
我希望像这样使用它:
<dxi-column
dataField="myFooProperty"
[(customFilter)]='doSomeFilter'
></dxi-column>
但是GridView不支持
customFilter
方法,并且没有类似的东西。你知道如何在 devexpress 中实现这样的自定义过滤吗?看起来很简单,但我为此苦苦挣扎了好几个小时。预先感谢您。
此示例展示了如何使用过滤器面板过滤数据。您可以使用其复选框来启用/禁用当前过滤器表达式,然后单击该表达式将打开集成过滤器构建器。请注意,其中所做的更改会反映在过滤器行和标题过滤器中,反之亦然,来自(https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/FilterPanel/jQuery/Light/),请看这个:
$("#gridContainer").dxDataGrid({
dataSource: orders,
columnsAutoWidth: true,
filterRow: { visible: true },
filterPanel: { visible: true },
headerFilter: { visible: true },
filterValue: [["Employee", "=", "Clark Morgan"], "and", ["OrderDate", "weekends"]],
filterBuilder: {
customOperations: [{
name: "weekends",
caption: "Weekends",
dataTypes: ["date"],
icon: "check",
hasValue: false,
calculateFilterExpression: function() {
return [[getOrderDay, "=", 0], "or", [getOrderDay, "=", 6]];
}
}]
},
filterBuilderPopup: {
position: { of: window, at: "top", my: "top", offset: { y: 10 } },
},
scrolling: { mode: "infinite" },
showBorders: true,
columns: [{
caption: "Invoice Number",
dataField: "OrderNumber",
dataType: "number",
headerFilter: {
groupInterval: 10000
}
}, {
dataField: "OrderDate",
dataType: "date"
}, {
dataField: "SaleAmount",
dataType: "number",
format: "currency",
editorOptions: {
format: "currency",
showClearButton: true
},
headerFilter: {
dataSource: [ {
text: "Less than $3000",
value: ["SaleAmount", "<", 3000]
}, {
text: "$3000 - $5000",
value: [["SaleAmount", ">=", 3000], ["SaleAmount", "<", 5000]]
}, {
text: "$5000 - $10000",
value: [["SaleAmount", ">=", 5000], ["SaleAmount", "<", 10000]]
}, {
text: "$10000 - $20000",
value: [["SaleAmount", ">=", 10000], ["SaleAmount", "<", 20000]]
}, {
text: "Greater than $20000",
value: ["SaleAmount", ">=", 20000]
}]
}
}, {
dataField: "Employee",
dataType: "string"
}, {
caption: "City",
dataField: "CustomerInfo.StoreCity",
dataType: "string"
}, {
caption: "State",
dataField: "CustomerInfo.StoreState",
dataType: "string"
}]
});
另请参阅:https://jsfiddle.net/mx1ovwp1/7/
$("#gridContainer").dxDataGrid({
dataSource: employees,
filterRow: {
visible: true,
applyFilter: "auto"
},
groupPanel:{
visible: true
},
searchPanel: {
visible: true,
width: 240,
placeholder: "Search..."
},
headerFilter: {
visible: true
},
paging: {
enabled: false
},
editing: {
mode: "form",
allowUpdating: true
},
columns: [
{
dataField: "Prefix",
caption: "Title",
width: 70
},
"FirstName",
"LastName", {
dataField: "Position",
width: 170
}, {
dataField: "StateID",
caption: "State",
width: 125,
lookup: {
dataSource: states,
displayExpr: "Name",
valueExpr: "ID"
}
}, {
dataField: "BirthDate",
dataType: "date"
}
]
});
另请参阅此链接(dxDataGrid - 如何为日期字段实现自定义过滤器): https://supportcenter.devexpress.com/ticket/details/t490195/dxdatagrid-how-to-implement-a-custom-filter-for-a-date-field
有关 DevExtreme 的演示,请参阅: https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Filtering/jQuery/Light/