使用搜索栏和下拉列表筛选 Kendo ListView

Question

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

我在仅使用搜索栏或仅使用下拉菜单时过滤没有问题，但我运行遇到问题试图弄清楚如何能够同时使用所有三个来过滤数据.

例如，我希望能够在搜索中输入内容并让它过滤搜索词。然后根据显示的结果，我希望能够使用任一下拉菜单过滤这些结果。

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

要进行测试，请在搜索栏中输入 "test"。您会注意到它会筛选出一个结果。现在展开 "Product Type" 下拉列表和 select "Type 1"。请注意它随后如何显示该类型的所有产品？它应该不会显示任何结果，因为我只想在当前过滤器之上应用该过滤器。

Answer 1

感谢Sandman for providing me with a link to his question which was very similar to mine and which he was able to find a solution for. I have changed his solution a little bit so that it would work for me. 。

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() 函数，过滤效果很好。

使用搜索栏和下拉列表筛选 Kendo ListView

Filter Kendo ListView with search bar and dropdowns

jquery

kendo-ui

kendo-listview