我正在填充一个SlickGrid，然后用PageSlide显示它。由于某种原因，这会导致某些列消失：JS Fiddle-Disappearing Columns。
当我在没有 PageSlide 的情况下填充 SlickGrid 时，一切正常：JS Fiddle - Works without PageSlide。
编辑：似乎问题是由于 slickgrid ( tab_container) 的父 div 设置为display:none在页面幻灯片之前。任何解决方法的想法？
这是我的 javascript 代码，但我建议查看 JS Fiddles，它们提供的信息要多得多。
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);
});