具有多选列的 Kendo Grid 自定义过滤器功能答案

【问题标题】：Custom filter function for Kendo Grid with multiselect column具有多选列的 Kendo Grid 自定义过滤器功能
【发布时间】：2015-12-16 23:50:23
【问题描述】：

我需要编写一个自定义过滤函数。我有一个包含多列的剑道网格，即姓名、年龄、城市。名称列应该是多选的。现在，在过滤时，整个网格上的逻辑应该是“和”，但特定列（名称）应该有一个“或”逻辑。

我看过这个post 和其他几个类似的帖子。在这个例子中，telerik 建议删除 data-bind 属性

element.removeAttr("data-bind");

这非常有效，直到我想清除多选字段中的所有标签。仅供参考，网格配置为 filterMode: "row"。在这种情况下，标签根本不会清除。

所以现在，我在这里尝试编写一个自定义过滤器函数。这是我目前所拥有的：

filterable: {
    multi: true,
    cell: {
        template: function getteamplate(args) {
            args.element.kendoMultiSelect({
                dataSource: args.dataSource,
                dataTextField: "name",
                dataValueField: "name",
                change: function change(e) {
                    var dataSource = $scope.grid.dataSource;

                    // if filters are not yet set, do so now
                    if (!dataSource.filter()) {
                         $scope.grid.dataSource.filter({
                             logic: "and",
                             filters: []
                         });
                    }

                    var dataFilters = dataSource.filter().filters;

                    var values = this.value();
                    if (values.length > 0) {
                        $log.log("filtering");
                        var newFilter = {
                            field: "name",
                            operator: function operator(item, value) {
                                $log.log("Item: " + item);
                                $log.log(value());
                                var found = false;

                                value().forEach(function forEach(element) {
                                    $log.log("Value: " + element);
                                    if (item.indexOf(element) !== -1) {
                                       found = true;
                                    }
                                });
                                return found;
                            },
                            value: values,
                            fieldName: "dataSource"
                        };

                        dataFilters.push(newFilter);
                        $log.log(dataFilters);
                    }

                    dataSource.filter({
                        logic: "and",
                        filters: dataFilters
                    });
                }
            });

            //args.element.removeAttr("data-bind");
        },

        showOperators: false
    }
}

有几点值得注意

我的自定义筛选功能似乎从未执行，因为我在控制台中看不到任何内容。
按照这个forum post，这段代码看起来非常简单：

运算符：函数（项目，值）{ //实现你的逻辑 }

除非它没有很好地记录，而且我不确定参数 'item' 和 'value' 是什么或它们来自哪里。

【问题讨论】：

标签： javascript angularjs telerik kendo-grid kendo-multiselect

【解决方案1】：

有点晚了，但没关系。为了正确清除标签，我添加了以下内容

为多选对象的dom元素添加id属性如下

 function getteamplate(args) {
    args.element[0].id = "<<filterElementID>>";
    args.element.kendoMultiSelect({
                dataSource: args.dataSource,
                .............

在网格的 dataSource dataBound 事件中添加了一个检查，这样只要 dataSource 过滤器不包含“MultiSelect”过滤器（filter.field = name）清除dom元素的值

if(!_.find(this.dataSource.filter() ? this.dataSource.filter().filters : [] , 
                function(filter){
                    return filter.field == "name"
                }))
            $("#<<filterElementID>>").data().kendoMultiSelect.value([]);

【讨论】：