야후 사용자 인터페이스 블로그 (YUIBlog)

YUI 3 DataTable의에 의해 표시되는 데이터 필터링

에서 지원하는 정렬 외에도 YUI 3 DataTable의 , 그것은 데이터를 필터링하고 가능한 행 하위 집합을 표시할 수 있도록 종종 유용합니다. 쿼리 빌더 에서 위젯 YUI 3 갤러리 간단한 필터 식을 구축을위한 UI를 제공합니다.

( 이 예제와 함께 재생 화면을 클릭하십시오 .)

역사

첫 번째 버전은 야후 제작사 네트워크 (YPN)에서 나와 함께 일하는 동료에 의해 작성되었습니다. (그는 정직한 고용을 시도 후에 곧 떠나 제이미 Zawinski가 ​​설정한 선례를 따라, 그는 맥주를 판매하는 술집을 열었 -.! 집에 양조, 이하도하지만 난 빗나가다 ....) 쿼리 빌더의 첫 번째 버전을 함께 해킹 후, 그가 만든 내게 보여주 실수. 며칠 후, 그는 불평, "당신은 모든 걸 rewrote!"사실, 저는 몇 년 만에 여러 번 재작 성했습니다. YPN 죽었지만, 쿼리 빌더 권력의 모든 데이터 테이블의 최신 YUI 2 버전 APT , 야후의 디스플레이 광고 관리 플랫폼입니다. YUI 3 포트는 사실이 새로운 버전을 생성해야만했습니다 작업의 최소 금액을 말합니다!

예를 들어 작동 원리

예제의 핵심은 사용자가 데이터와 필터를 구현 Y.DataSource.Local까지 (2) 확장자를 필터링하는 방법을 지정합니다 (1) 쿼리 작성기 구성입니다. (서버 사이드 매김 들어, 서버에 필터 데이터를 보내는 것하고 SQL 쿼리에 구워.)

쿼리 빌더를 구성하려면 예제는 먼저 필터링 수있는 변수 목록을 정의합니다 :

 VAR var_list =
 [
	 {
		 이름 : '제목',
		 형식 : '문자열',
		 텍스트 : '제목'
	 }
	 {
		 이름 : '년',
		 형식 : '번호',
		 텍스트 : '년',
		 검증 : 'yiv-정수 : [0,2100]'
	 }
	 {
		 이름 : '수량',
		 형식 : '번호',
		 텍스트 : '수량',
		 검증 : 'yiv-정수 : [0,]'
	 }
 ];

각 변수는 이름 (DataTable의 열 구성에서 키 일치)와 유형을 할당됩니다. 기본 유형은 '문자열', '번호', 그리고 '선택'지만, 당신은 (사용자 정의 플러그인을 구축하여이를 확장할 수 아래 참조 ). 사용하는 각 유형의 경우, 또한 연산자 집합을 정의해야합니다 :

 VAR 요원 =
 {
	 문자열 :
	 [
		 {값 : '포함', 텍스트 : '포함'}
		 {값 : '시작 -와'텍스트 '로 시작'}
		 {값 : '이 끝날-와'텍스트 '로 끝'}
	 ]

	 번호 :
	 [
		 {값 : '평등', 텍스트 : '='}
		 {값 : '적게', 텍스트 : '<='}
		 {값 : '큰', 텍스트 : '> ='}
	 ]
 };

이것은 사용자가 각 변수 타입에 적용할 수있는 연산자를 지정합니다. (같은 기본적인 유형의 변수에 대한 운영자의 다른 세트가 필요하면, 당신은 타입을 복제하실 수 있습니다. 참조 플러그인 아래 부분을.)

Y.FormManager는 필터가 적용되기 전에 사용자가 입력한 값을 확인하는 데 사용됩니다. 위의 쿼리 빌더 구성의 각 변수에 대한 유효성 검사 키 Y.FormManager에 의해 해석됩니다 CSS의 데이터를 제공합니다.

