2012-11-20 4 views
0

일부 탭이 YUI3 Tabview에 있습니다. 각 탭에는 YUI3 Scrollable Datatables 몇 개가 포함되어 있습니다. 데이터 테이블이 생성되었지만 렌더링되지 않았습니다. 내가 볼 수있는 것은 각 데이터 테이블의 첫 번째 열의 일부입니다.TabView의 YUI3 스크롤 데이터 테이블이 렌더링되지 않습니다.

브라우저 창 크기를 조정하면 렌더링 된 표를 볼 수 있습니다. 다른 탭으로 전환 할 때마다 어떻게 든 테이블을 다시 렌더링해야한다고 생각합니다. 어떻게해야합니까?

데이터 테이블은 Tabs/Tabview와는 독립적으로 생성됩니다.

도움을 주시면 감사하겠습니다.

답변

0

예, 스크롤하는 DataTable은 숨겨진 탭에서 display: none 아래에있는 경우 수행 할 수없는 테이블의 일부 요소 크기를 계산해야하기 때문에 렌더링 할 때 보이는 컨테이너에 있어야합니다. 이것을 피하는 방법은 데이터 테이블을 보유 할 탭이 나타날 때까지 기다리는 것입니다. 탭의 selectedChange 이벤트의 '이후'단계를 청취하면됩니다. 예를 들어 : http://jsfiddle.net/juandopazo/H2ASR/2/

+0

각 탭은 여러 테이블을 포함

tabview.item(1).after('selectedChange', function (e) { if (e.newVal) { table.render(); } }); 

다음은 작업 예입니다. 예제에서 지정한 것과 같은 특정 테이블 인스턴스가 없습니다. 이것을 극복하기 위해 무엇을 할 수 있습니까? – StackOverflow

+0

어떻게 렌더링하고 있습니까? – juandopazo

+0

기본적으로 모든 테이블 인스턴스를 가져 와서'selectedChange' 이벤트 이후에만'render()'를 호출해야합니다. 'this.get ('panelNode')'부분을 무시할 수 있습니다. 나는 그 대답을 단지 경우에서 삭제했다. – juandopazo