IE9 で Slickgrid のレンダリングに問題があります。（いつものように、他のすべてのブラウザは正常に動作しています）。ちょっと説明が難しいのでスクリーンショットを撮ってみました。
1.) 多くのデータを表示する標準の Slickgrid があります。
すべてが完璧に見えます (IE9 でも)。
私が実装したのは、テーブルの全体の幅が 600px を下回ると、表示スタイルが変わるということです。列モデルを 2 列に変更し、この列のフォーマッターを自分で実装しました。グリッドを小さくすると、次のようになります。
問題ないように見えますが、すべて最初のエントリのように表示されるはずです (他のブラウザと同様)。そして次に気付くのは、一部のエントリが他のエントリよりも「大胆」であるということです。2回か何かで描かれているようです。
幅を通常に戻すと、問題が悪化します。
古い (薄い) テーブル スタイル (またはその一部) がまだテーブルにレンダリングされているようです。
そして、私が今、薄いものから広いものに、または元に戻すたびに、それは悪化します:
コードの一部で、次のようにテーブルをインスタンス化します。
this.grid = grid = new Slick.Grid(this.el, dataView, columns, options);
grid.setSelectionModel(new Slick.RowSelectionModel());
グリッドはモジュールに保持され、このインスタンス化コードはモジュールの開始時に1 回だけ実行されます。
その後、そのモジュールには、グリッドを処理する render メソッドがあります。
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で魅力的に機能しています!
これについて何か考えはありますか？この長い質問を読んでくれてありがとう！