web-dev-qa-db-ja.com

Angular UI-Grid：すべてをクリアする方法（一般Angularおよび組み込みのUI-Grid）ボタンをクリックしたときの列フィルター

どうすればclearANDrefreshALL of my（general Angularおよび組み込みのUI-Grid）ボタンクリックでフィルターしますか？

背景：UI-Gridを使用し、 組み込みのフィルタリング機能 を利用するアプリケーションを構築しました。また、角度で書かれたクロスカラム検索もあります。

現在の戦闘ボタンを1回クリックするだけでフィルターをクリアして更新できるようにしたい。これまでのところ、これをクロスカラム検索に実装することはできましたが、notはビルドに実装することに成功していません-列フィルター内（皮肉なことに、これは簡単な部分だと思いました！）。

問題について行われた調査：

1）UI-Gridチュートリアルで検索...失敗

2）提供された I-Grid API ...部分的な成功を確認しました！ 「clearAllFilters」関数（ ここにソースコード ）で探しているものが見つかったと思うようですが、手順3でそれを実装する方法がわかりません...

3）実装のデモ/例/ヘルプ/ヒント/何かのためにグーグルが狂ったように！？ ...不合格

4）スタックオーバーフローについて助けを求めた:)

前もって感謝します。

angularjsfilteringangular-ui-grid
9
laurenOlga

申し訳ありませんが、UIグリッドのclearAllFilters（）関数が表示されませんでした。だからそれはより簡単になります。あなたはこれを行うことができます：

  $scope.clearFilters = function() {
            $scope.myGridApi.grid.clearAllFilters();
        };
17
hic1086

あなたはこれを行うことができます：

//グリッドAPIを取得します

$scope.myGridOptions.onRegisterApi = function(gridApi) {
  $scope.myGridApi=gridApi;
}

この関数をクリアボタンにバインドする必要があります：

        $scope.clearFilters = function() {
            var columns = $scope.myGridApi.grid.columns;
                for (var i = 0; i < columns.length; i++) {
                    if (columns[i].enableFiltering) {
                        columns[i].filters[0].term='';
                    }
                }
            };
5
hic1086

これを試してください：

$scope.gridApi.core.clearAllFilters();

$ scope.gridApiは、私のui-grid要素の初期設定からのものでした

 $scope.gridOptions = {
        flatEntityAccess: true,
        paginationPageSizes: [10, 25, 50, 75, 100],
        paginationPageSize: 25,
        enableFiltering: true,
        enableColumnResizing: true,
        enableGridMenu: true,
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;
        },
        columnDefs: [{
3
Dobi

これは簡単な方法だと思います（グリッドデータを元の/実際のjsonデータに置き換えるだけです）。ボタンをクリックするだけで、下のclearFilters関数を作成して呼び出すことができます。

$scope.clearFilters = function() {
        $scope.yourGridOptions.data = $scope.originalData;
    }
0
user6158393