7

複数の slickGrids を作成し、それらを jQuery タブに配置しています。最初の jQuery タブの最初の slickGrid は正常に動作しますが、次のタブに切り替えると、ヘッダーのサイズを変更して列がヘッダーに揃えられなくなるまで、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>
4

4 に答える 4

9

わかった。さて、私は何が起こっているのか、なぜそれがうまくいかないのかを分析しようとします. 基本的に、スリックグリッドインスタンスを初期化する前にタブを設定している可能性があります。2 番目と 3 番目のタブには基本的に非表示の状態が与えられているため、slickgrids は初期化されていないため、これは知っておくことが重要です。

順序を変更してみて、それが機能するかどうかを確認してください。そうでない場合は、slickfgrid 初期化子を document.ready に、タブ初期化子を document.load に配置することをお勧めします。少しハックですが、良い結果が得られます。

これが理にかなっていることを願っています。

于 2011-01-24T02:42:27.917 に答える
3

グリッドの読み込みを jQuery タブの「表示」イベントに移動する必要があります。document.ready/load の代わりにこれらのイベントを使用する必要がありました。これは、ページが読み込まれてタブが初期化されているときに発生する「タブ フラッシュ」を削除するために、タブの CSS を何も表示しないためです。このようなものは私が持っているものです:

    $('#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;
                    }
            }
    });
于 2011-01-24T23:22:23.197 に答える
1

あなたはおそらく私が遭遇したのと同じ問題に苦しんでいるようです。動作を非表示にするJqueryタブは、IEおよびchromeでslickgridレンダリングに遭遇します。FIrefoxはそれをうまくレンダリングします。これが私が話していることです-jqueryUICSSに次の変更を加えます-

から

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

に

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}
于 2012-12-20T17:26:03.633 に答える
0

これは基本的に、私の jquery のコード再構成です。このコードは、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>
于 2011-01-24T02:40:26.927 に答える