具有行过滤器行为的 AngularJS Kendo UI 网格答案

【问题标题】：AngularJS Kendo UI grid with row filters behaviour具有行过滤器行为的 AngularJS Kendo UI 网格
【发布时间】：2015-08-04 03:50:35
【问题描述】：

我正在使用带有行过滤器的 Kendo UI Grid。我正面临过滤器选项问题。我正在使用 Filterbale.cell.template 过滤器来显示剑道自动完成。问题如图像中显示的那样，自动完成选项在选择其中一个过滤器时未更新。

下面是我的html

 <div ng-controller="VehiclesController" class="my-grid" >

  <kendo-grid options="vehiclesGridOption">
  </kendo-grid>
</div>

下面是我的控制器

 $scope.vehiclesGridOption = {
      dataSource: {
        schema: {
          id: "_id",
          model: {
            fields: {
              make: {type: "string"},
              model: {type: "string"},
              year: {type: "number"}
            }
          }
        },
        transport: {
          read: function (e) {

            vehicleService.vehicles().then(function (response) {
              e.success(response);
              console.log(response.length);
            }).then(function () {

              console.log("error happened");

            })

          }
        },
        pageSize: 12,
        pageSizes: false,
      },
      sortable: {
        mode: "multiple",
        allowUnsort: true
      },
      filterable: {
        mode: "row"
      },
      pageable: {
        buttonCount: 5
      },
      columns: [
        {
          title: "",
          template: '',
          width: "3%" // ACTS AS SPACER
        },
        {
          field: "make",
          title: "Make",
          filterable: {
            cell: {
              operator: "contains",
              template: function (args) {
                args.element.kendoAutoComplete({
                  dataSource: args.dataSource,
                  dataTextField: "make",
                  dataValueField: "make",
                  valuePrimitive: true,
                  placeholder: "Make",
                });
              }
            }
          },

          width: "29%",
        }, {
          field: "model",
          filterable: {
            cell: {
              operator: "contains",
              template: function (args) {
                console.log(args);
                args.element.kendoAutoComplete({

                  dataSource: args.dataSource,
                  dataTextField: "model",
                  dataValueField: "model",
                  valuePrimitive: true,
                  placeholder: "Model",
                });
              }
            }
          },
          title: "Model",
          width: "29%",
        }, {
          field: "year",
          title: "Year",
          filterable: {
            cell: {
              template: function (args) {
                args.element.kendoAutoComplete({
                  dataSource: args.dataSource,
                  dataTextField: "year",
                  dataValueField: "year",
                  placeholder: "Year",
                  suggest: true,
                  ignoreCase: true,
                  filter: "gte"
                });
              }
            }
          },
          width: "29%",
        },
        {
          field: "",
          title: "Edit",
          template: '<a class=\"k-link text-center grid-edit-btn vehicle-grid-edit-btn\" ui-sref="vehicleDetails({\'id\': \'#=_id #\' })"><span class=\"icon-editpencil icon-grid\"></span></a>',
          width: "10%",
        }],

    };

如果用户在第一列过滤器中选择制造，则以下是问题，然后模型过滤器应仅显示选定的制造模型，如 Honda (make)-> Accord、Civic ..etc 但它显示所有唯一值，而与模型过滤器..

【问题讨论】：

标签： angularjs kendo-ui kendo-grid

【解决方案1】：

Kendo 过滤器行使用来自网格组件的相同数据源，只是提供唯一值。由于自动完成组件在网格数据源为空时初始化，因此它们始终显示所有值。您可以根据当前过滤器行值手动过滤。

首先，为您的对应自动完成组件添加 id，即在模板函数内部：

args.element.attr('id', 'make'); 
//<...> 
args.element.attr('id', 'model'); 
//<...> 
args.element.attr('id', 'year');

然后将数据绑定事件添加到网格（因为自动完成组件不会在过滤器被清除时触发更改事件）。

$scope.vehiclesGridOption = {
    //...
    dataBound : function(e) {
        setTimeout(function() { //timeout is to make sure value() is already updated
            var make = $('#make').data('kendoAutoComplete').value();
            if (make) {
                $('#model').data('kendoAutoComplete').dataSource.filter({field: 'make', operator: 'eq', value: make });
            } else {
                $('#model').data('kendoAutoComplete').dataSource.filter({});
            }
        });
    }
}

或者，如果您还想按“年份”列进行过滤，可以这样：

$scope.vehiclesGridOption = {
    //...
    dataBound: function(e) {
        setTimeout(function() { //timeout is to make sure value() is already updated
            var make = $('#make').data('kendoAutoComplete').value();
            var model = $('#model').data('kendoAutoComplete').value();
            if (make) {
                $('#model').data('kendoAutoComplete').dataSource.filter({field: 'make', operator: 'eq', value: make });
            } else {
                $('#model').data('kendoAutoComplete').dataSource.filter({});
            }

            var yearFilter = {filters: [], logic: 'and'};
            if (make) {
                yearFilter.filters.push({field: 'make', operator: 'eq', value: make });
            }
            if (model) {
                yearFilter.filters.push({field: 'model', operator: 'eq', value: model });
            }
            $('#year').data('kendoAutoComplete').dataSource.filter(yearFilter.filters.length ? yearFilter : null);

        });
    }
}

【讨论】：