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

时间:2015-12-16 23:50:23

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

我需要编写自定义过滤功能。我有一个包含多个列的kendo网格,即名称,年龄,城市。名称列应为多选。现在,在过滤时,整个网格上的逻辑应该是"和"但该特定列(名称)应具有"或"逻辑。

我已经看到了这个post和其他几个类似的帖子。在此示例中,telerik建议删除data-bind属性

element.removeAttr("data-bind");

这非常有效,直到我想清除multiselect字段中的所有标记。仅供参考,网格配置为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. 遵循此forum post,此代码似乎非常简单:

    operator:function(item,value){     //实现你的逻辑 }

  3. 除非它没有记录好,我不确定参数' item'和'价值'是来自哪里。

1 个答案:

答案 0 :(得分:0)

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

  1. 在multiselect对象的dom元素中添加了id属性,如下所示
  2. 
    
     function getteamplate(args) {
        args.element[0].id = "<<filterElementID>>";
        args.element.kendoMultiSelect({
                    dataSource: args.dataSource,
                    .............
    &#13;
    &#13;
    &#13;

    1. 在网格的dataSource dataBound事件中添加了一个检查,以便每当dataSource过滤器不包含&#34; MultiSelect&#34; filter(filter.field = name) 清除dom元素的值
    2. &#13;
      &#13;
      if(!_.find(this.dataSource.filter() ? this.dataSource.filter().filters : [] , 
                      function(filter){
                          return filter.field == "name"
                      }))
                  $("#<<filterElementID>>").data().kendoMultiSelect.value([]);
      &#13;
      &#13;
      &#13;