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

slickgrid formatter number

Question

He buscado en todas partes para averiguar cómo agregar una clase a una fila en particular en slickgrid. Parece que solía haber una propiedad rowCssClasses pero ahora se ha ido. Cualquier ayuda en esto sería extremadamente apreciada.

Actualización : Lo descubrí usando getItemMetadata ... así que antes de renderizar, debes hacer algo como esto:

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

Eso inyectará esa ''clase de fila'' en la fila que coincide con la instrucción if. Parece que esta función getItemMetadata no existe hasta que la pones allí y SlickGrid comprueba si hay algo allí. Esto hace que sea un poco difícil averiguar sus opciones, pero si busca getItemMetadata en el archivo slick.grid.js, ¡debería encontrar algunos tesoros ocultos! ¡Espero que esto ayude a alguien!

Si hay una mejor manera de hacerlo, hágamelo saber.

Answer 1

En las versiones más recientes de SlickGrid, DataView trae su propio getItemMetadata para proporcionar formato para encabezados de grupo y totales. Sin embargo, es fácil encadenar eso con tu 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

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

grid.setCellCssStyles (clave, hash)

clave - una clave de cadena. Sobrescribirá cualquier dato ya asociado con esta clave.

hash: un hash de clases CSS de celdas adicionales codificadas por número de fila y luego por ID de columna. Se pueden especificar varias clases de CSS y separarlas por espacio.

Ejemplo:

{0: {"number_column": "cell-bold", "title_column": "cell-title cell-highlight"}, 4: {"percent_column": "cell-highlight"}}

Lo usé para resaltar campos editados en mi cuadrícula. 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;
        }