Tengo el siguiente jqgrid que utiliza la interfaz de usuario jquery tema importados a mi página principal.

  $("#shippingscheduletable").jqGrid({
url: $("#shippingscheduleurl").attr('href'),
datatype: 'json',
mtype: 'GET',
altRows: true,
colNames: ['Dealer', 'Model', 'Invoice', 'Date', 'PO', 'Serial', 'Status', 'City', 'State', 'IsPaid', 'Promo', 'Carrier', 'Int Notes', 'Ord Notes', 'Terms'],
colModel: [
{ name: 'Company', index: 'id', width: 125, align: 'left' },
{ name: 'Model', index: 'Model', width: 50, align: 'left' },
{ name: 'Invoice', index: 'Invoice', width: 50, align: 'left' },
{ name: 'Date', index: 'OrderDate', width: 60, align: 'left' },
{ name: 'Po', index: 'PONum', width: 75, align: 'left' },
{ name: 'Serial', index: 'Serial', width: 50, align: 'left' },
{ name: 'Status', index: 'OrderStatus', width: 70, align: 'left' },
{ name: 'City', index: 'City', width: 100, align: 'left' },
{ name: 'State', index: 'State', width: 30, align: 'left' },
{ name: 'IsPaid', index: 'IsPaid', width: 30, align: 'left' },
{ name: 'Promo', index: 'Promo', width: 50, align: 'left' },
{ name: 'Carrier', index: 'Carrier', width: 80, align: 'left' },
{ name: 'InternalNotes', index: 'InternalNotes', width: 110, align: 'left' },
{ name: 'OrderNotes', index: 'OrderNotes', width: 110, align: 'left' },
{ name: 'Terms', index: 'Terms', width: 60, align: 'left' }
],
pager: jQuery("#shippingschedulepager"),
rowNum: 100,
rowList: [100, 150, 200],
sortname: 'Company',
sortorder: "asc",
viewrecords: true,
height: '700px',
multiselect: true
});

Me gustaría cambiar el color de línea para todas las filas que tengan un verdadero valor para el IsPaid Campo. Es esto posible? si es así, ¿cómo puedo hacer esto?
He estado investigando el formato personalizado, pero no estoy seguro de si este es el enfoque correcto, ya que no puedo encontrar nada acerca de cómo cambiar el color de la tierra de nuevo.

InformationsquelleAutor twal | 2010-10-11

