时间戳

首页 > 解决方案 > Kendo UI Grid - 动态添加/删除过滤器

javascript - Kendo UI Grid - 动态添加/删除过滤器

问题描述

我需要创建一个剑道 ui 网格。由于这有很多过滤器，我需要有 4 个常规过滤器，其余的应该能够根据用户的选择动态添加。有人可以提供帮助吗？

标签： javascriptc#kendo-uikendo-grid

解决方案

为了按文本框过滤，您可以连接一个keyUp事件以检索值。然后，您可以将其作为过滤器添加到现有filter对象。

$('#NameOfInput').keyup(function () {
    var val = $('#NameOfInput').val();
    var grid = $("#yourGrid").data("kendoGrid");
    var filter = grid.dataSource.filter();
    filter.filters.push({
        field: "NameOfFieldYouWishToFilter",
        operator: "eq",
        value: val,
        FilterName: "UniqueIdentifierForFilter"
    });
    grid.dataSource.filter(filter);
});

使用下拉框，您可以通过使用onChange事件来实现所需的功能，使用 获取值$('#yourDropDown').val();。

如果您需要额外的逻辑来添加/删除过滤器，则这FilterName是可选的。即，您可以使用它来确定过滤器是否已经存在于数组中，如果存在，您可以使用splice它来删除它。

编辑

使用FilterName您可以搜索以查看过滤器是否已存在并将其删除：

var filterIndex = filter.filters.map((e: any) => { return e.FilterName }).indexOf("UniqueIdentifierForFilter");
if (filterIndex > -1)
{
    filter.filters.splice(filterIndex, 1);
}

推荐阅读