您可以在 jquery 网格 (jqgrid) 单元格中显示图像或任何自定义 HTML 吗？答案

【问题标题】：can you have images or any custom HTML displayed in jquery grid (jqgrid) cells?您可以在 jquery 网格 (jqgrid) 单元格中显示图像或任何自定义 HTML 吗？
【发布时间】：2009-12-13 11:11:19
【问题描述】：

我在文档中看不到任何内容，但我正在尝试将呈现在 html 表中的代码转换为 jquery 网格，但缺少的部分是许多列中都有图像或其他专门的 html想在网格中显示

【问题讨论】：

标签： jquery html image jqgrid

【解决方案1】：

要在网格行中显示图像，this post 有一个很好的摘要：

将 HTML 元素作为网格列的数据返回。 src不要使用'或"，它不会正常工作。字段应该是这样的：

<img src=../images/my_image.jpg>

【讨论】：

+1，但是您到专家交流的链接对我来说是不可用的。希望我会尝试使用自定义格式化程序将我的图像名称包装在 IMG 标记中，这样就可以了。
如果你用 \ 转义它们，你可以添加 's
当我尝试将其放入我的代码中时，我收到此错误：类型“Trirand.Web.UI.WebControls.JQGridColumn”没有名为“img”的公共属性。
我的回答专门针对 jqGrid 的 JavaScript 版本。听起来您正在使用具有服务器端集成的 ASP 或 PHP 版本之一。您可能需要发布您的代码，以便我们更好地了解正在发生的事情。我建议您将其作为一个新问题。

【解决方案2】：

这可能不是您想要的答案，但DataTables 将从 HTML 表格中构造一个网格。它具有客户端分页、排序、过滤、客户端编辑和用于服务器端分页的 Ajax 回调函数。

将表格作为您的“来源”，您可以在列中包含您想要的任何内容。

【讨论】：

正如你所说，不能解决 jqgrid 但这是一个优秀的插件，可以满足我的需要
我不得不接受另一个答案，因为从技术上讲这是问题的正确答案

【解决方案3】：

$("#yourTableID").jqGrid({
     url: '<%= ResolveUrl("ModelClass/ModelFunction")%>'
        , datatype: "json"
        , mtype: "POST"
        , postData: { 'idofyourcolumn': $('#idofyourcolumn').val(),
            'page': $('.pagedisplay').val(), 'rows': $('#rowCount').val()
        }
        , colNames: ['YOURHEADER', 'ACTION']
        , colModel: [{ name: 'column1', index: 'column1name' },
                     { name: 'action', index: 'action', width: 10, sortable: false, align: 'center'}]
        , autoheight: true
        , autowidth: true
        , rowNum: 15
        , rowList: [15, 20, 30, 50]
        , pager: '#pager'
        , sortname: 'column1'
        , viewrecords: true
        , sortorder: "desc"
        , caption: "Sample Code"
        , afterInsertRow: function (rowid, aData) {
            jQuery('#yourTableID').setCell(rowid, 'action', '<img src="pathofyourimage/image.jpg" />');
        }
        , loadComplete: function () {
            $('#ResultCount').text($("#yourTableID").getGridParam("records"));
        }
 })

        .navGrid('#pager1'
            , { search: true, refresh: false, view: false, del: false, add: false, edit: false }
            , {} // default settings for edit
            , {} // default settings for add
            , {} // delete
            , { closeOnEscape: true
                , multipleSearch: true
                , closeAfterSearch: true
            }  // search options
            , {}
          );

关键在 afterInsertRow：它包含您的列图像和数据

【讨论】：

【解决方案4】：

如果您想将图像添加到 jqGrid 的单元格，您必须使用 hack，如果您的数据类型是“客户端”，它会很好地工作。

在变量中设置图像。
var crossImg = "为你设置图片的 html src";
像这样设置 colmodel。
{name:'delImage',index:'delImage', align:'center', width:40, editable:false,formatter: 'integer',formatoptions:{defaultValue:crossImg}}

【讨论】：