DevExpress GridView - 单元格/列的自定义过滤器功能

Question

如何为列或单元格定义自定义过滤器功能？举个例子，假设我们有一个文本值，并且在标题中有一个搜索输入

如何告诉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 中实现这种自定义过滤吗？看起来很简单，但我为此苦苦挣扎了好几个小时。提前谢谢你。

Answer 1

此示例显示如何使用过滤器面板过滤数据。您可以使用它的复选框来启用/禁用当前过滤器表达式，然后单击此表达式会打开集成的过滤器构建器。请注意，其中所做的更改会反映在过滤器行和标题过滤器中，反之亦然，来自 (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 - How to implement a custom filter for a date field）： 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/