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

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 原型(prototype)，而不是在您的实例上更改它:

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就像上面演示的那样(或者你可以 create your own widget来自剑道的网格)；以同样的方式添加方法 displayFilters至 kendo.ui.Grid.fn (网格原型(prototype))在 DOM 元素中显示此 HTML 表示，您可以将其选择器与选项一起传递给您的小部件(您最终也可以在网格小部件中创建此元素)。然后，您可以调用 displayFilters，而不是在 filter 方法中触发“afterfilter”。反而。

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