ngGrid Lọc nhiều cột

Tôi đang sử dụng mô-đun ngGrid cho AngularJS để hiển thị một số dữ liệu được phân trang. Tôi muốn có thể tìm kiếm trên nhiều cột, tuy nhiên bằng cách sử dụng tìm kiếm OR.ngGrid Lọc nhiều cột

Cho phép nói rằng tôi có một cột có các tiêu đề sau: Id, Tên, Mô tả. Khi tôi tìm kiếm, tôi muốn trả về tất cả các hàng có tên hoặc tên hoặc mô tả OR chứa cụm từ tìm kiếm.

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

Tôi đã thử bằng cách sử dụng hộp tìm kiếm mặc định, và cũng có thể sử dụng một hộp đầu vào bên ngoài liên kết với $ scope.filterText để xác định một bộ lọc tùy chỉnh như:

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

Tuy nhiên điều này dường như làm một VÀ trên tất cả các cột. Có thể đạt được những gì tôi muốn bằng cách sử dụng mô-đun ngGrid?

Cảm ơn trước,

Chris

Nguồn

2013-05-30 Chris Haines

Tôi mới sử dụng AngularJS, nhưng đã trải qua tất cả các vidoes bởi johnlindquist/eggheadio/www.egghead.io và tôi đoán video này [ngfilter] (http://www.egghead.io/video/bLohP9mh8ks) trả lời câu hỏi của bạn câu hỏi. Anh ấy bắt đầu giải thích cách bạn có thể sử dụng bộ lọc tìm kiếm khác nhau khoảng 3:00; bắt đầu với tìm kiếm trên tất cả các cột và sau đó chuyển đến các cột cụ thể. – Pixic

Có thể thảo luận này sẽ giúp bạn. [bộ lọc lưới ng trên mỗi cột] (https://groups.google.com/forum/#!topic/angular/aC24cVln4Vw) – darwinbaisa

Có, bạn có thể triển khai lọc qua các cột với sự trợ giúp của tùy chọn lọc nội bộ trong cấu hình lưới . Tôi sẽ nhanh chóng đưa nó đến với câu trả lời – orif

Có nó có thể làm một HOẶC lọc, nhưng sau khi tìm kiếm trong mã nguồn ng-lưới tôi không thể nhìn thấy nó như thế nào có thể được thực hiện bằng filterOptions.filterText của họ. Điều đó chỉ có thể thực hiện và lọc.

Các giải pháp sẽ là sau đó sử dụng filterOptions.useExternalFilter:true

Tôi cũng không tìm thấy ví dụ về nó, nhưng sau khi chơi xung quanh với điều đó cho một chút, tôi có quan điểm cho rằng bộ lọc thực sự thực hiện bằng cách tái tạo gridOptions.data mảng. Đó là nhược điểm duy nhất của bộ lọc này.

Plunker code is here

Vì vậy, về cơ bản mã của bạn sẽ trông như thế index.html này:

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

Và trong controller.js bạn:

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

Đó chỉ lọc cơ bản (u se regex và/hoặc chuyển đổi sang chữ thường để phù hợp hơn). Cũng lưu ý rằng nếu cả tên và tuổi đều trống, tôi đặt tên là '' và sau đó mọi phần tử sẽ trả về true bên trong bộ lọc (dẫn đến toàn bộ tập dữ liệu trả về).

Tùy chọn này là tốt hơn phù hợp với động bộ dữ liệu (đọc - máy chủ cho ăn), nhưng nó hoạt động giống như tốt nhưng sao chép các tập dữ liệu ban đầu và áp dụng các bộ lọc vào nó.

Nguồn

2013-08-24 17:19:59

+1, đã làm việc cho tôi! –

Trả lời

Các vấn đề liên quan