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

YUI DataTable의 2를위한 빠른 편집 모드

YUI DataTable의는이 매끄러운 인라인 편집을 제공합니다. 언제 disableBtns 열 구성 켜져있다면, 문자열 또는 숫자와 같은 간단한 값을 수정하는 것은 엑셀 것 같아요. 각각의 변화는 일반적으로 (또는 거부할!) 새 값을 저장하기 위해 서버에 XHR 호출을 필요로하기 때문에 그러나, 경험이 데스크톱 애플 리케이션처럼 응답 수 없습니다. 사용자가 표시된 값을 많이 변경해야하는 경우, 그것은 느리고 좌절 경험이 될 수 있습니다. 이러한 문제를 해결하기 위해, 나는 QuickEditDataTable을 개발했습니다. 이 DataTable의 모든 가능한 값을 하나의 일괄 작업으로 변경할 수 있습니다 빠른 편집 모드를 추가 확장 :

( 이 예제와 함께 게임 화면 캡처를 클릭합니다 .)

개요

빠른 편집 모드를 입력하려면 전화 startQuickEdit() . 빠른 편집 모드를 종료하려면 전화 cancelQuickEdit() .

그것은 호출하기 전에 변경 사항을 저장하는 것은 귀하의 책임입니다 cancelQuickEdit() . 이 작업을 단순화하기 위해, QuickEditDataTable 제공 getQuickEditChanges() . 이것은 개체의 배열, 각 행에 대해 하나를 반환합니다. 각 개체는 열 ID의를 키, 그 행의 변경되었습니다에만 값이 포함되어 있습니다. 테이블 4 열 (제목, 저자, 년, 수량) 가지고 있으며, 사용자가 불과 20 한 행의 수량을 변경하는 경우 예를 들어, 다음 해당 행에 대해 개체가 될 {quantity:20} . 다른 값은 생략됩니다.

QuickEditDataTable 쉽게 확장할 수 있습니다 YAHOO.widget.ScrollingDataTable 당신이 그 기능을 필요하다면. 당신이 필요한 경우, 단순히 원본 파일의 복사본을 만들고 기본 클래스를 변경할 수 있습니다.

구성

빠른 편집 가능한 열에 대한 셀 formatters이 밖으로 바꾼 특별한 생성 formatters로 대체되는 모달 상태입니다 input , textarea , 또는 select 요소. 이 열만 quickEdit 구성을 수정할 수 있습니다. 구성 옵션은 다음과 같습니다

copyDown

true이면, 컬럼에서 최고의 휴대폰이 행의 나머지 값을 복사하는 버튼이 있습니다.

formatter

셀 해당 양식 필드를 렌더링 포맷 : <input type="text">, <textarea>, 또는 <select>. 기본적으로 셀 포맷의 YAHOO.widget.QuickEditDataTable.textQuickEditFormatter 입력 요소를 생산하는 모든 세포에 사용됩니다. 얻으려면 textarea 요소를 사용하도록 열을 구성할 YAHOO.widget.QuickEditDataTable.textareaQuickEditFormatter 대신합니다. 당신은 또한 사용자 정의 빠른 편집 포맷을 작성할 수 있습니다 - 아래를 참조하십시오.

validation

열에있는 각 필드에 대한 유효성 검사 구성.

css

기본 유효성 검사 규칙을 인코딩 CSS 클래스 :

yiv-required

값이 비어 있지 않아야합니다.

yiv-length:[x,y]

문자열은 최소한이어야합니다 x 대부분의 문자와 y 자. x와 y 중 적어도 하나는 지정해야합니다.

yiv-integer:[x,y]

정수 값을는 최소한이어야 x 및 대부분의 y . x 와 y 모두 선택 사항입니다.

yiv-decimal:[x,y]

소수점 값은 이상이어야합니다 x 및 대부분의 y . 지수는 허용되지 않습니다. x 와 y 모두 옵션입니다.

fn

인자로 그 범위와 세포의 형태 요소로 DataTable의와 함께 호출됩니다 함수. 값이 유효한 경우 true 반환합니다. 그렇지 않으면, 전화 this.displayQuickEditMessage(...) 오류를 표시하고 잘못된 반환합니다.

msg

기본 또는 정규식 유효성 검사 규칙이 실패하면 표시됩니다 메시지 종류의지도. 유효한 유형은 다음과 같습니다 required , min_length , max_length , integer , decimal , 그리고 regex . 유형에 대한 기본값은 없습니다 regex 당신이 정규식 유효성 검사를 구성하는 경우, 당신은 메시지를 지정해야합니다. 다른 유형에 대한 기본 오류 메시지에 저장 YAHOO.widget.QuickEditDataTable.Strings 과 재정 및 / 또는 현지하실 수 있습니다.

regex

유효한 것으로 간주되기 위해서는 값을 만족해야하는 정규 표현식.

때로는 아닌 편집 가능한 열은 빠른 편집 모드 동안 다르게 렌더링해야합니다. 가장 좋은 예제는 빠른 편집 모드에 악영향이있을 수 있지만 페이지에서 멀리 이동 있기 때문에, 링크를 포함하는 컬럼입니다. 빠른 수정 중에 링크를 제거하려면 구성 qeFormatter 수 열의 YAHOO.widget.QuickEditDataTable.readonlyLinkQuickEditFormatter . 이메일 주소에 대한 사용 YAHOO.widget.QuickEditDataTable.readonlyEmailQuickEditFormatter . 당신은 또한 당신에게 사용자 정의, 읽기 전용 포맷을 작성할 수 있습니다. 간단히있는 DataTable 셀 포맷을 구축을위한 일반적인 규칙을 따르십시오.

사용자 지정 빠른 수정 Formatters

QuickEdit 모드 사용자 정의 셀 포맷을 작성하려면 다음과 같이 함수를 구조해야합니다 :

 기능 myQuickEditFormatter (oColumn 엘, oRecord, oData) {
   var에 마크업 =
     '<input type="text" class="{yiv} yui-quick-edit yui-quick-edit-key:{key}"/>'+
     YAHOO.widget.QuickEditDataTable.MARKUP_QE_ERROR_DISPLAY;
     el.innerHTML = lang.substitute (마크업, {
       키 : oColumn.key,
       yiv : oColumn.quickEdit.validation?  (oColumn.quickEdit.validation.css | | ') : ''
     });
     el.firstChild.value = extractMyEditableValue (oData);
     YAHOO.widget.QuickEditDataTable.copyDownFormatter.apply (이, 인자);
 };

당신이 사용할 수있는 textarea 하거나 select 대신에 input 하지만, 당신은 단지 하나의 필드를 만들 수 있습니다.

extractMyEditableValue() 별도의 기능을해야하지 않으며 그것은 사용에 제한되어야합니다 oData . 작품은 일반적으로 포맷 함수에서 인라인 수행하지만, 샘플 함수의 이름은 요점이 명확하게해야합니다.

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

: 대화 찾기 bloglines | 테크노를

공유 및 확장 : del.icio.us로 스크랩 | 디그 그것! | 레딧!