¿Cómo agrego una clase css a filas particulares en slickGrid?

Question

He buscado en todas partes para descubrir cómo agregar una clase a una fila en particular en slickgrid. Parece que solía haber una propiedad rowCssClasses pero ya no está. Cualquier ayuda sobre esto sería extremadamente apreciada.

actualización: he descubierto mediante el getItemMetadata ... así que antes de dibujar, lo que tiene que hacer algo como esto:

dataView.getItemMetadata = function (row) { 
    if (this.getItem(row).compareThis > 1) { 
     return { 
      'cssClasses': 'row-class' 
     }; 
    } 
}; 

que inyectará que 'fila de clase' en la fila que coincide con la declaración if. Parece que esta función getItemMetadata no existe hasta que la colocas allí y slickGrid comprueba si hay algo allí. Hace difícil imaginar sus opciones, pero si busca getItemMetadata en el archivo slick.grid.js, ¡encontrará algunos tesoros ocultos! ¡Espero que esto ayude a alguien!

Si hay una forma mejor de hacerlo, háganos saber.

Answer 1

En las versiones más nuevas de SlickGrid, DataView trae su propio getItemMetadata para proporcionar formato para encabezados de grupo y totales. Sin embargo, es fácil encadenar eso con su propia implementación. Por ejemplo,

function row_metadata(old_metadata_provider) { 
    return function(row) { 
    var item = this.getItem(row), 
     ret = old_metadata_provider(row); 

    if (item && item._dirty) { 
     ret = ret || {}; 
     ret.cssClasses = (ret.cssClasses || '') + ' dirty'; 
    } 

    return ret; 
    }; 
} 

dataView.getItemMetadata = row_metadata(dataView.getItemMetadata); 

Answer 2

usted podría utilizar la función setCellCssStyles: https://github.com/mleibman/SlickGrid/wiki/Slick.Grid#wiki-setCellCssStyles

grid.setCellCssStyles (clave, hash)

clave - Una clave de cadena. Sobreescribirá cualquier información ya asociada con esta clave.

hash - Un hash de clases de CSS de celda adicionales tecleadas por número de fila y luego por id. De columna. Varias clases de CSS se pueden especificar y separar por por espacio.

Ejemplo:

{ 0: { "number_column":, "title_column" "célula-bold": "célula-título celda resaltada-" }, 4: { "percent_column" : "resaltado de celda" }}

Lo usé para resaltar los campos editados en mi grilla. No me gustó el método getItemMetadata.

Answer 3

 myDataView.getItemMetadata = function(index) 
     { 
      var item = myDataView.getItem(index); 
      if(item.isParent === true) { 
       return { cssClasses: 'parentRow' }; 
      } 
      else { 
       return { cssClasses: 'childRow' }; 
      } 
     }; 

// En mi CSS

 .parentRow { 
      background-color: #eeeeee; 
     } 
     .childRow { 
      background-color: #ffffff; 
     }