1

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

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

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

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

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

4

1 回答 1

0

感谢Sandman为我提供了指向他的问题的链接，该链接与我的问题非常相似，并且他能够找到解决方案。我已经稍微改变了他的解决方案，以便它对我有用。原始解决方案。

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-16T16:37:15.350 回答