AngularJsng-grid 필터 -- 필터텍스트 형식

AngularJsng-grid 필터 -- 필터텍스트 형식

Angular를 사용하고 있습니다.Jsong-grid( v2.0.7 v2.0.8)와 필터의 구문을 이해하고 싶습니다.API의 텍스트 필드입니다.

특히 특정 열 또는 열을 필터링하는 방법과 열에 있는 하나 이상의 항목을 필터링하는 방법을 알고 싶습니다.

태그 ng-grid 및 필터를 사용하는 스택 오버플로 질문이 많습니다. 유용하지만 필터에 대한 전체 요약을 제공하는 질문입니다.텍스트 형식을 현재 사용할 수 없습니다.

이 글을 쓸 당시 '필터'를 구성하는 방법에 대한 요약은 없습니다.일반적으로 텍스트 문자열입니다.ng-grid.js 코드를 공부하고 몇 가지 추측을 한 후에 'filter'라는 것을 발견했습니다.텍스트'는 현재 문서가 제시하는 것보다 훨씬 강력하고 표현력이 뛰어납니다.

예제 설정

답을 설정하려면 먼저 일부 컨트롤러에 다음과 같은 정의가 있는 그리드를 고려합니다.

  $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 개체일 수 있습니다.샘플 테이블은 다음과 같습니다.

현 상태에서 필터텍스트가 비어 있으므로 모든 레코드가 표시됩니다.

showFilter가 참이기 때문에 그리드 오른쪽 위에 있는 아래쪽 당근이 보입니다.아래쪽 당근을 클릭하면 변수 '필터'에 바인딩된 입력이 표시됩니다.Text'(텍스트). 이 토론의 경우 이 드롭다운을 사용하여 몇 가지 결과를 보여주겠지만 일반적으로 필터에 직접 할당할 수 있습니다.컨트롤러 코드에 텍스트를 입력합니다.드롭다운은 다음과 같습니다.

그리드에서 모든 필드 검색

기본적으로 필터텍스트는 그리드의 모든 셀에 대해 정규 분포를 실행합니다.문자 'a'를 입력하면 해당 레코드의 모든 항목(또는 열)에 문자 'a'가 있는 모든 레코드가 선택됩니다.'ab'을 입력하면 해당 레코드의 모든 항목에 'ab' 문자 시퀀스가 있는 모든 레코드가 선택됩니다.요구 사항에 따라 이 동작이 완벽하게 적합할 수 있습니다.그러나 대규모 데이터 세트의 경우 데이터의 특성(예: 가격 표시기 선택)과 전체 그리드를 검색하는 데 드는 높은 비용 때문에 일반적으로 전체 그리드가 아닌 열을 기준으로 필터링하기를 원합니다.

열로 검색

한 열에서만 문자열 또는 정규식을 검색하려면 필터를 사용합니다.텍스트 구문:

filterText = '<displayName>:<literal>'

예를 들어.

여기서 displayName 'Date'(필드 값 사용 안 함, displayName을 사용해야 함)는 콜론 ':' 다음에 부분 문자열이 이어집니다.결과적으로 10월 30일과 관련된 3개의 기록만 선택됩니다.

검색 범위를 확대해 보겠습니다.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>|..][;..]'

연산 어휘 요소는 각 열 표시 이름을 구분하는 세미콜론 ';'입니다.

이 예를 계속해서 10월 30일 또는 10월 31일에 nyt 또는 nvda를 검색해 보겠습니다.다음과 같습니다.

논리적으로 필터는 (nyt Ornvda의 경우 Ticker를 따라) AND (10-30 또는 10-31의 경우 날짜를 따라)를 검색합니다.

그리드 업데이트

저는 셀 편집에서 나오는 업데이트에 대해 잘 알지 못합니다.저는 결과가 같다고 생각합니다.

백엔드와 함께 작동하는 angular-js 컨트롤러가 그리드 데이터를 업데이트하면 업데이트된 데이터가 필터를 통해 푸시됩니다.이는 아름다운 결과이며, 실제로 필터가 지속됩니다.

알려진 버그 -- 지우기

이 글을 쓰는 시점에 필터를 지우는 알려진 버그에 대한 최근 수정 사항이 있습니다.브라우저에 거의 또는 실제로 걸려 있는 텍스트입니다.제가 팔로우한 보고서는 ng-grid issue 777입니다. ng-grid issue 848 이후 수정사항이 병합되었습니다.대용량 데이터셋에 적용된 필터를 클리어하면 성능이 떨어지는 것을 확실히 확인할 수 있습니다.저는 아직 수리 테스트를 해보지 않았습니다.

갱신하다

방금 ng-grid 2.0.8을 설치하기 시작했습니다.명확한 문제는 고정된 결함입니다.잘 되네요.

---

ng-grid 3.0

ng-grid 3.0은 현재 도면에 나와 있습니다.ng-grid 2.0에는 이미 매우 많은 장점이 있지만, 실제로 새로워진 다른 코드와 마찬가지로 몇 개의 재작성이 도움이 됩니다.저는 ng-grid 개발자들이 이미 포함된 필터 기능을 유지하고 성능이나 범위를 확장할 것을 권장합니다.

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

언급URL : https://stackoverflow.com/questions/20434088/angularjs-ng-grid-filter-filtertext-format