multiple slickGrid en las pestañas jQuery

Question

Estoy creando múltiples slickGrids y las coloco en una pestaña jQuery. El primer slickGrid en la primera pestaña jQuery funciona bien, pero cuando cambio a la siguiente pestaña las columnas de datos en el slickGrid no aparecen hasta que cambie el tamaño del encabezado y las columnas no estén alineadas con el encabezado. ¿Hay alguna manera de que pueda arreglar esto? aquí está mi código 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

Bien. Bueno, intentaré analizar qué está pasando y por qué no funciona. Básicamente, lo que está sucediendo es que estás configurando tus pestañas antes de inicializar tus interfaces de slickgrid. Es importante saber esto, ya que la segunda y la tercera pestañas se asignan esencialmente como un estado oculto y, por lo tanto, sus slickgrids no se inicializan.

Intente cambiar el orden y vea si eso funciona. Si no es así, le recomiendo que ponga sus inicializadores slickfgrid en document.ready y su inicializador de pestañas en document.load. Es un poco hacky, pero produce buenos resultados.

Espero que esto tenga sentido.

Answer 2

esto básicamente es una reconstrucción de códigos de mi jQuery, este código es generado dinámicamente por un código 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

Debe mover la carga de la cuadrícula al evento "mostrar" de la pestaña jQuery. Tuve que usar estos eventos en lugar de document.ready/load porque no tengo el CSS de mis pestañas desplegado ninguno para eliminar la "pestaña flash", incluso eso sucede justo cuando la página se carga y las pestañas se están inicializando. Algo como esto es lo que tengo:

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

Parece que posiblemente estés teniendo problemas con el mismo problema con el que me estaba encontrando. El comportamiento de ocultación de las pestañas Jquery se ejecuta en la representación de SlickGrid en IE y Chrome. FIrefox lo hace bien. Esto es lo que estoy hablando - hacer la siguiente modificación a CSS jQuery UI -

de

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

a

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