我在 IE9 中遇到了 Slickgrid 的渲染问题。（所有其他浏览器都可以正常工作）。有点难以解释，所以我截了一些截图。
1.）我有一个标准的 Slickgrid 显示大量数据：
一切看起来都很完美（在 IE9 中也是如此）。
我实现的是，当表格的整体宽度低于 600 像素时，它将改变其显示样式。我将列模型更改为两列，并自己为这些列实现了格式化程序。如果我使网格更小，它看起来像这样：
这看起来不错，但它们应该看起来都像第一个条目（就像在任何其他浏览器中一样）。接下来我注意到的是一些条目比其他条目“更大胆”。好像他们被画了两次或什么的。
如果我将宽度改回正常，问题会变得更糟：
似乎旧的（较薄的）表格样式（或其中的某些部分）仍呈现在表格中。
每次我现在从薄变宽或变回来时，情况都会变得更糟：
在我的代码的某些部分，我实例化了这样的表：
this.grid = grid = new Slick.Grid(this.el, dataView, columns, options);
grid.setSelectionModel(new Slick.RowSelectionModel());
网格保存在一个模块中，并且该实例化代码仅在模块启动时执行一次。
在那之后，在那个模块上有一个渲染方法来处理网格：
render : function() {
var data = this.model.get('data'),
dataView = this.options.dataView,
columns = [],
tableData = [],
columnModel = data[0].columnModel ? data[0].columnModel : null,
k, r, u, v, d;
//renderMode 0 = wide, 1 = compact
if(this.renderMode === 0){
this.grid.setOptions({
rowHeight: this.grid.otrStandardRowHeight
});
//is there a columnModel received from the server?
if(columnModel != null){
var modelColumns = columnModel.columns;
/* go through the columns of the columnModel and find the corresponding column
* in the data columns to keep the order of the columnModel. Also add the column width.
* */
for (u = 0; u < modelColumns.length; u++){
//get the index of the modelColumn's field value inside the data columns array
var idx = $us.indexOf(data[0].columns.keys, modelColumns[u].field);
if(idx >= 0){
columns.push( {
otrColumnIndex : idx + 1,
id : data[0].columns.keys[idx],
field : data[0].columns.keys[idx],
name : data[0].columns.labels[idx],
width: modelColumns[u].width,
sortable : true
} );
}
}
}else{
//if there is no column model add all columns in the order they arrive
for (k = 0, size = data[0].columns.keys.length; k < size; k++) {
columns.push( {
otrColumnIndex : k + 1,
id : data[0].columns.keys[k],
field : data[0].columns.keys[k],
name : data[0].columns.labels[k],
sortable : true
} );
}
}
}else if(this.renderMode === 1){
this.grid.setOptions({
rowHeight: 78
});
columns.push({id: "dataCell",
name: "Beschreibung",
formatter: this.getRenderFunction(data, 0),
width: 300,
cssClass: "compactCell",},
{id: "dateCell",
name: "Datum",
width: 150,
formatter: this.getRenderFunction(data, 1),
cssClass: "compactCell"}
);
}
//add rowdata to the table
var nextIndex = 0;
for(d = 0; d < data.length; d++){
nextIndex = data[d].nextIndex ? data[d].nextIndex : nextIndex;
for (r = 0, size = data[d].rows.length ; r < size; r++) {
var rowData = {};
rowData.id = data[d].rows[r].key;
for (v = 0; v < data[d].rows[r].values.length; v++) {
rowData[data[d].columns.keys[v]] = data[d].rows[r].values[v];
}
tableData.push(rowData);
}
}
this.grid.setColumns(columns);
//this.grid.setData(tableData);
dataView.beginUpdate();
dataView.setItems(tableData);
dataView.endUpdate();
var range = this.grid.getRenderedRange();
var viewport = this.grid.getViewport();
var diff = viewport.bottom - range.bottom;
//if there is more space to fill with rows, retrieve the next page
if(diff > 0){
this.trigger("retrieveNextPage", nextIndex);
}
}
编辑：这是一个显示问题的jsfiddle：
将问题与实际应用程序隔离开来并不容易，因此您必须点击“switchMode”按钮，该按钮的作用与应用程序中的调整大小事件完全相同。
再说一遍：这一切都在 FF、Chrome 和 Safari 中运行，就像一个魅力！
对此有任何想法吗？提前感谢您阅读这个长问题！