Question

我想在我的jQGrid中使用一个图像列，我使用了格式化程序，但是没有用，请给我解决方法。

我的代码如下：

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' />



        }

请帮帮我

谢谢里兹

Answer 1

你可以在格式化程序中将img标记作为字符串返回，例如：

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 + "' />";
  };

如下所述： http://tpeczek.com/2009/11/jqgrid-and-aspnet-mvc-formatting.html

Answer 2

有关在单元格中显示图像的说明，请参阅can-you-have-images-or-any-custom-html-displayed-in-jquery-grid-jqgrid-cells。

基本上，您可能需要从src元素中删除引号。

Answer 3

可以直接从查询中获得一个简单的解决方案：

选择idres，'HTML-IMG-SRC = images / tick_'||保留|| '.png'作为保留，indate，从表中过时; - 查询postgres

保留为0或1，并在图像文件名“tick_1.png”或“tick_0.png”中反映，具体取决于字段的'reserved'值

希望有所帮助

Answer 4

我找到了这个解决方案。

如果在您的页面中通过插入脚本和样式表仅包含表格，并且在包含grid.php页面之后，您可以格式化单元格以这种方式显示图像：

将以下代码放在grid.php中：

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

然后，以这种方式输入一个字符串变量，formatImage函数的java脚本：

$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;

并且在grid-＆gt; renderGrid之上，以这种方式设置JavaScript代码：

$grid->setJSCode($IMAGE_FORMAT_STRING);

我希望它有所帮助！

jqGrid中的图像列？

4 个答案: