具有多选下拉列表的自定义过滤

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

目前，我有以下函数，在任何多选控件的change事件期间触发。 此函数接受包含更改的多选控件中的所选项的values和filterID ， 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  -1) { filter.filters.splice(i, 1); } } // apply new filter(s) for (var i = 0; i  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逻辑，即选择多个方法将按预期过滤它们。 但是，逻辑需要在不同的多选控件中使用。

例

• 选择“分析物A” – >过滤网格数据源以仅显示“分析物A”
• 选择“方法A” – >过滤网格数据源以显示“分析物A” 和 “方法A”
• 选择“方法B” – >过滤网格数据源以显示“分析物A” 和 “方法A” 或 “方法B”

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

Answer 1

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

 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" }] }); }