Question

如何在Kendo UI Grid上显示任何应用的过滤条件。我希望对应用标准进行只读显示。当前功能允许用户应用过滤器，但用户必须转到过滤器菜单才能查找过滤器详细信息。

Answer 1

Kendo UI数据源没有过滤器事件，因此您需要自己实现。然后，当触发事件时，您可以获取当前过滤器并以您希望的任何方式对其进行格式化。

例如：

var grid = $("#grid").kendoGrid(...);

// override the original filter method in the grid's data source
grid.dataSource.originalFilter = grid.dataSource.filter;
grid.dataSource.filter = function () {
    var result = grid.dataSource.originalFilter.apply(this, arguments);
    if (arguments.length > 0) {
        this.trigger("afterfilter", arguments);
    }

    return result;
}

// bind to your filter event
grid.dataSource.bind("afterfilter", function () {
    var currentFilter = this.filter(); // get current filter

    // create HTML representation of the filter (this implementation works only for simple cases)
    var filterHtml = "";
    currentFilter.filters.forEach(function (filter, index) {
        filterHtml += "Field: " + filter.field + "<br/>" +
            "Operator: " + filter.operator + "<br/>" +
            "Value: " + filter.value + "<br/><br/>";

        if (currentFilter.filters.length > 1 && index !== currentFilter.filters.length - 1) {
            filterHtml += "Logic: " + currentFilter.logic + "<br/><br/>";
        }
    });

    // display it somewhere
    $("#filter").html(filterHtml);
});

请参阅demo here。

请注意，过滤器可以嵌套，因此一旦发生这种情况，此示例代码就不够了 - 您必须将过滤器转换为HTML递归的代码。

为了使用“afterfilter”事件扩充所有数据源，您必须更改DataSource原型而不是在实例上更改它：

kendo.data.DataSource.fn.originalFilter = kendo.data.DataSource.fn.filter;
kendo.data.DataSource.fn.filter = function () {
    var result = this.originalFilter.apply(this, arguments);
    if (arguments.length > 0) {
        this.trigger("afterfilter", arguments);
    }

    return result;
}

如果要将整个事物集成到所有网格小部件中，您可以创建一个新方法filtersToHtml，它可以获取HTML表示并将其添加到kendo.data.DataSource.fn，如上所示（或者您可以{来自剑道网格的{3}};以同样的方式，您可以将方法displayFilters添加到kendo.ui.Grid.fn（网格原型），该方法在DOM元素中显示此HTML表示，其中您可以将选择器传递给窗口小部件（最终可以还在网格小部件中创建此元素。然后，您可以调用displayFilters而不是在过滤方法中触发“afterfilter”。

考虑到始终显示过滤器的完整实现的复杂性，我建议扩展Kendo网格，而不是简单地修改原始代码。这将有助于保持这种可维护性并为其提供一些结构。

Answer 2

如何组合两个网格过滤器。这样，用户就可以在文本框中看到所选的过滤器，甚至可以通过点击过滤列文本框上的“x”按钮将其删除。

你可以通过像这样设置网格过滤来实现这个目的

filterable: {
        mode: "menu, row"
    }

文档和示例位于here

我想在Kendo UI Grid上显示应用的过滤条件

2 个答案: