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

YUI DataTable의 3과 Treeble

년 | 10시 41분에서 2011년 1월 24일 존 Lindal으로 오전 개발 , YUI 3 갤러리 | 7 개의 댓글

의 베타 릴리스 DataTable의 YUI 3.3.0에서 우리와 함께 경기를 할 수있는 매우 강력한 구성 요소를 제공합니다. 유용한 방법으로 타이어를 걷어차, 난 내 업데이 트를 결정 Treeble DataTable을 사용하는 예제. (Treeble이 가능 테이블의 계층적 데이터를 표시 .)

나의 기쁨하려면, 그것은 바람 이었어! 모든 어려운 작업이에서 이루어집니다 TreebleDataSource YUI 3 내가했던 모든 사용하여 DataTable의에 연결되었다, 그래서 DataSource를 확장하는, Y.Plugin.DataTableDataSource 다음 열 구성

 var에 DS = 새로운 Y.은 TreebleDataSource (...),
	 PG = 새로운 Y. Paginator (...),
	 테이블;

 함수 sendRequest () {
	 table.datasource.load ({
		 요청 : {
			 startIndex : pg.getStartIndex ()
			 resultCount : pg.getRowsPerPage ()
		 }
	 });
 }

 var에 cols = [
     {키 : 'yui33 - 해킹', 라벨 '}
     {
         키 : 'treeblenub', 라벨 : ',
         포맷 : Y.Treeble.buildTwistdownFormatter (sendRequest)
     }
     {
         키 : '제목', 라벨 : '제목',
         포맷 : Y.Treeble.treeValueFormatter
     }
     ...
 ];

 테이블 = 새로운 Y.DataTable.Base ({columnset : cols});
 table.plug ({데이터 소스 : DS를} Y.Plugin.DataTableDataSource);

전체 소스 코드를 확인하려면을 참조하십시오 살고 예 .

연고 유일의 파리는 다음과 같습니다

• yui33 - 해킹 칼럼. 로 인해 YUI 3.3.0 DataTable의 버그 , td 요소는 이전 칼럼에서 실제로 열 포맷에 전달. 따라서, 테이블의 첫 번째 열에는 twistdown를 표시하고, 두 번째 컬럼이 비어 있습니다.
• 데이터 정의되지 않은 값은로 표시됩니다 {value} 대신 공백의 ( 버그 2529858 ).

사용하기 쉽게 Treeble하기 위해서는, 내가 어떤 스타일에 의해 작성된 CSS 클래스에 샘 스킨이 추가되었습니다 Y.Treeble formatters 있습니다.

즐기십시오!

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

: 대화 찾기 bloglines | 테크노을

공유하고 확장 : del.icio.us와 스크랩 | 디그 그것! | 레딧!