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

대량 에디터 위젯 : YUI 3 갤러리에서

QuickEdit 플러그인 을위한 YUI 3 DataTable의가 쉽게 원자 조작과 같은 기록의 전체 페이지를 편집할 수 있습니다. 그러나 가끔은 더 많은 일을해야합니다. 예를 들어, 동시에 당신이 편안하게 한 페이지에 들어갈 수있는 것보다 더 많은 레코드를 편집해야 할 수도 있습니다. 아니면 추가, 복제, 그리고 원자 작업의 일부로 기록을 제거를 지원해야 할 수도 있습니다. 아니면 하나의 테이블 셀에 그들을 배치하여 시각적으로 그룹 필드에 원하는 수 있습니다. 대량 에디터 위젯은 이러한 가능성을 지원합니다.

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

개요

대량 편집기 도구에는 세 가지 요소로 구성되어 있습니다 :

Data source

삽입, 삭제에, 그리고 변경 값 : 이것은 YUI 데이터 소스와 변경 내용을 관리 래핑합니다.

Base widget

이것은 각 레코드 내의 레코드와 필드를 관리하여 편집을위한 기본 구조를 제공합니다. 파생 클래스 사업부, tbody, 또는 다른 컨테이너가 될 수있는 별도의 행,에 각 레코드를 렌더링합니다.

HTML table implementation

이것은 HTML 테이블에 tbody로 각 레코드를 렌더링하기 위해 기본 위젯을 확장합니다. 열 구성 테이블의 각 열에 표시되는 필드를 결정합니다. 사용자 정의 셀 포맷은 단일 테이블 셀 안에 여러 개의 필드를 렌더링하는 데 사용할 수 있습니다.

구성

위의 화면을 생성 예제에서는 구성 가능한 한 간단하게 유지되었습니다 :

fields 각 레코드의 편집 가능한 값을 정의합니다. 기본 유형은 입력입니다. 다른 유효한 유형은 선택하고 textarea입니다. (일부는 값 목록을 필요로합니다.) 기본 유효성 검사에 의해 제공되는 폼 관리자 갤러리 모듈. 이것은 포함 필수 항목, 길이 제한 및 숫자 범위를 . 더 복잡한 검증을 지정하여 수행할 수 있습니다 regex 하거나 자신의 기능 ( fn ). 다음은 실제 예제에서 발췌입니다 :

 VAR 분야 =
 {
	 제목 :
	 {
		 형식 : 'textarea'
	 }
	 연도 :
	 {
		 검증 :
		 {
			 CSS : 'yiv-정수 : [1500,2100]'
		 }
	 }
	 색상 :
	 {
		 형식 : '선택',
		 값 :
		 [
			 {값 : '빨간색', 텍스트 : '빨간색'}
			 {값 : '녹색', 텍스트 : '그린'}
			 {값 : '파란색', 텍스트 : '블루'}
		 ]
	 }
 };

Y.BulkEditDataSource 의 인스턴스가 필요 Y.DataSource 다음과 같은 매개 변수를 :

uniqueIdKey

고유 각 레코드를 식별하는 키 이름입니다.

generateRequest

기능에 대한 요청 매개 변수를 생성 Y.DataSource . (때문에, 예제의 비어 Y.DataSource.Local 항상 모든 데이터를 반환합니다.)

extractTotalRecords

에서 레코드의 총 개수를 추출하는 기능은 Y.DataSource 응답을.

예제 사용하기 때문에 Y.DataSource.Local , totalRecordsReturnExpr 도 필요합니다. 어디 레코드의 총 개수를 저장하는 응답이 OGNL 표현식을 지정합니다. (납니다 extractTotalRecords 이 값을 읽습니다.)

 VAR ds는 = 새로운 Y.BulkEditDataSource (
 {
	 DS : raw_ds,
	 uniqueIdKey : 'ID',
	 generateRequest : 함수 () {}
	 totalRecordsReturnExpr : '. meta.totalRecords'
	 extractTotalRecords : 기능 (응답)
	 {
		 response.meta.totalRecords를 반환;
	 }
 });

