具有多选列的剑道网格自定义过滤功能

Custom filter function for Kendo Grid with multiselect column

本文关键字:网格 自定义 过滤 功能      更新时间:2023-09-26

我需要编写一个自定义过滤函数。我有一个剑道网格,有多个列,即姓名、年龄、城市。名称列应该是多选的。现在,在进行筛选时,整个网格上的逻辑应该是"and",但特定列(名称)应该有一个"or"逻辑。

我看过这篇文章和其他几篇类似的文章。在这个例子中,telerik建议删除数据绑定属性

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

值得注意的几件事

  1. 我的自定义过滤器函数似乎从未执行过,因为我在控制台中看不到任何内容
  2. 在这个论坛帖子之后,这个代码看起来非常直接:

    运算符:函数(项,值){//实现你的逻辑}

只是它没有很好地记录下来,我不确定参数"item"answers"value"是什么,或者它们来自哪里。

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

  1. 向multiselect对象的dom元素添加了一个id属性,如下所示

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

  1. 在网格的dataSource dataBound事件中添加了一个检查,这样只要dataSource筛选器不包含"多选"筛选器(filter.field=name)清除dom元素的值

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