multiple slickGrid w zakładkach jQuery

Question

Tworzę wiele slickGrids i umieszczam je na karcie jQuery. Pierwsza slickGrid na pierwszej karcie jQuery działa poprawnie, ale kiedy przejdę do następnej zakładki , kolumny danych w slickGrid nie wyświetlają się, dopóki nie zmienisz rozmiaru nagłówka, a kolumny nie zostaną wyrównane do nagłówka. Czy mogę to naprawić? oto mój kod exerp:

<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> 

Answer 1

OK. Cóż, spróbuję zepsuć to, co się dzieje i dlaczego nie działa. Zasadniczo prawdopodobne jest to, że ustawiasz zakładki przed zainicjowaniem swojej slickgrid isntances. To ważne, aby wiedzieć, ponieważ twoja druga i trzecia karta są zasadniczo podane w stan ukryty i dlatego twoje slickgrids nie inicjują.

Spróbuj zmienić kolejność i sprawdź, czy to działa. Jeśli tak nie jest, zalecam umieszczenie inicjalizatorów slickfgrid w document.ready i inicjalizatorze kart w document.load. Jest trochę hacky, ale daje dobre wyniki.

Mam nadzieję, że to ma sens.

Answer 2

to w zasadzie jest rekonstrukcją kod mojego jQuery, kod ten jest dynamicznie generowane przez kod php.

$(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> 

Answer 3

Powinieneś przenieść obciążenie siatki do zdarzenia "show" zakładki jQuery. Musiałem użyć tych zdarzeń zamiast document.ready/load, ponieważ moje CSS w kartach nie wyświetlają żadnego, aby usunąć "flashowanie karty", nawet jeśli dzieje się to poprawnie, gdy strona ładuje się, a karty są inicjowane. Coś takiego mam:

$('#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; 
        } 
      } 
    }); 

Answer 4

Wygląda na to, że prawdopodobnie zmagasz się z tym samym problemem, na który się natknąłem. Zachowanie ukrywające karty Jquery prowadzi do renderowania slickgrid na IE i chrome. FIrefox czyni to dobrze. To, co mówię - Dodać następującą modyfikację jQuery UI CSS -

z

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

do

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