web-dev-qa-db-ja.com

ngGrid複数列フィルタリング

AngularJSのngGridモジュールを使用して、ページングされたデータを表示しています。複数の列を検索できるようにしたいのですが、OR検索を使用します。

次の見出しの列があるとします：ID、名前、説明。検索するときに、Id OR name OR descriptionに検索語が含まれているすべての行を返します。

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

デフォルトの検索ボックスを使用し、$ scope.filterTextにバインドされた外部入力ボックスを使用して、次のようなカスタムフィルターを定義しようとしました。

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

ただし、これはすべての列でANDを実行するようです。 ngGridモジュールを使用して私が望むことを達成することは可能ですか？

前もって感謝します、

クリス

javascriptangularjsng-grid
18
Chris Haines

はい、ORフィルターを実行することは可能ですが、ng-gridソースコードを検索した後、filterOptions.filterTextを使用してどのように実行できるかわかりません。フィルタリングのみ。

解決策は、filterOptions.useExternalFilter:trueを使用することです。

例も見つかりませんでしたが、少し試してみると、実際にはgridOptions.dataオブジェクト|配列を再作成することでフィルターが実行されていることがわかりました。 それがこのフィルターの唯一の欠点です。

プランカーコードはこちら

したがって、基本的にコードは次のようになります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>

そしてあなたの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
 };
});

これは単なる基本的なフィルタリングです（より適切なマッチングのために正規表現を使用するか、小文字に変換します）。また、名前と年齢の両方が空の場合、名前を ''に設定すると、すべての要素がフィルター内でtrueを返します（データセット全体が返されます）。

このオプションは、dynamicデータセット（read --server fed）にはるかに適していますが、同様に、元のデータセットを複製し、それにフィルターを適用します。

8
Gilad Peleg