2011-01-24 4 views
7

여러 개의 slickGrid를 만들고 jQuery 탭에 넣습니다. 첫 번째 jQuery 탭의 첫 번째 slickGrid는 정상적으로 작동하지만 다음 탭으로 바꿀 때 헤더 크기를 조정하고 열이 헤더에 정렬되지 않으면 slickGrid의 데이터 열이 표시되지 않습니다. 이 문제를 해결할 수있는 방법이 있습니까?jQuery 탭의 여러 slickGrid

<ul class="tabs"> 
    <li><a href="#tab_1">FADF Mono</a></li> 
    <li><a href="#tab_2">BADF Mono</a></li> 
    <li><a href="#tab_3">BADF Color</a></li> 
</ul> 
<div class="tab_container"> 
     <div id="tab_1" class="tab_content"> 
      <div id="slickGrid_1"></div> 
     </div> 
     <div id="tab_2" class="tab_content"> 
      <div id="slickGrid_2"></div> 
     </div> 
     <div id="tab_3" class="tab_content"> 
      <div id="slickGrid_3"></div> 
     </div> 
</div> 

답변

9

오케이. 글쎄, 나는 시도하고 무슨 일이 벌어지고 왜 그것이 작동하지 않습니다. 기본적으로 일어날 가능성이있는 것은 slickgrid isntances를 초기화하기 전에 탭을 설정한다는 것입니다. 두 번째 및 세 번째 탭은 기본적으로 숨겨진 상태로 주어지기 때문에 슬릭 그리드가 초기화되지 않기 때문에 이는 중요합니다.

주문을 변경하고 작동하는지 확인해보십시오. 그렇지 않다면 당신의 slickfgrid 이니셜 라이저를 document.ready에 넣고 탭 이니셜 라이저를 document.load에 넣는 것이 좋습니다. 조금 해킹되지만 좋은 결과를 가져옵니다.

희망적입니다.

0

이 기본적으로 내 JQuery와의 코드 재건,이 코드가 동적으로 PHP 코드에 의해 생성됩니다 여기에 내 코드 exerp입니다.

$(document).ready(function() { 

    //When page loads... 
    $(".tab_content").hide(); //Hide all content 
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab 
    $(".tab_content:first").show(); //Show first tab content 

    //On Click Event 
    $("ul.tabs li").click(function() { 

     $("ul.tabs li").removeClass("active"); //Remove any "active" class 
     $(this).addClass("active"); //Add "active" class to selected tab 
     $(".tab_content").hide(); //Hide all tab content 

     var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content 
     $(activeTab).fadeIn(); //Fade in the active ID content 
     return false; 
    }); 

    }); 
    </script> 
    <script> 
var grid_1;  
var columns_1 = [   
{id:"title", name:"Title", field:"title"},   
{id:"duration", name:"Duration", field:"duration"},   
{id:"%", name:"% Complete", field:"percentComplete"},   
{id:"start", name:"Start", field:"start"},   
{id:"finish", name:"Finish", field:"finish"},   
{id:"effort-driven", name:"Effort Driven", field:"effortDriven"}   
]; 

var options_1 = {   
enableCellNavigation: false,   
enableColumnReorder: false  
}; 

$(function() {   
var data_1 = [];    
for (var i = 0; i < 500; i++) {    
data[i] = {     
title: "Task " + i,     
duration: "5 days",     
percentComplete: Math.round(Math.random() * 100),     
start: "01/01/2009",     
finish: "01/05/2009",     
effortDriven: (i % 5 == 0)    
};   
} 

grid_1 = new Slick.Grid($("#slickGrid_1"), data_1, columns_1, options_1);  
})  
</script> 

<script>   
var grid_2;  
var columns_2 = [   
{id:"title", name:"Title", field:"title"},   
{id:"duration", name:"Duration", field:"duration"},   
{id:"%", name:"% Complete", field:"percentComplete"},   
{id:"start", name:"Start", field:"start"},   
{id:"finish", name:"Finish", field:"finish"},   
{id:"effort-driven", name:"Effort Driven", field:"effortDriven"}   
];  
var options_2 = {   
enableCellNavigation: false,   
enableColumnReorder: false  
}; 

$(function() {   
var data_2 = [];    
for (var i = 0; i < 500; i++) {    
data[i] = {     
title: "Task " + i,     
duration: "5 days",     
percentComplete: Math.round(Math.random() * 100),     
start: "01/01/2009",     
finish: "01/05/2009",     
effortDriven: (i % 5 == 0)    
};   
}   
grid_2 = new Slick.Grid($("#slickGrid_2"), data_2, columns_2, options_2);  
})  
</script> 

<script>   
var grid_3;  
var columns_3 = [  
{id:"title", name:"Title", field:"title"},   
{id:"duration", name:"Duration", field:"duration"},   
{id:"%", name:"% Complete", field:"percentComplete"},   
{id:"start", name:"Start", field:"start"},   
{id:"finish", name:"Finish", field:"finish"},   
{id:"effort-driven", name:"Effort Driven", field:"effortDriven"}   
]; 

var options_3 = {   
enableCellNavigation: false,   
enableColumnReorder: false  
}; 

$(function() {   
var data_3 = [];    
for (var i = 0; i < 500; i++) {    
data[i] = {     
title: "Task " + i,     
duration: "5 days",     
percentComplete: Math.round(Math.random() * 100),     
start: "01/01/2009",     
finish: "01/05/2009",     
effortDriven: (i % 5 == 0)    
};   
} 
grid_3 = new Slick.Grid($("#slickGrid_3"), data_3, columns_3, options_3); 
}) 
</script> 
3

jQuery 탭의 "show"이벤트로 그리드로드를 이동해야합니다. 나는 페이지가로드되고 탭이 초기화 될 때 바로 발생하는 "탭 플래시"를 제거하기 위해 내 탭의 CSS를 전혀 표시하지 않기 때문에 document.ready/load 대신에 이러한 이벤트를 사용해야했습니다. 이게 내가 가지고있는 것입니다.

$('#tabs').tabs({ 
      fx: [ 
        {opacity: 'toggle', duration: 'fast'}, 
        {opacity: 'toggle', duration: 'fast'} 
      ], 
      show: function(event, ui) { 
        if($(ui.tab).text() == "grids" && !this.gloaded) { 
          grids.init(); 
          this.gloaded = true; 
        } 
      } 
    }); 
1

내가 겪었던 동일한 문제로 어려움을 겪고있는 것 같습니다. 동작을 숨기는 Jquery 탭은 IE 및 Chrome에서 슬릭 그리드 렌더링으로 실행됩니다. FIrefox는 잘 렌더링합니다.

.ui-tabs .ui-tabs-hide { 
    position: absolute; 
    left: -10000px; 
} 

.ui-tabs .ui-tabs-hide { display: none !important; } 

에서 - JQuery와 UI의 CSS에 다음과 같은 수정을 - 이 내가 무슨 말을하는지입니다

관련 문제