IE中的Slickgrid渲染问题

时间:2012-09-10 07:23:32

标签: internet-explorer slickgrid

我在IE9中遇到了Slickgrid的渲染问题。 (总之,所有其他浏览器都正常工作)。这有点难以解释所以我拍了一些截图。

1。)我有一个显示大量数据的标准Slickgrid:

Slickgrid working

一切看起来都很完美(在IE9中也是如此)。

我实现的是当表的总宽度低于600px时,它将改变其显示样式。我将列模型更改为两列,并自己为这些列实现了格式化程序。如果我使网格变小,它看起来像这样:

enter image description here

似乎没问题,但它们应该看起来像第一个条目(就像在任何其他浏览器中一样)。接下来我注意到的是,有些条目比其他条目“更大胆”。似乎他们被画了两次或什么的。

如果我将宽度改回正常状态,问题会越来越严重:

enter image description here

似乎旧的(更薄的)表格样式(或其某些部分)仍然在表格中呈现。

每当我现在从变薄变为宽或变回时,情况会变得更糟:

enter image description here

在我的代码的某些部分,我会像这样实现表:

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);
    }

}

编辑:这是一个显示问题的方法:

http://jsfiddle.net/EmSPU/26/

将问题与实际应用程序隔离并不是那么容易,因此您必须点击“switchMode”按钮,该按钮与resize事件在应用程序中完全相同。

再说一遍:所有这些都在FF,Chrome和Safari中起作用,就像魅力一样!

对此有何想法?提前感谢您阅读这个长期的问题!

1 个答案:

答案 0 :(得分:4)

答案很简单。自定义格式化程序函数中缺少关闭</p>标记。这会在IE中产生这种效果,因为它无法正确删除旧单元格。其他浏览器工作正常,因为他们自己纠正了这些错误。