您可以在jquerygrid（jqgrid）单元格中显示图像或任何自定义HTML吗？

我在文档中没有看到任何内容，但我正在尝试将html表中呈现的代码转换为jquery网格，但缺少的一点是，许多列中都有图像或其他我希望在网格中显示的特殊html，这可能不是您想要的答案，但是将从HTML表构造一个网格。它具有客户端分页、排序、筛选、客户端编辑和Ajax回调功能，这些功能将用于服务器端分页

---

使用表格作为“源”，您可以在列中获得所需的内容。

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

返回HTML元素作为网格列的数据。不要对src使用“或”，它将无法正常工作。字段应如下所示：

---

如果要向jqGrid的单元格中添加映像，必须使用hack，如果您的数据类型是“client”，那么它将很好地工作

在变量中设置图像

var crossImg=“设置图像的html src”

将模型设置为这样

{名称：'delImage'，索引：'delImage'，对齐：'center'，宽度：40，可编辑：false，格式化程序：'integer'，格式化选项：{defaultValue:crossImg}}

$（“#yourTableID”）.jqGrid({
url:“”
，数据类型：“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'}]
，自动高度：true
，autowidth:true
，rowNum:15
，行列表：[15,20,30,50]
，传呼机：“#传呼机”
，sortname:“column1”
，viewrecords:true
，排序器：“描述”
，标题：“示例代码”
，afterInsertRow:function（rowid，aData）{
jQuery（'#yourTableID'）.setCell（rowid，'action'，''；
}
，loadComplete:function（）{
$（“#ResultCount”）.text（$（“#yourTableID”）.getGridParam（“记录”）；
}
})
.navGrid（“#第1页”
，{search:true，refresh:false，view:false，del:false，add:false，edit:false}
，{}//编辑的默认设置
，{}//添加的默认设置
，{}//删除
，{closeOnEscape:正确
，多重搜索：正确
，closeAfterSearch：对
}//搜索选项
, {}
);

---

关键在于afterInsertRow：正如你所说，它包含了你的专栏图像和数据

，对于jqgrid来说，这并不能解决问题，但这是一个很好的插件，可以满足我的需要。我不得不接受另一个答案，因为从技术上讲，这是问题+1的正确答案，但是你与专家交流的链接对我来说是不可用的。希望我能尝试一个客户m formatter将我的图像名称包装在一个IMG标记中，这会起作用。如果你用\转义它们，你可以添加“s”。当我尝试将其放入我的代码中时，我遇到了以下错误：键入“Trirand.Web.UI.WebControls.JQGridColumn”没有名为“IMG”的公共属性。我的答案是专门针对jqGrid的JavaScript版本的。听起来你是这样的使用带有服务器端集成的ASP或PHP版本之一。您可能需要发布代码，让我们更好地了解正在发生的事情。我建议您作为一个新问题这样做。

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

$("#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
            , {}
          );