columna de imagen en jqGrid?

Question

Quiero una columna de imagen en mi jQGrid, he utilizado un formateador, pero no funciona, por favor, dame la solución para esto.

mi código es el siguiente:

jQuery(document).ready(function() { 
     var TheGrid ; 
     var resp; 
     jQuery("#registerUsers").jqGrid({ 
       url: 'EventsList.aspx', 
       datatype: "json", 
       colNames: ['Name', 'Company Name', 'Responsible Name', 'Date/Time', 'Id'], 
       colModel: [{ name: 'GuestName', index: 'GuestName', width: 150, editable: true, editoptions: {readonly: true, size: 10} }, 
          { name: 'CompName', index: 'CompName', width: 150, editable: false, editoptions: { readonly: true, size: 10} }, 
          { name: 'RespName', index: 'RespName', width: 150, editable: false, editoptions: { readonly: true, size: 10} }, 
          { name: 'RegisterDate', index: 'RegisterDate', width: 150, editable: false, editoptions: { readonly: true, size: 10} }, 
          { name: 'Register_Id', index: 'Register_Id', width: 100, align: 'left', formatter: checkboxFormatter }, 
         ], 
       rowNum: 10, 
       rowList: [10, 20, 30], 
       pager: jQuery('#Userpager'), 
       sortname: 'Register_Id', 
       viewrecords: true, 
       sortorder: "desc", 
       imgpath: '/scripts/themes/steel/images', 
       caption: "Registered Users" 
      }); 
     }); 
     jQuery("#registerUsers").jqGrid('navGrid', '#Userpager', { edit: false, add: false, del: false }); 

    function checkboxFormatter(el, cval, opts) { 
      debugger; 
      cval = cval + ""; cval = cval.toLowerCase(); 
      //   var bchk = cval.search(/(false|0|no|off|n)/i) < 0 ? " checked=\"checked\"" : ""; 
      var UserId = jQuery("#registerUsers").getCell(RowId, 'Register_Id'); 
      $(el).html("<center><img src='../images/gnome-session-logout.png' width='15px' height='15px' onclick=javascript:LogOutUser(" + UserId + ");/></center>"); 
      //   <input type='checkbox' onclick=\"ajaxSave('" + opts.rowId + "', this);\" " + bchk + " value='" + cval + "' offval='no' /> 



     } 

Por favor, me ayudan a

Gracias Ritz

Answer 1

Ver can-you-have-images-or-any-custom-html-displayed-in-jquery-grid-jqgrid-cells para obtener instrucciones sobre cómo mostrar imágenes en las células.

Básicamente, parece que es posible que deba eliminar citas de su elemento src.

Answer 2

que sólo puede devolver la etiqueta img como una cadena en el formateador por ejemplo:

function unitsInStockFormatter(cellvalue, options, rowObject) { 
    var cellValueInt = parseInt(cellvalue); 
    if (cellValueInt > 10) 
     return "<img src='../../Content/images/ui-flag_green.png' alt='" + cellvalue + "'title='" + cellvalue + "' />"; 
    else if (cellValueInt > 0) 
     return "<img src='../../Content/images/ui-flag_blue.png' alt='" + cellvalue + "'title='" + cellvalue + "' />"; 
    else 
     return "<img src='../../Content/images/ui-flag_red.png' alt='" + cellvalue + "'title='" + cellvalue + "' />"; 
    }; 

como se describe aquí: http://tpeczek.com/2009/11/jqgrid-and-aspnet-mvc-formatting.html

Answer 3

Una solución sencilla se podría hacer directamente a partir de la consulta:

seleccionar idres, 'HTML-IMG-SRC = images/tick_' || reservado || '.png' como reservado, indate, outdate de la tabla; - postgres consulta de

Dónde reservados es 0 ó 1 y refleja en el nombre de archivo de imagen "tick_1.png" o "tick_0.png" dependiendo el valor del campo de 'reservada'

creo que sirve

Answer 4

encontré esta solución.

Si en su página de incluir sólo la tabla mediante la inserción de los scripts y hojas de estilo y después de incluir la página grid.php, puede dar formato a la celda para mostrar la imagen de esta manera:

poner el código a continuación en la cuadrícula. php:

$grid->setColProperty("COLUMN NAME", array("formatter"=>"js:formatImage")); 

Luego, se coloca en una variable de cadena, el java script para la función formatImage esta manera:

$IMAGE_FORMAT_STRING = <<<IMAGE_FORMAT_FUNCTION 
function formatImage(cellValue, options, rowObject) { 
    var imageHtml = ""; 
    if(cellValue){ 
     if(cellValue.indexOf("_thumb") == -1){ 
      imageHtml = '<div><a href="' + cellValue + '" title="" target="_blank">' + cellValue + '</a></div>';  
     }else{ 
      imageHtml = '<div class="gallery"><a href="' + cellValue.replace('_thumb', '') + '" title=""><img src="' + cellValue + '" width="50" height="50" alt="" border="0"/></a></div>'; 
     } 
    } 
    return imageHtml; 
} 
function unformatImage(cellValue, options, cellObject) { 
    return $(cellObject.html()).attr("originalValue"); 
} 
IMAGE_FORMAT_FUNCTION; 

y por encima de la GRID> renderGrid, puesto establezca el código JavaScript de esta manera:

$grid->setJSCode($IMAGE_FORMAT_STRING); 

Espero que ayude a alguien!