ngGrid Çok Sütun Filtreleme

Bazı sayfalanmış verileri göstermek için AngularJS için ngGrid modülünü kullanıyorum. Ancak, bir VEYA arama kullanarak birden fazla sütun arasında arama yapabilmek istiyorum.ngGrid Çok Sütun Filtreleme

Aşağıdaki başlıklara sahip bir sütunum var: Id, Name, Description. Aradığımda, tüm satırları İK OR ismi VEYA açıklamasının arama terimi içerdiği yere döndürmek istiyorum.

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

Ancak bu bir cevap veriyor:

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

ben gibi özel bir filtre tanımlamak için $ scope.filterText bağlı bir harici giriş kutusunu kullanarak da varsayılan arama kutusunu kullanarak ve denedi VE tüm sütunlarda. NgGrid modülünü kullanarak istediğimi elde etmek mümkün mü? peşin

sayesinde

Chris

kaynak

2013-05-30 Chris Haines

Ben AngularJS için yeni, ama johnlindquist/eggheadio/www.egghead.io tarafından tüm vidoes gitti ve sanırım bu [ngfilter] (http://www.egghead.io/video/bLohP9mh8ks) video cevap soru. Farklı arama filtrelerini nasıl 3: 00'a kadar kullanabileceğinizi açıklamaya başlar; Tüm sütunlarda arama ile başladı ve ardından belirli sütunlara taşınıyor. – Pixic

Bu tartışma size yardımcı olabilir. [Sütun başına ızgara ızgarası filtresi] (https://groups.google.com/forum/#!topic/angular/aC24cVln4Vw) – darwinbaisa

Evet, ızgara yapılandırmasında dahili filtreleme seçeneğiyle filtrelemeyi sütunlar aracılığıyla uygulayabilirsiniz . Yakında – orif

Evet bu bir OR filtre yapmak mümkün, ama onların filterOptions.filterText kullanılarak yapılabilir nasıl göremiyorum ng-ızgara kaynak kodunda arama yaptıktan sonra. Bu sadece AND filtreleme yapabilir.

çözüm Ben de bunun somut örnekler bulundu filterOptions.useExternalFilter:true

kullanmak sonra olurdu, ama biraz o etrafında oynadıktan sonra, ben filtre gerçekten gridOptions.data yeniden oluşturarak yapılır fikrini aldık nesne | dizisi. Bu filtre için yalnızca olumsuz bir durumdur.

Plunker code is here

Yani temelde kodunuzu bu index.html gibi görünecektir

<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>

Ve controller.js yılında:

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

sadece var temel filtreleme (u Daha iyi eşleme için regex ve/veya küçük harfe dönüştürün). Ayrıca, hem ad hem de yaş boşsa, adı '' olacak şekilde ayarladığımı ve ardından her öğenin filtrenin içinde gerçekte geri döneceğini (tüm veri kümesi geri dönüşü ile sonuçlanacağını) unutmayın.

Bu seçenek çok daha uygun dinamik veri kümesi (okuma - sunucu beslenen) için, ama böylesi daha iyi ama orijinal veri kümesi kopyalayan ve üzerinde filtreler uygulayarak çalışır.

kaynak

2013-08-24 17:19:59

+1 cevabı ile plunker'ı kullanacağım, benim için çalıştım! –

ngGrid Çok Sütun Filtreleme

cevap

İlgili konular