AngularJS ng-grid filter - filterText格式

Question

我正在使用AngularJS ng-grid（ v2.0.7 v2.0.8），我想了解API中filterText字段的語法。

特別是我想知道如何過濾特定列或列，並過濾列中的一個或多個條目。

標簽ng-grid和filter有很多堆棧溢出問題，雖然它們很有用，但是目前還沒有提供filterText格式的完整摘要。

Answer 1

在撰寫本文時，沒有總結如何構造'filterText'字符串的摘要。 在研究了ng-grid.js代碼並做了一些猜測之后，我發現'filterText'比當前文檔建議的更強大和更具表現力。

示例設置

要設置答案，首先要考慮位於某個控制器中的具有以下定義的網格：

  $scope.pricing_data = data['records'];

  $scope.gridOptions = { 
    data: 'pricing_data',
    columnDefs: [
      { field: 'ticker', displayName: 'Ticker' },
      { field: 'date',   displayName: 'Date'   },
      { field: 'close',  displayName: 'Close'  },
      { field: 'volume', displayName: 'Volume' }
    ],
    filterOptions: {filterText: '', useExternalFilter: false},
    showFilter: true
  };

data ['records']中的對象可以是從后端發送的一些json對象。 示例表可能如下所示：

就目前而言，filterText是空白的，因此會顯示所有記錄。

由於showFilter為true，因此可以看到網格右上角的向下胡蘿卜。 單擊向下胡蘿卜會顯示綁定到變量“filterText”的輸入。 對於此討論，我將使用此下拉列表顯示一些結果，但通常您可以直接在控制器代碼中分配filterText。 下拉列表如下所示：

搜索網格中的所有字段

默認情況下，filterText對網格中的每個單元格執行正則表達式。 鍵入字符“a”將選擇該記錄的任何條目（或列）中具有字符“a”的所有記錄。 鍵入“ab”將選擇該記錄的任何條目中具有字符序列“ab”的所有記錄。 根據您的要求，此行為可能非常適合。 但是，對於大型數據集，由於數據的性質（例如選擇價格代碼）以及搜索整個網格的高成本，人們通常希望過濾列而不是整個網格。

按列搜索

為了在一列上搜索字符串或正則表達式，filterText語法為：

filterText = '<displayName>:<literal>'

例如，

這里displayName'Date'（不要使用字段值，你必須使用displayName）后跟一個冒號'：'然后是一個部分字符串。 結果是只選擇了三個記錄，與10月30日相關的記錄。

讓我們擴大搜索范圍。 要搜索10月30日或 10月31日，語法是

filterText = '<displayName>:<literal 1>|<literal 2>|...'

管道'|' 將每個字符串分開。 你可以隨心所欲地連在一起。 多日期過濾器可能如下所示：

顯然，選擇本質上是OR 。 然而，我的例子不是很好，因為代碼和日期有不相交的字符。 所以你可以相信我只搜索Date列或設置你自己的例子。 （或者，更好的是，閱讀ng-grid中的buildSearchConditions（）函數，它非常清楚）。

搜索多列中的條目

搜索多個列只需要在列中進行搜索的語法擴展。 這個語法是：

filterText = '<displayName 1>:<lit 1>[|<lit 2>|..];<displayName 2>:<lit a>[|<lit b>|..][;..]'

有效的詞匯元素是分號';' 用於分隔每列displayName。

繼續這個例子，讓我們在10月30日或10月31日搜索nyt或nvda。 看起來像：

從邏輯上講，過濾器搜索（沿着Ticker for nyt OR nvda ） AND （沿着日期10-30 或 10-31 ）。

網格更新

我不太熟悉來自單元格編輯的更新。 我想結果是一樣的。

當angular-js控制器與后端一起工作時，更新網格數據，然后通過過濾器推送更新的數據。 這是一個美麗的結果，實際上過濾器仍然存在。

已知錯誤 - 清除

在撰寫本文時，最近修復了一個已知錯誤，其中幾乎清除了filterText或者確實掛起了瀏覽器。 我所遵循的報告就是這個： ng-grid issue 777 。 在ng-grid issue 848之后合並了一個修復程序。 我可以確定，當清除應用於大型數據集的過濾器時，我發現性能很差。 我還沒有測試過修復程序。

UPDATE

我剛剛開始安裝ng-grid 2.0.8。 明確的問題是固定的。 效果很好。

---

ng-grid 3.0

ng-grid 3.0現在正在繪圖板上。 ng-grid 2.0已經有了很多優點，但是像任何真正新的代碼一樣，一些重寫有幫助。 我鼓勵ng-grid開發人員保留他們已經包含的過濾器功能，並可能擴展性能或范圍。

Answer 2

根據JayInNyc的回答，我做了一些事情，使用戶更容易使用而不是遵循該語法。 我基本上會看到我想要過濾的任何字段。 在這種情況下，我有一個名稱和城市的輸入字段。

$scope.filterOptions = {
    filterText: ''
};
$scope.filterName = '';
$scope.filterCity = '';

$scope.$watch('filterName', function (value) {

    setFilterText();
});

$scope.$watch('filterCity', function (value) {

    setFilterText();
});

function setFilterText()
{
    $scope.filterOptions.filterText = 'Name: ' + $scope.filterName + ';City:' + $scope.filterCity;
}

順便說一句 - 我想使用編譯功能，但它似乎沒有用。 我有以下但它沒有工作。

filterOptions.filterText = $compile('Name:{{filterName}};Category:{{filterCategory}}')(scope);