Question

我的工具栏中有一个包含三个多选控件的网格，用于根据所做的选择过滤网格数据源。

目前，我有以下功能，在任何多选控件的change事件期间触发。此函数接受values，其中包含已更改的多选控件中的所选项目以及filterID，即在过滤期间使用的field名称。

function applyClientFilters(values, filterID) {
var grid = $("#grid").data("kendoGrid");
var gridDataSource = grid.dataSource;
var filter = gridDataSource.filter();
// does the selected drop down contain a value
// if yes, then apply this filter to the necessary drop down
// otherwise remove the filter
if (values.length > 0) {
    // has a filter been setup yet on the datasource?
    if (filter && filter.filters.length > 0) {            
        // firstly check to see if filter has already been applied and if so remove
        for (var i = 0; i < filter.filters.length; ++i) {
            // check to see if filter field already exists i.e. analyte has already been filtered
            // and check to see if the value at this field already exists as a filtered item
            if (filter.filters[i].field === filterID && values.indexOf(filter.filters[i].value) > -1) {
                filter.filters.splice(i, 1);
            }
        }
        // apply new filter(s)
        for (var i = 0; i < values.length; ++i) {
            filter.filters.push({ field: filterID, operator: "eq", value: parseInt(values[i]) });
        }
        gridDataSource.query({
            filter: filter,
            pageSize: 10,
            page: 1,
            group: [{
                field: "InstrumentName",
                dir: "asc"
            }, {
                field: "AnalyteName",
                dir: "asc"
            }, {
                field: "MethodName",
                dir: "asc"
            }]
        });
    }
    else {
        // apply new filter
        gridDataSource.filter({
            logic: "or",
            filters: [
              {
                  field: filterID,
                  operator: "eq",
                  value: parseInt(values),
              }
            ]
        });
    }

} else {
    if (filter && filter.filters.length > 0) {
        // remove existing filter 
        for (var i = 0; i < filter.filters.length; ++i) {
            if (filter.filters[i].field === filterID) {
                filter.filters.splice(i, 1);
            }
        }
        gridDataSource.query({
            filter: filter,
            pageSize: 10,
            page: 1,
            group: [{
                field: "InstrumentName",
                dir: "asc"
            }, {
                field: "AnalyteName",
                dir: "asc"
            }, {
                field: "MethodName",
                dir: "asc"
            }]
        });
    }
}
}

当使用单个多选项选择进行过滤时，仅使用or逻辑，即选择多个方法将按预期过滤它们。但是，当在不同的多选控件中使用时，逻辑需要为and。

示例

选择'分析物A' - ＆gt;过滤网格数据源以仅显示“分析物A”
选择'方法A' - ＆gt;过滤网格数据源以显示“分析物A”和“方法A”
选择'方法B' - ＆gt;过滤网格数据源以显示'分析物A'和'方法A'或'方法B'

是否可以将过滤逻辑运算符与Kendo数据源过滤相结合以实现上述场景？

Answer 1

我提出了一个大大简化过滤的解决方案。我没有添加/删除/更新过滤器，而是在任何多选组件的change事件期间清除数据源过滤器，根据每个多选中的选定项确定要应用哪些过滤器并构建一个根据选择过滤对象，如：

function applyClientFilters() {
var grid = $("#reportGrid").data("kendoGrid");
var gridDataSource = grid.dataSource;    
// clear existing datasource
gridDataSource.filter([]);
// extract selected items from each of the three multiselect controls
var selectedAnalytes = $("#analyte").data("kendoMultiSelect").value();
var selectedMethods = $("#method").data("kendoMultiSelect").value();
var selectedInstruments = $("#instrument").data("kendoMultiSelect").value();
// setup filter object (using and logic)
var filter = {
    logic: "and",
    filters: [] // ready for filter from each of the three multiselect controls
};
// loop over each of the three extracted selected items variables
// push new filter into array of filters with or logic on each filter
if (selectedAnalytes.length > 0) {
    var analyteFilter = {
        logic: "or",
        filters: [] // ready for filter for each of the selected analytes
    };

    for (var i = 0; i < selectedAnalytes.length; ++i) {
        analyteFilter.filters.push( { field: "AnalyteID", operator: "eq", value: parseInt(selectedAnalytes[i]) } )
    }
    filter.filters.push(analyteFilter);
}
if (selectedMethods.length > 0) {
    var methodFilter = {
        logic: "or",
        filters: [] // ready for filter for each of the selected methods
    };

    for (var i = 0; i < selectedMethods.length; ++i) {
        methodFilter.filters.push({ field: "MethodID", operator: "eq", value: parseInt(selectedMethods[i]) })
    }
    filter.filters.push(methodFilter);
}
if (selectedInstruments.length > 0) {
    var instrumentFilter = {
        logic: "or",
        filters: [] // ready for filter for each of the selected instruments
    };

    for (var i = 0; i < selectedInstruments.length; ++i) {
        instrumentFilter.filters.push({ field: "InstrumentID", operator: "eq", value: parseInt(selectedInstruments[i]) })
    }
    filter.filters.push(instrumentFilter);
}
// apply filter query to datasource
gridDataSource.query({
    filter: filter,
    pageSize: 10,
    page: 1,
    group: [{
        field: "InstrumentName",
        dir: "asc"
    }, {
        field: "AnalyteName",
        dir: "asc"
    }, {
        field: "MethodName",
        dir: "asc"
    }]
});
}

具有多选下拉菜单的自定义过滤

1 个答案: