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

Satyam 물어보세요 : 행 확장과 중첩된 DataTables을

Satyam는 (일명 다니엘 페레로) 중 하나입니다 오랜 유이 기고자과 가장 다작에있는 전문가 관대한 유이 포럼 . 그는 또한 도서관 학습 2.8.0 유이, YUI 저자의 새로운 책에 2.8.0 : . "시리즈를 Satyam이 문서는 질문에"는 Santini 알베르토이었습니다 제안 과 브라이언 케인 . Satyam는 시리즈의 일부로 YUIBlog에 앞으로 몇 주 여기에 몇 가지 추가 질문에 대답한다.

그것은 정보 아키텍처에 공통적인 문제 : 당신은 테이블 형식 데이터를 가지고 당신이 필요가 엔티티 각 테이블 행으로 표시에 대한 자세한 정보를 표시합니다. 보통, 이것은 ""를 클릭하거나 선택하고 선택한 행의 바로 아래에있는 데이터를 표시에 행을 확대하여 수행됩니다. 가끔씩이 추가 데이터가 더 DataTable의 또한 중첩 수준으로 자사의 행이 확장 수도 방식으로 제공됩니다. 우리는 확장 단일 행 행 아래로 연락 드릴 기본 사용 사건의; 행 때 사용 각각의 사건과 관련된 추가와 관련된 데이터를 테이블 형식, 기능은 DataTable을 중첩이다 설명한대로.

지금까지 거기에 함께 가지고 있었 몇 가지 기능이 지원 시도를 심각하게 YUI DataTable을 2 . 자신의 목록의 예입의 DataTable을 포함 행 확장 Gelinas 에릭 예제를합니다. 존 Lindal 자기 소개 를 Treeble 에 YUI 블로그 문서 얼마전와 3 YUI 버전에 대한 갤러리. 나는 또한 나의 노력하고 NestedDataTable 프로젝트를 만듭니다.

해결책이 없음의 질문 완전히 만족과 재발하는 경향이, 사실, 두 사람이 부탁의 일환으로 Satyam를 물어 시리즈. 이 문서에서 나는거야 다이빙에 다시 전략과 행 확장과 중첩 DataTables 처리하기위한 옵션을 탐험해보세요.

몇 가지 문제를 고려해야 할

DataTable을 매우 기본적인 가정의 몇 가지 있습니다. 하나는 그게 행 이내의 위치 기록에 해당하는 순서적 위치 서수 같은 <tbody> 마크업의. 전 재산의 발생을 17 카운트 sectionRowIndex 순서를 나타내는 숫자를 반환 <TR> 의 <tr> 부분이다, 시간 내에 요소 <tbody> , <tbody> 또는 <thead> <tfoot> 포함되어 있습니다). 또한 기록의 순서적 위치가 행 배열로 인덱스로 사용되는 많은 사건이 있습니다. 예를 들어,에 행 확장 예를 들어, 테이블의하자로 실행 종료 방법 - 행에 대한 어떠한 절반을 확장한 다음 콘솔 진술의 디버깅 실행 다음과 같은 두 가지 :

  YAHOO.example.Basic.oDT.getTrEl (YAHOO.example.Basic.oDT.getRecord (17)).이 아이디 

 YAHOO.example.Basic.oDT.get 다음 TrEl (YAHOO.example.Basic.oDT.getRecord (17)).이 아이디 

둘 다 표시됩니다 yui-rec17 행의 다음으로 ID를 반환 답변해야 진술 두 번째 이후가 아니라 수정하십시오. 행의 경우 확장하기 전에 또는 당신이 할 같은 확장을 가진 행을 사용하여, 낮은 번호를, 두 번째 문장은 반환됩니다 올바르게 yui-rec18 .

그들의 기본 양식에 분명히 나와있는 모든 예제는 작품, "버그"마술에 금액을 위 시연했다. 안전한 범위 내에서 귀하의 신청서 숙박, 당신은 잘하는 경우. 그러나 기능은 응용 프로그램에 하나의 방법의 내부에 DataTable을 운영하는 가정에 대해 더 깊게 만드는 몇 가지 문제가 발생할 수 있습니다 나중에,에 추가되었습니다. (그게 다 무슨 소용 이람, DataTable을 매우 견고입니다. 내장된 기능에 상당히 안전하고, 그것 정렬 열입니다 세포를 편집, 선택하고 잘 하이라이트, 내가 보기엔 그것을 테스트합니다. 나는 그것의 가장 기본 인기를 끊어야 할 수 없습니다 - 기능.)

