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

问题描述

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

如何告诉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",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",5000],10000]]
                },{
                    
                    text: "$10000 - $20000",10000],20000]]
                },{                    
                    text: "Greater than $20000",20000]
                }]
            }
        },{
            dataField: "Employee",dataType: "string"
        },{
            caption: "City",dataField: "CustomerInfo.StoreCity",{
            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/