Javascript JQuery:PageSlide+Slickgrid:正在消失的列

我正在填充一个，然后用。出于某种原因，这会导致某些列消失：

当我在没有页面幻灯片的情况下填充SlickGrid时，一切正常：

编辑：问题似乎是由于在页面幻灯片之前，slickgrid选项卡容器的父div设置为display:none。有什么解决办法吗

这是我的javascript代码，但我建议看一下JS提琴，它们的信息量要大得多

function TableGrid() {
    var dataView = new Slick.Data.DataView();
    var grid = {};
    var pager = {};
    var data = [];
    var colnames = [];
    var columns = [];
    var context = {};
    var raw_data = {};
    var options = {
        editable: false,
        enableAddRow: false,
        enableCellNavigation: true
    };


    this.dataView = dataView;
    this.data = data;

    var percentCompleteThreshold = 0;
    var prevPercentCompleteThreshold = 0;
    var h_runfilters = null;

    var buildColumns = function(raw_data) {
        colnames = raw_data[0];
        columns = [];
        for (var i = 0; i < colnames.length; i++) {
            columns.push({
                id: "col_" + i,
                name: colnames[i],
                field: colnames[i]
            });
        }
    };
    this.buildGrid = function(raw_data) {
        buildColumns(raw_data);
        fillGrid(raw_data);
        update(dataView);
    };
    var update = function(dataView) {
        dataView.beginUpdate();
        dataView.setItems(data);
        dataView.endUpdate();
    };
    this.update = update;



    var DataItem = function(row) {
        arguments.callee.counter = arguments.callee.counter || 0;
        this.id = "r_id_" + arguments.callee.counter;
        for (var i = 0; i < row.length; i++) {

            this[colnames[i]] = row[i];
        }
        arguments.callee.counter++;
    };


    var fillGrid = function(raw_data) {

        // prepare the data
        for (var i = 1; i < raw_data.length; i++) {
            row = raw_data[i];
            data[i - 1] = new DataItem(row);
            console.log(data[i - 1]);
        }
        console.log("preparing data view");
        grid = new Slick.Grid("#myGrid", dataView, columns, options);
        pager = new Slick.Controls.Pager(dataView, grid, $("#pager"));

        // wire up model events to drive the grid
        dataView.onRowCountChanged.subscribe(function(e, args) {
            grid.updateRowCount();
            grid.render();
        });

        dataView.onRowsChanged.subscribe(function(e, args) {
            grid.invalidateRows(args.rows);
            grid.render();
        });
        this.fillGrid = fillGrid;

        // initialize the model after all the events have been hooked up


    };

}

var rd = [["Date/Time", "Air Temp. (F°) ", "Dew Point Temp. (F°) ", "Sea Level Pressure (hPa) ", "Wind Direction (°) ", "Wind Speed Rate (mph) ", "Liquid Precipitation Depth Six Hr (\") ", "Precip. Depth (1 Hr) (\") "], ["12/01/2012 12:00 am", 42, "--", 1029.3, 40, 3.4, "--", "--"], ["12/01/2012 1:00 am", 40, "--", 1030.1, 20, 3.4, "--", "--"], ["12/01/2012 2:00 am", 39, "--", 1030.3, 30, 2.2, "--", "--"], ["12/01/2012 3:00 am", 37, "--", 1030.2, 50, 5.8, "--", "--"], ["12/01/2012 4:00 am", 38, "--", 1030.2, 70, 3.4, "--", "--"], ["12/01/2012 5:00 am", 39, "--", 1030.5, 80, 2.2, "--", "--"], ["12/01/2012 6:00 am", 40, "--", 1030.6, 60, 4.7, "--", "--"], ["12/01/2012 7:00 am", 40, "--", 1030.8, 60, 4.7, "--", "--"], ["12/01/2012 8:00 am", 40, "--", 1030.8, 40, 5.8, "--", "--"], ["12/01/2012 9:00 am", 38, "--", 1030.9, 60, 5.8, "--", "--"], ["12/01/2012 10:00 am", 37, "--", 1030.9, 40, 5.8, "--", "--"], ["12/01/2012 11:00 am", 37, "--", 1031.2, 40, 5.8, "--", "--"], ["12/01/2012 12:00 pm", 38, "--", 1031.6, 60, 5.8, "--", "--"], ["12/01/2012 1:00 pm", 38, "--", 1032.1, 50, 9.2, "--", "--"], ["12/01/2012 2:00 pm", 38, "--", 1031.9, 40, 5.8, "--", "--"], ["12/01/2012 3:00 pm", 37, "--", 1033, 40, 3.4, "--", "--"], ["12/01/2012 4:00 pm", 37, "--", 1033.1, 50, 5.8, "--", "--"], ["12/01/2012 5:00 pm", 38, "--", 1031.9, 70, 5.8, "--", "--"], ["12/01/2012 6:00 pm", 39, "--", 1031.2, 50, 5.8, "--", "--"], ["12/01/2012 7:00 pm", 39, "--", 1030.8, 50, 5.8, "--", "--"], ["12/01/2012 8:00 pm", 39, "--", 1030.4, 50, 5.8, "--", "--"], ["12/01/2012 9:00 pm", 39, "--", 1030.7, 50, 5.8, "--", "--"], ["12/01/2012 10:00 pm", 39, "--", 1030.8, 40, 5.8, "--", "--"], ["12/01/2012 11:00 pm", 40, "--", 1031.3, 50, 4.7, "--", "--"], ["12/02/2012 12:00 am", 40, "--", 1031.4, 50, 6.9, "--", "--"], ["12/02/2012 1:00 am", 40, "--", 1031.1, 50, 4.7, "--", "--"], ["12/02/2012 2:00 am", 40, "--", 1030.6, 40, 4.7, "--", "--"], ["12/02/2012 3:00 am", 41, "--", 1030.1, 50, 5.8, "--", "--"], ["12/02/2012 4:00 am", 41, "--", 1030, 40, 6.9, "--", "--"], ["12/02/2012 5:00 am", 41, "--", 1029.9, 50, 8.1, "--", "--"], ["12/02/2012 6:00 am", 42, "--", 1029.4, 20, 2.2, "--", "--"], ["12/02/2012 7:00 am", 42, "--", 1029.2, 30, 3.4, "--", "--"], ["12/02/2012 8:00 am", 42, "--", 1028.7, 60, 2.2, "--", "--"], ["12/02/2012 9:00 am", 42, "--", 1028.2, 40, 2.2, "--", "--"], ["12/02/2012 10:00 am", 42, "--", 1028, 20, 4.7, "--", "--"], ["12/02/2012 11:00 am", 42, "--", 1028, 30, 5.8, "--", "--"], ["12/02/2012 12:00 pm", 42, "--", 1028.2, 0, 0, "--", "--"], ["12/02/2012 1:00 pm", 42, "--", 1027.9, "--", "--", "--", "--"], ["12/02/2012 2:00 pm", 42, "--", 1026.9, 190, 3.4, "--", "--"], ["12/02/2012 3:00 pm", 42, "--", 1026.9, 190, 2.2, "--", "--"], ["12/02/2012 4:00 pm", 43, "--", 1026.6, 280, 2.2, "--", "--"]];
tableGrid = {};
$(document).ready(function() {
    tableGrid = new TableGrid();
    tableGrid.buildGrid(rd);
});​





​