2011-01-24 15 views
7

मैं एकाधिक slickGrids बना रहा हूं और उन्हें एक jQuery टैब में डालता हूं। पहला jQuery टैब पर पहला स्लिपग्रिड ठीक काम करता है, लेकिन जब मैं अगले टैब पर स्विच करता हूं तो स्लिकग्रिड पर डेटा कॉलम तब तक दिखाई नहीं देता जब तक कि आप हेडर का आकार बदल नहीं लेते हैं और कॉलम हेडर पर गठबंधन नहीं होते हैं। क्या किसी तरीके से मे इसे ठीक कर सकता हूँ?jQuery sls में एकाधिक 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

ठीक है। खैर, मैं कोशिश कर रहा हूं कि क्या हो रहा है और क्यों और न ही काम कर रहा है। असल में क्या हो रहा है यह है कि आप अपनी स्लिक्ग्रिड पहचान शुरू करने से पहले अपने टैब सेट कर रहे हैं। यह जानना महत्वपूर्ण है, क्योंकि आपके दूसरे और तीसरे टैब को अनिवार्य रूप से एक छिपी हुई स्थिति दी जाती है और आपके स्लिक्ग्रिड शुरू नहीं हो रहे हैं।

आदेश बदलने का प्रयास करें और देखें कि क्या यह काम करता है। यदि ऐसा नहीं होता है तो मैं आपके 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 टैब के "शो" ईवेंट में ले जाना चाहिए। मुझे 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

लगता है जैसे आप संभवतः एक ही मुद्दा मैं में चल रहा था के साथ संघर्ष कर रहे हैं: कुछ इस तरह है कि मैं क्या है। जेवीरी टैब छुपा व्यवहार आईई और क्रोम पर slickgrid प्रतिपादन में चलाता है। FIrefox इसे ठीक प्रस्तुत करता है। jQuery यूआई सीएसएस के लिए निम्न संशोधन करें - -

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

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

से

यह मैं क्या बात कर रहा हूँ है