我想在Kendo UI网格上显示已应用的过滤条件 [英] 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中(或者您可以

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网格上显示已应用的过滤条件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！