9 Comentarios

  1. 16

    Apenas para la referencia de los demás, aquí está el código completado. También encontré que necesitaba para agregar otra condición para cambiar el color de la fila. Necesitaba cambiar el color de línea sólo cuando el campo pagado, es cierto, y cuando el estado es completa. Este código muestra que. También se ha solucionado el problema de perder el formato de la cuadrícula se vuelve a cargar cuando la ordenación de las columnas. Espero que esto ayude a alguien más.

        var rowsToColor = [];
    jQuery(function () {
    $("#shippingscheduletable").jqGrid({
    url: $("#shippingscheduleurl").attr('href'),
    datatype: 'json',
    mtype: 'GET',
    altRows: true,
    colNames: ['Dealer', 'Model', 'Invoice', 'Date', 'PO', 'Serial', 'Status', 'City', 'State', 'Paid', 'Promo', 'Carrier', 'Int Notes', 'Ord Notes', 'Terms'],
    colModel: [
    { name: 'Company', index: 'id', width: 125, align: 'left' },
    { name: 'Model', index: 'Model', width: 50, align: 'left' },
    { name: 'Invoice', index: 'Invoice', width: 50, align: 'left' },
    { name: 'Date', index: 'OrderDate', width: 60, align: 'left' },
    { name: 'Po', index: 'PONum', width: 75, align: 'left' },
    { name: 'Serial', index: 'Serial', width: 50, align: 'left' },
    { name: 'Status', index: 'OrderStatus', width: 70, align: 'left' },
    { name: 'City', index: 'City', width: 100, align: 'left' },
    { name: 'State', index: 'State', width: 30, align: 'left' },
    { name: 'Paid', index: 'IsPaid', width: 30, align: 'left', formatter: rowColorFormatter },
    { name: 'Promo', index: 'Promo', width: 50, align: 'left' },
    { name: 'Carrier', index: 'Carrier', width: 80, align: 'left' },
    { name: 'InternalNotes', index: 'InternalNotes', width: 110, align: 'left' },
    { name: 'OrderNotes', index: 'OrderNotes', width: 110, align: 'left' },
    { name: 'Terms', index: 'Terms', width: 60, align: 'left' }
    ],
    pager: jQuery("#shippingschedulepager"),
    rowNum: 100,
    rowList: [100, 150, 200],
    sortname: 'Company',
    sortorder: "asc",
    viewrecords: true,
    height: '700px',
    multiselect: true,
    gridComplete: function () {
    for (var i = 0; i < rowsToColor.length; i++) {
    var status = $("#" + rowsToColor[i]).find("td").eq(7).html();
    if (status == "Complete") {
    $("#" + rowsToColor[i]).find("td").css("background-color", "green");
    $("#" + rowsToColor[i]).find("td").css("color", "silver");
    }
    }
    }
    });
    });
    function rowColorFormatter(cellValue, options, rowObject) {
    if (cellValue == "True")
    rowsToColor[rowsToColor.length] = options.rowId;
    return cellValue;
    }

    por lo que el formateador función añade el rowid que necesita ser cambiado a una matriz si el valor pagado es cierto, entonces, cuando la cuadrícula está completa, se cambia el css para cada id de fila, después se comprueba el valor de la 7 td, que es donde mi estado se encuentra para asegurarse de que está completa.

  2. 12

    Probé esto y trabaja para establecer el color de fondo para toda la fila. Funciona con paginación también:

    gridComplete: function()
    {
    var rows = $("#"+mygrid).getDataIDs(); 
    for (var i = 0; i < rows.length; i++)
    {
    var status = $("#"+mygrid).getCell(rows[i],"status");
    if(status == "Completed")
    {
    $("#"+mygrid).jqGrid('setRowData',rows[i],false, {  color:'white',weightfont:'bold',background:'blue'});            
    }
    }
    }
  3. 4

    Lo acerca a través de Css Jquery.

    Véase el código de abajo a las filas del conjunto con un estado Inactivo a rojo.
    Nombre de la cuadrícula es jqTable.

    setGridColors: function() {
    $('td[title="Inactive"]', '#jqTable').each(function(i) {
    $(this).parent().css('background', 'red');
    });
    }
  4. 4

    Esto me señaló en la dirección correcta, pero que no acaba de funcionar para mí con la paginación. Si ayuda a alguien, los siguientes hizo el trabajo y no usa el colModel formateador.

    Tenía que aplicar un color rojo a las células individuales con las cantidades pendientes de pago (nombre de:os) en el 9 de td en mi red. Tipo de datos se json y he usado el loadComplete la función que tiene la respuesta de datos como parámetro:

    loadComplete: function(data) {
    $.each(data.rows,function(i,item){
    if(data.rows[i].os>0){
    $("#" + data.rows[i].id).find("td").eq(9).css("color", "red");
    }
    });
    },

    Librado de los problemas de paginación que tenía y funciona en la clasificación etc..

    Por otro lado, he encontrado la loadComplete función útil para añadir información dinámica como la de cambiar el título de los textos de los resultados de la búsqueda – probablemente obvio para muchos, pero soy nuevo en json, jquery y jqgrid

  5. 1

    Para pintar la red, utilizar la función siguiente. Por ejemplo: PintarRowGrilla('#gridPreSeleccion', 3, 9, '#8FD9F1');
    9–> número de columnas de la cuadrícula:

    function PintarRowGrilla(idGrilla, idrow, nrocolumnas, color)
    {
    while(nrocolumnas > 0)
    {
    nrocolumnas--;
    jQuery(idGrilla).setCell(idrow, nrocolumnas, '', {
    'background-color': color
    });
    }
    }
  6. 1

    He utilizado el de un simple selector de JQuery y aplicado mi querido estilos.
    Todo lo que usted necesita es el uid (rowid) de la fila a la que desea aplicar los estilos a.

    if (!xCostCenter[i].saveSuccessful)
    {  
    $("#row" + _updatedRowIDs[i] + "jqxgrid > div").css({ "background-color": "rgb(246, 119, 119)" });
    }

    En mi caso, quería cambiar el color de las filas que no se han guardado para cambiar a un color rojo.
    Para quitar el color solo tiene que ejecutar el siguiente.

    $("#contenttablejqxgrid > div > div").css({ "background-color": "" });

    espero que esto ayude a alguien.

  7. 0
     loadComplete: function() {
    var ids = $(this).jqGrid("getDataIDs"), l = ids.length, i, rowid, status;
    for (i = 0; i < l; i++) {
    rowid = ids[i];
    //get data from some column "ColumnName"
    varColumnName= $(this).jqGrid("getCell", rowid, "ColumnName");
    //or get data from some 
    //var rowData = $(this).jqGrid("getRowData', rowid);
    //now you can set css on the row with some
    if (varColumnName=== condition) {
    $('#' + $.jgrid.jqID(rowid)).addClass('myAltRowClass');
    }
    }
    },
  8. 0

    Uso JQGrid fila evento jqGridRowAttr para el establecimiento de ningún tipo de formato. Para más detalles, consulte http://www.trirand.com/blog/?page_id=393/help/rowattr-triger-after-setrowdata Ejemplo los pasos para la configuración de fondo son:

    Primero establecer el CSS personalizado para el formato condicional o en línea a su archivo CSS. Por ejemplo (por Favor ver el resultado en el navegador chrome)

    .bg-danger {
    background-color: #f2dede;
    }
    .bg-danger td{ background-color : #ff0000ad; }

    Añadir fila evento justo después de ColModel

    rowattr: function (rd) {
    if (rd.FileExists == 'no') //your condition here
    {
    return { "class": "bg-danger" };
    }
    }

Dejar respuesta

Please enter your comment!
Please enter your name here