我想在 Kendo UI Grid 上显示应用的过滤条件 [英] I want to display the applied filter criteria on the Kendo UI Grid

问题描述

如何在 Kendo UI 网格上显示任何应用的过滤条件.我想要一个应用标准的只读显示.当前功能确实允许用户应用过滤器，但用户必须转到过滤器菜单才能查找过滤器详细信息.

How can I display any applied filter criteria on the Kendo UI Grid. I would like to have a readonly display, of the applied criteria. Current functionality does allow user to apply filter, but that the user has to go to the filter menu to look for the filter details.

推荐答案

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

The Kendo UI data source doesn't have a filter event, so you'd need to implement that yourself. Then when the event is triggered, you can get the current filter and format it in whatever way you want it displayed.

例如:

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);
});

请参阅此处的演示.

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

Note that filters can be nested, so once that happens, this example code won't be enough - you'll have to make the code that converts the filters to HTML recursive.

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

In order to augment all data sources with the "afterfilter" event, you have to change the DataSource protototype instead of changing it on your instance:

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 如上所示(或者您可以创建您自己的小部件，源自 Kendo 的网格)；以同样的方式，您可以将方法 displayFilters 添加到 kendo.ui.Grid.fn(网格原型)，该方法在 DOM 元素中显示此 HTML 表示，其选择器您可以将选项传递给您的小部件(您最终也可以在网格小部件中创建此元素).然后，您可以调用 displayFilters 而不是在 filter 方法中触发afterfilter".

If you want to integrate the whole thing into all grid widgets, you could create a new method filtersToHtml which gets you the HTML represenatation and add it to kendo.data.DataSource.fn like demonstrated above (or you could create your own widget derived from Kendo's grid); in the same way you could add a method displayFilters to kendo.ui.Grid.fn (the grid prototype) which displays this HTML representation in a DOM element whose selector you could pass in with the options to your widget (you could ultimately also create this element within the grid widget). Then instead of triggering "afterfilter" in the filter method, you could call displayFilters instead.

考虑到始终显示过滤器的完整实现的复杂性，我建议扩展 Kendo 网格而不是简单地修改原始代码.这将有助于使其更易于维护并赋予其一些结构.

Considering the complexity of the complete implementation which always displays filters, I'd suggest extending the Kendo grid instead of simply modifying the original code. This will help keep this more maintainable and gives it a bit of structure.

这篇关于我想在 Kendo UI Grid 上显示应用的过滤条件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！