Y.HTMLTableBulkEditor 데이터 소스의 필드 구성 및 열 구성이 필요합니다. 사용자 정의 포맷 터를 지정하지 않는 열 구성에서 핵심은, 필드 이름입니다. 레이블은 열 제목으로 사용됩니다. 다음은 실제 예제에서 발췌입니다 :

 VAR 열 =
 [
	 {
		 키 : '확인란'
		 라벨 : '<input type="checkbox" id="select-all" />'
		 포맷터 : 함수 (O)
		 {
			 VAR 마크업 = '<input type="checkbox" class="record-select" id="{id}" />';
			 o.cell.set ( 'innerHTML', Y.Lang.sub (마크업,
			 {
				 ID : this.getRecordId (o.record)
			 }));
		 }
	 }
	 {키 : '제목', 라벨 : '제목'}
	 {키 : '년', 라벨 : '년'}
	 {키 : '컬러', 라벨 : '컬러'}
 ];

(실제 예제에 대한 사소한 확장자 정의합니다 Y.HTMLTableBulkEditor 확인란 열을 처리합니다.)

당신은 또한 인스턴스 전달할 수 Y.Paginator 하기 Y.BulkEditDataSource . 이것은 별도 더 복잡로 입증되고 라이브 예 .

로컬 대 원격 데이터 소스

로컬 또는 원격 데이터 소스의 사용 여부를 결정할 때, 당신은 신중하게 무역 오프 고려해야합니다. 트레이드 오프 분명한는 paginating 때 데이터 소스 현지 빠르고이지만 초기 페이지 로딩이 오래 걸릴 것이고, 그것은 클라이언트에서 더 많은 메모리를 필요로합니다.

대량 편집기 위젯 그러나 추가적인 무역 오프 부과.

첫째, 데이터 원본 유이 불변의 데이터를 반환해야합니다. 이것은 로컬 데이터 소스에 대한 자동이지만, 원격 데이터 원본에 대한 구현하기 힘들 수 있습니다. 당신은 둘 이상의 사용자가 그들을 수정할 수있는 경우 일괄 편집 동작이 진행되는 동안 데이터베이스 테이블의 행을 잠글 필요합니다.

둘째, 로컬 및 원격 데이터 소스 간의 선택은 귀하가 데이터를 저장하는 허용하는 방법에 영향을줍니다. 당신은 로컬 데이터 소스를 사용하면 최선의 노력 절약, 즉 할 수, 서버의 모든 유효한 레코드를 저장, 데이터 소스 지역에서 그들을 제거하고 사용자가 잘못된 값을 가지고 레코드에 집중할 수 있습니다. 모든 데이터가 유효 후 원격 데이터 소스를 사용할 때, 불변 요건이만이 전부 아니면 아무것도 절약 즉, 할 수 있고, 데이터만을 저장할 수 있습니다.

현실적인 유스 케이스

대량 편집기 도구의 원래 동기는 업로드된 스프레드 시트의 후처리를 허용하는 것이었다. 후처리 단계를 소개하면 스프레드 시트 값을 완벽하게 할 필요성을 제거합니다. 오류 대신 전체 업로드를 거부할 대량 편집기 위젯에 표시하고 해결할 수 있습니다. 또한, 서버에서 처리하면 각 레코드에 필요한 추가적인 가치를 가장 잘 맞춰 할당을 할 수 있으며, 사용자는 저장하기 전에 이러한 추가적인 가치를 확인하고 수정할 수 있습니다. 이것은 스프레드 시트의 초기 생성을 단순화합니다.

이 시나리오에서는 원격 데이터 소스는 최고의 선택입니다. 업로드된 데이터는 스크래치 공간에 저장되며, 다른 사용자가 그것을 볼 수 있기 때문에, 불변이 보장됩니다. "전부 아니면 아무것도"는 절약 적합 : 일단 모든 오류는 저장 작업이 단지 표준 업로드 작업처럼 원자이며, 해결되었습니다.

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

대화 찾기 : bloglines | 테크노

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