Проблемы с отображением Slickgrid в IE

Question

Я получаю рендеринг Проблема с Slickgrid в IE9. (Как всегда, все остальные браузеры работают нормально). Это немного сложно объяснить, поэтому я сделал несколько скриншотов.

1.) У меня есть стандартный Slickgrid отображения много данных:

Все выглядит отлично (В IE9 тоже).

Что я реализовал, так это то, что когда общая ширина таблицы будет меньше 600 пикселей, она изменит свой стиль отображения. Я изменил модель столбца на два столбца и внедрил formatters для этих столбцов. Если я сделать сетку меньше это выглядит следующим образом:

Это кажется в порядке, но они должны выглядеть все, как первый вход (как они делают в любом другом браузере). И следующее, что я замечаю, это то, что некоторые из записей «смелее», чем другие. Кажется, что они рисуются дважды или что-то в этом роде.

Если я изменить ширину вернуться к нормальной жизни проблемы становятся все хуже:

Похоже, старый (тоньше) стиль таблицы (или некоторые его части) по-прежнему отображаются в таблице ,

И каждый раз, когда я в настоящее время переход от тонкой до широкой или спине она будет еще хуже:

В какой-то части моего кода я создании экземпляра таблицы, как это:

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

} 

EDIT: Вот jsfiddle, чтобы показать проблему:

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

Это WASN 't, что легко изолировать проблему от реального приложения, поэтому вам нужно нажать кнопку «switchMode», которая будет точно такой же, как событие изменения размера в приложении.

Снова: все это работает в FF, Chrome и Safari, как шарм!

Любая идея по этому вопросу? Заранее спасибо за прочтение этого длинного вопроса!

Answer 1

Ответ очень прост. В пользовательской функции форматирования был закрыт тег </p>. Что лижет этого эффекта в IE, потому что он не может правильно удалить старые ячейки. Другие браузеры работают правильно, потому что сами исправляют такие ошибки.