0

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

目前，我有以下功能，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”-> 过滤网格数据源以仅显示“分析物 A”
  • 选择“方法 A”-> 过滤网格数据源以显示“分析物 A”和“方法 A”
  • 选择“方法 B”-> 过滤网格数据源以显示“分析物 A”和“方法 A”或“方法 B”

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

4

1 回答 1

0

我想出了一个大大简化过滤的解决方案。我没有添加/删除/更新过滤器，而是在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"
    }]
});
}
于 2017-05-04T14:39:49.250 回答