DataTable을 내에서 구조를 중첩도 골칫거리 수도, 중첩된 요소에 클릭 이후 것입 거품까지 다른 합병증이 : 어딘가 확장 사용자 정의 연속으로 클릭하면 초대장이 어디에 할 수 엉망이 모든 것들을 정리해 DataTable을 포함. 당신과 같은하셔야합니다이 사건을 듣고 요점을 cellClickEvent cellClickEvent 중첩된 있지만에 부모 테이블의 부모를 대상 테이블부터 세포 속하지보고 있지 않을 수도 있습니다 - 그래서 실패를 위해 셀 수 기록 가져오기 열 또는.

마지막으로, 몇 가지 개념의 문제가 있습니다. 무엇 getNextTrEl 뜻? ,가 나중에는 오직 DataTable을 자신의 (행 데이터합시다에 전화를해서 행)를 포함, 이건 또는해야 행을 추가로 사용자 정의합니까 지금? 저는 아이지만 것이되고 말, 데이터 행을 포함가 있어야만이 이후 사용자 지정 행 행 데이터에 중첩, 아니라 형제 자매, 그리고 일반 불구하고 HTML을 사용하는 마크업은 우리가 강제로 <TR> 요소, 개념, 그들은 형제 자매 없습니다. 그럼, 만약에 도달 어떻게든 <TR> 요소 및 해당 요청에 대한 기록 메서드가 포함된 사용하여 DataTable을 getRecord() , 그 경우 <TR> 행으로하는 사용자 정의, 무슨 : 기록 것이 될 해당 null (안다 이후로 그것은 ' 마가 속한 DataTable을 포함하며 이에 하나) 또는 기록 데이터 행의 그것의 자식의 중첩?

어떻게 행에 줄무늬를 원하지? 현재 스트라이핑 논리도하고 홀수 행 무차별 여부 데이터를 행 또는 사용자 정의 행을하지만 아마도 자네가 사용자 지정 행을 위해 데이터 행의 같은 배경 색상을 계속하고 싶습니다 소요 그들이 소속되어 있습니다.

다음은 몇 가지 행 확장 기능의 정의를 요구 측면되며 그들의 모든 결정은, 한 그것은 일관성과 예측대로, 가능성이 가장 많이 사용하는 케이스를 수용할 것이다.

DataTable을하지 않고 둥지를 튼

물론, 우리는 이러한 제한이 살고 있지만 그 다음은 전혀 DataTable을 고생의 요점이 무엇입니까? 양식면 모두 당신이 표의 일부 중첩된 정보를 표시하려는됩니다, 당신은 정기적으로 간단히 사용할 수있는 <table> 요소 또는 이것과 비슷한 걸. 사실, 3 버전의 Treeble YUI ( 예 )가 정확히; DataTable을 이후의 거기 YUI 3 버전이 아직 안 사용하도록, 모든 사용에 아무것도. 당신의 수도로서 같은과 YUI 2, 잘 할 아주 똑같은 이 예제의 HTML을, 아니 DataTable을도 <table> <table> 에 사용되었다. 이었소 예제는 매우 시각 (전 예술)라고 주장 적이 추한 간단합니다,하지만 만약 당신이 걱정이다, 적어도 당신은 당신을 실망시키지 않을 알아요. 당신은 언제 어떻게 결정 평가하는 것이 좋습니다 그냥 생각.

DataTable을 함께 행 확장

마지막으로, 당신은 정말로있는 DataTable을 사용하는 것이 좋습니다. 그렇다면 어떻게 우리가 가서 하시죠? 두 Treeble 내 자신 NestedDataTable 둥지 두 DataTables. 에릭 Gelinas는 대조적으로, 좀 더 유연하게 찾아 또 다른 접근 방식을 사용했다. 그는 확장에 될 무엇에 어떤 가정을하지 않습니다. 그것은 사용 rowExpansionTemplate 함수 구성 속성을 수 있겠다 중 하나에 대한 참조 또는 문자열 템플릿. 문자열을 통해 처리됩니다 템플릿 YAHOO.lang.substitute 확대 개체에 대한 기록 데이터에서 함께 행 수에 대해서. 우리는 이미 우리 모두가 필드는 우리가 데이터 소스와 함께 읽고 열 정의 배열에서 정의해야 모르겠지만, 우리는 예비 나중에 사용하기 위해 여분의 데이터 소스 필드를 유지할 수 있습니다. 이 메커니즘을 템플릿 우리가 확장 행에서이고 우리는 일반 행에서 공간을 가지고 있지 않았 다른 필드를 표시하실 수 있습니다. 예제에서는 DataTable을 메인에 목록 사진 표시 이름에 큰부터도있을 플리커, 이미지. 필드는 그 사진을 가리키고 처음부터로드되는 URL을 조립합니다. 확장시 행, 그 비트가 제작되고 함께 넣어 <img> 태그와 섬네일을 행에 대한 확장에 사진이 표시됩니다.

우리가 설정하면 이제 rowExpansionTemplate 참조 함수, 그럼 우리가 원하는 우리가있을 가능성이 좀 유연성을 모두. 나는 그 아이디어를 사용하는 이 예에서 ,하지만 다른과 약간 rowexpansion.js이 파일을 만듭니다. 원래는 더 많은 서식 파일을 사용하여 문자열에 집중되었고 그것 확장 행은 파괴 될 수 있고 비용 부담없이 언제든지 다시 생각했습니다. 그런 경우 확장은 좀 더 복잡한, 그러한 추가 DataTables 내에서 중첩된있는 DataTable와 마찬가지입니다하지 않습니다. 매번 칼럼, DataTable을 모든 행을 삭제하고 새롭게, 그것은 삭제되고 있었다면뿐만 복원하는 대단히 복잡한 콘텐츠로 비싼 시작 했어요 정렬됩니다. 대신, 내가 뭘 방법주의 확장에 행에 대한 참조를 확장됩니다 계속 개체에 대한 설명을 참조 ( getExpansionState ) 어떤 테이블의 부모입니다 저장된의 기록. 이 데이터는 삭제되지 않으며 그것은 훨씬 더 효율적으로 같은 행을 때마다 부모 행을 다시 렌더링 복원의 결과로.

때로는, 그러나, 부모 행을 목적 또는 부모 DataTable을에서 삭제됩니다와 서버, 아마도, 아이가 새롭게 있어야 서로 다른 데이터에서 다시로드. 그렇지 않으면 그들은 좀비처럼 메모리에 남아있는 것이 때문에 명시적으로 이러한 경우에 자식 행을 삭제해야합니다. 따라서, 나는 (오버 라이드를 여러 가지 방법을 deleteRow , deleteRows , initializeTable , destroy ) 및 기록하기 전에는 부모의 콘텐츠를 삭제가 중첩 삭제됩니다. 삭제 그러나, 내용은 처리 좀 더 정교한 방법을 필요 할지도 이후 부족이다. 복잡한 구성 요소로서 많은, DataTable에는이 destroy 행사하는 방법과 관련된 자사의 인스턴스를 필요에 따라 취소되어야라는 완전히. 나는 추가 rowExpansionDestroyEvent 필요로 이벤트를하는 신호에 관한입니다 행에 중첩된 파괴로 따라서 있도록 콘텐츠를 핸들을 개발자가. 예를 들면 :

  albumDT.on ( 'rowExpansionDestroyEvent', 기능 (주) ( 

     주 [NESTED_DT]은. () 파괴; 

 )); 

모든 이벤트는 수신 state 인수는 단일 개체를 그들의. 여기, 나 (내 자신의 사용에 대한 참조를 이름으로 재산 저장된 밑에 제가 중첩된 어느 DataTable을 NESTED_DT ) 및 그 전화를 destroy 방식입니다.

RowExpansionDataTable 자동으로 행 확장을 트리거 또한 클릭수 그 칼럼에서 수신 대기 열을 추가합니다. 당신은 그 칼럼에 대해 아무것도 할 최대 게재하고 활성화할 필요가 없습니다. 그것은 항상 왼쪽에있는 생성자에서이 간단한 코드를 사용하여 그것을 추가합니다 :

  var에 REDT = 기능 (elContainer, aColumnDefs, oDataSource, oConfigs) ( 

  ((aColumnDefs.unshift 

           키 : ROW_EXPANSION, 

           레이블 : ", 

           className : CLASS_TRIGGER 

      )); 

      REDT.superclass.constructor.call (이, elContainer, aColumnDefs, oDataSource, oConfigs); 

 ); 
  YAHOO.widget.RowExpansionDataTable = REDT; 

RowExpansionDataTable에도 리스너를 설정 cellClickEvent 에 지속적으로 저장하고 확인하는 경우 값으로 설정된 해당 키 한 칼럼이다 클릭한 ROW_EXPANSION ; 해당 이벤트가없고 그 필요에 응답할 수 있도록 우리가,에 대해 비록 청중을 추가 설정할 수 있습니다 싶어 우리가 다른 컬럼에 우리 자신의 목적.

나의 근거는 비록 rowexpansion.js 파일 작품이다 에릭 Gelinas있어, 거기에도 많은 차이가있다. 나는에 의해 중지 표준 명명 규칙 및 고정이 풍요의 오류에 부합 변경 많은 이들의 이름을 변수에 속성 및 메서드 JSLint . 그것의 기초하지만, 코드는 여전히 에릭.

예제는 주석 처리가 잘 예제 설명한 후 테이블; rowexpansion.js는 자사 따라 쉽게 파일을 오피스 API를 사용할 수 있습니다 또한.

아이 Overlaying

다른 대안은 행을 추가할 수 있도록하는 것입니다 부모 행을 위의 확장 플로트. 난 내 자신이이 사용된 예를 NestedDataTable . 이 예제는 또한 YQLDataSource 테이블을 통해 YQL 사용하며,로 언급 제가 이전 기사 , YQL 아티스트 검색 테이블입니다 함께 사용하는 서투른 다소 YUI 2 자동 완성 이름으로 예술가와 일치 성공할 겁니다 부분 안돌아 와요.

여기, 당신이 행을 확장, 컨테이너 <div> 만들어지고 신체 문서 추가로. 컨테이너는 절대적인 위치를 사용하여 이동 한 확대되고 아래의 행 권리를 오버랩합니다. 컨테이너 따라서 너무 확대되는 행을 하나의 옆에 커버,이 행의 높이가 중복되는 컨테이너를위한 공간을 만들기 위해 증가됩니다.

이 메커니즘은 내가 전에 언급한 두 가지 문제에서 우리를 공격 : 아니오 행이 DataTable을, 기록 및 행의 서수 위치에 대한 모든 시대와 이벤트 수없는 거품 용기에서에서 DataTable에 이후 그들의 자손 없습니다 일치에 추가됩니다 DataTable을. 그러나, 컨테이너의 위치를 유지하는 몇 가지 이벤트에주의를 지불하고 자신의 위치를 다시 계산해야합니다. 여러 아이들과 함께 기본 테이블 정렬 열고 쉽게 그들의 새로운 위치로, 모든 컨테이너를 이동합니다 때문에 브라우저 창의 크기를 조절합니다.

이 예제는 한도 확대에 어떤 수있는 예제를 사용하여 두 RowExpansionDataTable 동안 둥지 수준을합니다. 나는 두 가지를 결합하려하고 난 아무 이론적인 이유가보고 그것이 성공하지만한 이유가 있지만, 내가 너무 힘들 어떤 합리적인 크기의 블로그 문서에서 설명하는 것이었다 복잡한 가지고 예제를 발견하려는 있습니다. 예를 들어, 뜻으로, 부모와 자식 테이블 완벽하게 제어할 수있다 때 확장 또는 계약, 이동을 데려 알고 그려야 또는 다른 방식으로 변경하고 쉽게 아무도 액세스할 수있는 그들의 레이아웃을 조정합니다. 수준의 어떤 번호로 이것을 확대하려고, 난 그 의사 소통 모든 변경 사항을 위아래로 중첩된 구성 요소의 계층이 아닌 전부 반드시 DataTables, 열심히, 한 가지의 변화에 깊은 가능성이 다른 지점에 중첩된 구성 요소에 영향을 함께 발견 .

복잡 위아래로 그 변경 사항을 의사 소통에 많이 안 거짓말과 그들로 참여하는 일반적인 자식 요소에 대한 표준 인터페이스를 제공하도록 노력으로 행동. 내 말은, 쉽게 해결될 문제가 아니라 수도 인정 당신이 몇 가지 컨테이너와 그 내용을 완벽하게 제어할 수있다면, 그것은 관리해야해야하지만, 그것은 단지 할 말이된다고하려는 경우 RowExpansionDataTable가 일부 특정 응용 프로그램에 실패합니다.

결론

당신은 항상 테이블을 서로 내부 중첩해야하지만, 현실 DataTables 필요하지 않습니다 만약 그렇게하면, 내 RowExpansionDataTable 좋은 선택, DataTable을 확장하는 방법에 대한 좋은 본보기되고 게다가입니다. 그것은 당신이 그들을 우연히 만난면, 당신은 어디에 당신이 그들 주위를 작품으로 봐야할지 정말 그렇게 설명한 몇 가지 문제점을 가지고 있습니다. DataTable을 자체는 굉장하게 견고하고 아주 친절하게 그 자체를 처리합니다. 크기와 어린이의 위치에 변화를 신호 경우 일반적인 구성 요소에 할 힘들지만 DataTable의 내용을 중복도 가능한 솔루션으로, 효율적으로 해결할 수 있습니다 - 그리고 정말 여기서 뭘하려고하지 않았어. 나도 내 버전을 ScrollingDataTable에서 상속하려고 했었어, 그렇지 않아 내가 잊었지만, 오히려 내가 그것이 하찮은 사업이 아니 잖아요.

대화 찾기 : 하십시요 Bloglines | 테크노

공유 및 연장 : 스크랩 del.icio.us으로 | Digg Digg에 그것을! | 레딧!