고급 그리드 및 트리 그리드의 정렬, 검색 및 필터링
그리드 데이터의 정렬, 검색 및 필터링은 단일 Filter 이벤트 및 QueryFilter 매개 변수가 있는 표준 플랫폼 질의 서비스를 통해 처리할 수 있습니다. Filter 이벤트가 트리거될 때 그리드 데이터를 정렬, 검색 또는 필터링할 경우 QueryFilter 매개 변수는 반환된 데이터가 지정된 모든 조건을 충족하는지 확인합니다.
다음과 같은 방법으로 정렬, 검색 및 필터링을 위해 데이터를 질의할 수 있습니다.
• 데이터를 포함하는 데이터 테이블을 설정하고 표준 플랫폼 QueryDataTableEntries API를 사용하여 액세스합니다.
• 데이터 서비스를 통해 데이터를 동적으로 생성하는 경우 인포테이블 질의 함수를 사용하여 인포테이블에서 데이터를 정렬하고 검색합니다.
질의 매개 변수에 대한 자세한 내용은 ThingWorx 도움말 센터의 질의 서비스에 대한 질의 매개 변수 단원을 참조하십시오.
정렬 구현
1. EnableSorting 속성을 Mashup Builder의 속성 패널에서 클릭하거나 동적 구성 서비스의 JSON 스크립트에서 정의하여 true로 설정합니다. QueryFilter 속성 및 Filter 이벤트가 속성 패널에 나타납니다.
2. QueryFilter 속성을 정렬할 데이터가 있는 query 입력 매개 변수에 바인딩합니다.
◦ 데이터가 테이블에 있는 경우 QueryFilter를 QueryDataTableEntries 서비스의 query 매개 변수에 바인딩합니다.
◦ 데이터 서비스를 통해 데이터를 생성 중인 경우 QueryFilter를 데이터 서비스의 queryFilter 매개 변수에 바인딩합니다.
3. 정렬이 시작될 때 트리거되는 서비스에 Filter 이벤트를 바인딩합니다.
◦ 데이터 테이블을 사용 중인 경우 Filter 이벤트를 QueryDataTableEntries 서비스에 바인딩합니다.
◦ 데이터 서비스를 통해 데이터를 생성 중인 경우 Filter 이벤트를 데이터 서비스에 바인딩합니다.
다음 예에서는 정렬 열 이름과 제목이 적용된 질의 매개 변수를 보여줍니다.
{"maxItems":100000,"query":{"sorts":[{"fieldName":"name","isAscending":true},{"fieldName":"title","isAscending":true}]}}
이러한 바인딩 단계가 완료되면 바인딩 패널의 모양은 다음과 같습니다.
검색 구현
검색을 통해 그리드에 있는 임의의 열에서 문자열 값을 찾을 수 있습니다.
1. EnableGridSearch 속성을 Mashup Builder의 속성 패널에서 클릭하거나 동적 구성 서비스의 JSON 스크립트에서 정의하여 true로 설정합니다. GridSearchLocation 속성, QueryFilter 속성 및 필터가 속성 패널에 나타납니다.
2. GridSearchLocation 속성을 Mashup Builder 속성 패널 또는 JSON 스크립트에서 사용하여 그리드에서 검색 필드의 위치를 구성합니다. 사용 가능한 옵션은 오른쪽 위, 왼쪽 위, 오른쪽 아래 및 왼쪽 아래입니다.
3. QueryFilter 속성을 검색할 데이터가 있는 출력 질의 매개 변수에 바인딩합니다.
◦ 데이터가 테이블에 있는 경우 QueryFilter를 QueryDataTableEntries 서비스의 질의 매개 변수에 바인딩합니다.
◦ 데이터 서비스를 통해 데이터를 생성 중인 경우 QueryFilter를 데이터 서비스의 queryFilter 매개 변수에 바인딩합니다.
4. Filter 이벤트를 검색이 시작될 때 트리거되는 서비스에 바인딩합니다.
◦ 데이터 테이블을 사용 중인 경우 Filter 이벤트를 QueryDataTableEntries 서비스에 바인딩합니다.
◦ 데이터 서비스를 통해 데이터를 생성 중인 경우 Filter 이벤트를 데이터 서비스에 바인딩합니다.
다음 예에서는 모든 열에서 Rain 이벤트를 검색하는 검색 질의를 보여줍니다.
{"maxItems":100000,"query":{"filters":{"type":"OR","filters":[{"fieldName":"id","type":"LIKE","value":"%Rain%"},{"fieldName":"date","type":"LIKE","value":"%Rain%"},{"fieldName":"max_temp","type":"LIKE","value":"%Rain%"},{"fieldName":"min_temp","type":"LIKE","value":"%Rain%"},{"fieldName":"cold","type":"LIKE","value":"%Rain%"},{"fieldName":"visibility","type":"LIKE","value":"%Rain%"},{"fieldName":"wind","type":"LIKE","value":"%Rain%"},{"fieldName":"precipitation","type":"LIKE","value":"%Rain%"},{"fieldName":"events","type":"LIKE","value":"%Rain%"},{"fieldName":"image","type":"LIKE","value":"%Rain%"},{"fieldName":"key","type":"LIKE","value":"%Rain%"},{"fieldName":"location","type":"LIKE","value":"%Rain%"},{"fieldName":"source","type":"LIKE","value":"%Rain%"},{"fieldName":"sourceType","type":"LIKE","value":"%Rain%"},{"fieldName":"tags","type":"LIKE","value":"%Rain%"},{"fieldName":"timestamp","type":"LIKE","value":"%Rain%"}]}}}
필터링 구현
그리드에서 필터링을 구현하려면 그리드를 작성 중인 매쉬업에 데이터 필터 위젯을 추가합니다. 기본 데이터 셰이프를 기반으로 데이터 테이블에 바인딩된 그리드에만 데이터 필터 위젯을 추가할 수 있습니다.
1. Mashup Builder 왼쪽에 있는 위젯 탭에서 데이터 필터 위젯을 선택하고 매쉬업으로 끕니다.
2. 데이터 필터 위젯의 출력 질의 매개 변수를 고급 그리드의 QueryFilter 속성에 바인딩합니다. 이 시나리오에서 QueryFilter 속성은 입력 함수와 출력 함수를 모두 처리합니다. 이렇게 하면 활성화된 모든 정렬 입력 및 검색 입력과 자동으로 결합되는 데이터 필터의 입력을 가져오고 질의 매개 변수에 대한 단일 출력이 생성됩니다. 
3. QueryFilter 속성을 필터링, 정렬 또는 검색 중인 데이터 테이블의 QueryDataTableEntries 서비스에 대한 query 매개 변수에 바인딩합니다.
다음 예에서는 단일 필터 매개 변수로 Rain의 이벤트 값을 사용하는 데이터 필터 질의를 보여줍니다.
{"maxItems":100000,"query":{"filters":{"fieldName":"events","type":"LIKE","value":"Rain*"}}}
필터 질의는 여러 필터가 적용될 때 또는 필터 입력이 검색 및 정렬 매개 변수와 결합될 때 훨씬 더 복잡해질 수 있습니다. 다음 예에서는 단일 출력 질의의 정렬, 검색 및 필터 매개 변수 조합을 보여줍니다.
{"maxItems":100000,"query":{"sorts":[{"fieldName":"id","isAscending":true},{"fieldName":"min_temp","isAscending":true}],"filters":{"type":"And","filters":[{"type":"And","filters":[{"fieldName":"events","type":"LIKE","value":"Rain*"},{"fieldName":"cold","type":"EQ","value":false}]},{"type":"OR","filters":[{"fieldName":"id","type":"LIKE","value":"%21%"},{"fieldName":"date","type":"LIKE","value":"%21%"},{"fieldName":"max_temp","type":"LIKE","value":"%21%"},{"fieldName":"min_temp","type":"LIKE","value":"%21%"},{"fieldName":"cold","type":"LIKE","value":"%21%"},{"fieldName":"visibility","type":"LIKE","value":"%21%"},{"fieldName":"wind","type":"LIKE","value":"%21%"},{"fieldName":"precipitation","type":"LIKE","value":"%21%"},{"fieldName":"events","type":"LIKE","value":"%21%"},{"fieldName":"image","type":"LIKE","value":"%21%"}]}]}}
고급 그리드에서 필터링을 정렬 및/또는 검색과 함께 사용 중인 경우 바인딩이 완료되면 다음 다이어그램과 같이 표시되어야 합니다.
