IE9에서 Slickgrid로 렌더링 문제가 있습니다. (항상 모든 다른 브라우저가 잘 작동하고 있기 때문에). 설명하기가 약간 어려워서 스크린 샷을 찍었습니다.IE의 Slickgrid 렌더링 문제
1) 나는 표준 Slickgrid이 많은 데이터를 표시 있습니다
모든 너무 IE9에서 (완벽한 모양).
구현 한 것은 테이블의 전체 너비가 600px 미만이되면 표시 스타일이 변경된다는 것입니다. 열 모델을 두 개의 열로 변경하고이 열의 형식자를 직접 구현했습니다. 내가 그리드 작게 경우는 다음과 같습니다 이 좋아 보인다하지만 (그들은 다른 브라우저에서와 같이)가 첫 번째 항목처럼 모든 보일 것이다
있다. 그리고 내가 알아 차린 다음 것은 엔트리 중 일부는 다른 것보다 "과장"하다는 것입니다. 두 번이나 그려진 것처럼 보입니다. 내가 다시 정상으로 폭을 변경하는 경우
문제는 점점 더 악화됩니다
아직 표에 렌더링 이전 (얇은) 테이블 스타일 (또는 그 일부)처럼 보인다 .
그리고 매번 난 폭에 얇은에서 지금 변경하거나 악화됩니다 백업 :
을 내 코드의 일부에서 내가 같은 테이블을 실체화 :
this.grid = grid = new Slick.Grid(this.el, dataView, columns, options);
grid.setSelectionModel(new Slick.RowSelectionModel());
그리드는 모듈에서 개최되며이 instanciation 코드는 모듈이 시작될 때 번만 번 실행됩니다.
즉 해당 모듈에 그리드의 렌더링 방법 돌보는이 후 :
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이야가 실제 응용 프로그램에서 문제를 쉽게 분리 할 수 있으므로 응용 프로그램에서 수행 할 resize 이벤트와 정확히 동일한 "switchMode"버튼을 누르십시오.
다시 : FF, Chrome 및 Safari와 같은 모든 기능이 매력적입니다.
이것에 대한 아이디어가 있으십니까? 이 긴 질문을 미리 읽어 주셔서 감사합니다!
jsfiddle.net의 repro가 도움이 될 것입니다. – Tin
그래, 고마워. 질문에 jsfiddle을 추가 했어. – Chris