使用搜索栏和下拉列表过滤器Kendo ListView

我的页面上有一个Kendo ListView，我希望能够使用自定义搜索栏和两个Kendo DropDownLists以允许用户过滤ListView。使用搜索栏和下拉列表过滤器Kendo ListView

我，而只是用搜索栏或只使用下拉菜单，但我遇到了问题，试图找出如何能够过滤使用所有这三个在同一时间的数据没有问题的过滤。

例如，我希望能够到的东西输入到搜索，并把它过滤搜索词。然后显示结果，我希望能够通过使用下拉列表来筛选这些结果。

我已经有了一个完整的例子在这里：https://codepen.io/anon/pen/eRpoag

对其进行测试，输入到搜索栏中的“测试”。你会注意到它过滤到一个结果。现在展开“产品类型”下拉菜单并选择“类型1”。注意它是如何显示所有这种类型的产品？它应该显示没有结果，因为我只想在当前的过滤器上应用该过滤器。

2017-06-08 Quiver

我想筛选使用多个多选择下拉菜单网格和管理使用的答案来解决的时候碰到了类似的问题。 [检查出来]（https://stackoverflow.com/questions/43780495/custom-filtering-with-multi-select-drop-downs）看看是否有帮助。 :) – Sandman

当您使用退格键和其他键删除过滤器时，您的文本框不会触发过滤器。我无法完整地查看代码，但是，我建议您将逻辑压缩为一个过滤器方法，并传入网格或数据源，并让所有更改事件处理程序调用一个过滤器函数，以检查所有字段并构建过滤器并将其应用于数据源。 –

我给你读了最后一段，并按照你的指示。您正在处理所有事件，但是，您的产品下拉事件不会查找名称上是否存在过滤器。您必须在一个功能中同时处理两个或全部三个过滤器，才能按照您的喜好进行工作。 –

感谢Sandman为我提供一个链接到他的问题，这是非常类似地雷，而他能够找到一个解决方案。我已经改变了他的解决方案，以便它对我有用。 Original Solution。

function applyClientFilters() { 
    var listView = $("#ProductsList").data("kendoListView"); 
    var listViewDataSource = listView.dataSource; 
    // clear existing datasource 
    listViewDataSource.filter([]); 
    // extract selected items from each of the dropdown controls and the search box 
    var productType = $("#ProductTypeDropDown").data("kendoDropDownList").value(); 
    var therapeuticClass = $("#TherapeuticClassDropDown").data("kendoDropDownList").value(); 
    var searchString = $(".search-filter").val(); 
    // setup filter object (using and logic) 
    var filter = { 
     logic: "and", 
     filters: [] // ready for filter from each of the dropdowns and search bar 
    }; 
    // push new filter into array of filters with or logic on each filter 
    if (productType.length > 0) { 
     var productTypeFilter = { 
      logic: "or", 
      filters: [ 
       { field: "ProductTypeId", operator: "equals", value: productType } 
      ] 
     }; 
     filter.filters.push(productTypeFilter); 
    } 


    if (therapeuticClass.length > 0) { 
     var therapeuticClassFilter = { 
      logic: "or", 
      filters: [ 
       { 
        field: "TherapeuticClasses", 
        operator: function (itemValue, value) { 
         return itemValue && 
          itemValue.find(function (item) { 
           if (item.Name.toLowerCase().indexOf(value.toLowerCase()) !== -1) { 
            return true; 
           } else { 
            return false; 
           } 
          }); 
        }, 
        value: therapeuticClass 
       } 
      ] 
     }; 
     filter.filters.push(therapeuticClassFilter); 
    } 

    if (searchString.length > 0) { 
     var searchFilter = { 
      logic: "or", 
      filters: [ 
       { field: "Name", operator: "startswith", value: searchString }, 
       { field: "ProductTypeDisplay", operator: "startswith", value: searchString }, 
       { field: "NdcCode", operator: "startswith", value: searchString }, 
       { 
        field: "TherapeuticClasses", 
        operator: function(itemValue, value) { 
         return itemValue && 
          itemValue.find(function(item) { 
           // If a therapeutic class name matches search then return true 
           if (item.Name.toLowerCase().indexOf(value.toLowerCase()) !== -1) { 
            return true; 
           } else { 
            return false; 
           } 
          }); 
        }, 
        value: searchString 
       } 
      ] 
     }; 
     filter.filters.push(searchFilter); 
    } 

    // apply filter query to datasource 
    listViewDataSource.query({ 
     filter: filter 
    }); 
}

然后我打电话applyClientFilters()功能在每个下拉菜单和搜索框的变化情况和过滤的伟大工程。

来源

2017-06-16 16:37:15 Quiver

使用搜索栏和下拉列表过滤器Kendo ListView

回答

相关问题