ngGrid多列过滤

Question

ngGrid多列过滤

Chr*_*nes 18 javascript angularjs ng-grid

我正在使用AngularJS的ngGrid模块来显示一些分页数据.我希望能够搜索多个列,但是使用OR搜索.

假设我有一个包含以下标题的列:Id,Name,Description.当我搜索时,我想返回Id或名称或描述包含搜索词的所有行.

    $scope.pagingOptions = {
        pageSizes: [20, 50, 100],
        pageSize: 20,
        totalServerItems: 0,
        currentPage: 1
    };

    $scope.gridOptions =
        {
            data: 'myData',
            columnDefs: [
                { field: 'id', displayName: 'Id' },
                { field: 'name', displayName: 'Name' },
                { field: 'description', displayName: 'Description' },
                { displayName: 'Actions', cellTemplate: '<input type="button" data-ng-click="doSomething(row.entity)" value="Do Something" />'}],
            enablePaging: true,
            showFooter: true,
            showFilter: true,
            pagingOptions: $scope.pagingOptions,
            filterOptions: {
                filterText: "",
                useExternalFilter: false
            }
        };

Run Code Online (Sandbox Code Playgroud)

我尝试使用默认搜索框,并使用绑定到$ scope.filterText的外部输入框来定义自定义过滤器,例如:

$scope.filterUpdated = function () {
    $scope.gridOptions.filterOptions.filterText = 'id:' + $scope.filterText + ';name:' + $scope.filterText + ';description:' + $scope.filterText;
};

Run Code Online (Sandbox Code Playgroud)

然而,这似乎在所有列上都做了一个AND.是否有可能使用ngGrid模块实现我想要的？

提前致谢,

克里斯

Answer 1

Gil*_*leg 8

是的,可以进行OR过滤,但是在使用ng-grid源代码搜索后,我看不出如何使用它们来完成filterOptions.filterText.那只能进行AND过滤.

然后可以使用该解决方案 filterOptions.useExternalFilter:true

我也没有找到它的例子,但是经过一段时间的讨论后,我得到的结论是过滤器实际上是通过重新创建gridOptions.data对象来完成的.这是此过滤器的唯一缺点.

Plunker代码在这里

所以基本上你的代码看起来像这个index.html:

<body ng-controller="MyCtrl">
  <strong>Filter Name:</strong> </string><input type="text" ng-model="filterName"/>
  </br>
  OR
  </br>
  <strong>Filter Age:</strong> </string><input type="text" ng-model="filterAge"/>
  </br>
  <button ng-click="activateFilter()">Run Filter</button>
  <br/>
  <br/>
  <div class="gridStyle" ng-grid="gridOptions"></div>
</body>

Run Code Online (Sandbox Code Playgroud)

在你的controller.js中:

app.controller('MyCtrl', function($scope) {

$scope.filterOptions = {
  filterText: '',
  useExternalFilter: true
};

$scope.activateFilter = function() {
  var name = $scope.filterName || null;
  var age = ($scope.filterAge) ? $scope.filterAge.toString() : null;
  if (!name && !age) name='';

  $scope.myData = angular.copy($scope.originalDataSet, []);
  $scope.myData = $scope.myData.filter( function(item) {
    return (item.name.indexOf(name)>-1 || item.age.toString().indexOf(age) > -1);
  });
 };

 $scope.originalDataSet = [{name: "Moroni", age: 50},
               {name: "Tiancum", age: 43},
               {name: "Jacob", age: 27},
               {name: "Nephi", age: 29},
               {name: "Enos", age: 34}];

 $scope.myData = angular.copy($scope.originalDataSet, []);

 $scope.gridOptions = {
  data: 'myData',
  filterOptions:  $scope.filterOptions
 };
});

Run Code Online (Sandbox Code Playgroud)

这只是基本过滤(使用正则表达式和/或转换为小写以获得更好的匹配).另请注意,如果name和age都为空,我将name设置为'',然后每个元素将在过滤器内返回true(导致整个数据集返回).

此选项更适合动态数据集(读取 - 服务器馈送),但它也可以正常工作,但复制原始数据集并在其上应用过滤器.

归档时间：	12 年，9 月前
查看次数：	17323 次
最近记录：	12 年，6 月前