모든 검증 통과하면 요청은 데이터 소스로 전송됩니다. 까지 연장 Y.DataSource.Local 매우 간단합니다. 그것은 단지 결과를 제공하기 전에 데이터를 필터링합니다 :

 Y.extend (CustomDataSource, Y.DataSource.Local,
 {
	 _defDataFn : 함수 (E)
	 {
		 VAR 데이터 = filterData (e.data, e.request.filter);
		 VAR 반응 =
		 {
			 결과 : data.slice (e.request.recordOffset,
						 e.request.recordOffset + e.request.rowsPerPage)
			 메타 :
			 {
				 totalRecords : data.length
			 }
		 };

		 this.fire ( "반응", Y.mix ({응답 : 응답}, E));
	 }
 });

filter 요청의 요소로부터 얻은 것입니다 QueryBuilder.toDatabaseQuery() ,이 목록 반환 [variable, operator, value] 튜플합니다. 또한 필터를 기반으로이 변경 사항이 적용되고 이후 반응은, 레코드의 총 개수에 대한 정보를 포함해야합니다.

filterData() 단순히로부터 튜플을 통해 루프 toDatabaseQuery() 2 등급 조회 테이블에 정의된 필터 연산자를 적용 :

 VAR 필터 =
 {
	 문자열 :
	 {
		 이 포함되어 있습니다 : 함수 (값, 필터)
		 {
			 반환 (value.indexOf (필터)> = 0);
		 }
		 '이 시작됩니다 -와': 함수 (값, 필터)
		 {
			 (value.substr (0, filter.length) == 필터) 반환;
		 }
		 '엔드 -로': 함수 (값, 필터)
		 {
			 반환 (value.substr (-filter.length) == 필터);
		 }
	 }

	 번호 :
	 {
		 같음 : 함수 (값, 필터)
		 {
			 반환 (parseInt (값, 10) == parseInt (필터, 10));
		 }
		 덜 : 함수 (값, 필터)
		 {
			 반환 (parseInt (값 10) <= parseInt (필터, 10));
		 }
		 큰 : 함수 (값, 필터)
		 {
			 반환 (parseInt (값 10)> = parseInt (필터, 10));
		 }
	 }
 };

이 후, DataTable의 단순히 그것이 데이터 소스로부터받는 것을 표시합니다.

플러그인

Y.QueryBuilder.plugin_mapping 실제 수업 유형 이름의 매핑을 정의합니다. 당신은 두 가지 방법이 매핑을 확대하실 수 있습니다

1. 동일한 클래스에 대한 새 이름을 정의하여 기존의 형식을 복제할. 이것은 동일한 기본적인 유형의 다른 변수에 대한 운영자의 다른 세트를 허용합니다.
2. 구현하여 새 형식을 만들기 플러그인 API를 . 기존 플러그인의 소스 코드를 공부하면이 API는 작동 방식에 대해 살펴볼 수있는 최선의 방법입니다.

쿼리 작성기를 Generalizing

쿼리 빌더는 괄호를 지원하지 않으므로 여러분은 모든 조건이나 또는 모든 조건 가능합니다. 그것이 부울 표현의 그래픽 표현에 괄호를 도입하는 것이 가능하지만, 제가 본 모든 디자인은 사용하기에는 너무 복잡합니다. 텍스트 표현이 훨씬 간단하고 조작하는 것이 더 쉽습니다. 식 작성기는 손으로에서의 구문이나 형식 모두 다 기억하지 않고도 텍스트 표현을 구축 있도록 위젯으로 쿼리 빌더를 포함합니다.

소개 저자 : 존 Lindal는 ( @ jafl5272 트위터)에 토대 구축 리드 엔지니어 중 하나입니다 야후! APT가 내장되어 있습니다. 이전에, 그는 야후 제작사 네트워크에서 근무했습니다.

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!