你能在jQuery Grid（jqGrid）单元格中显示图片或自定义HTML吗？

Question

我在文档中没有看到任何内容，但我正在尝试将呈现在HTML表格中的代码转换成jQuery网格，但一个缺失的部分是许多列中都有图片或其他专门的HTML，我希望能在网格中显示它们。

- leora

Answer 1

为了在网格行中显示图像，这篇文章有一个很好的总结：

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

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

- Justin Ethier

---

+1，但你提供的 experts-exchange 链接对我来说无法使用。希望我可以尝试使用自定义格式，在我的图片名称周围包裹一个 IMG 标签，这样可能会起作用。 - David V.

如果您使用 \ 转义，那么就可以添加 's。 - Samuel Meacham

当我尝试将此代码放入我的程序中时，出现了以下错误：类型 'Trirand.Web.UI.WebControls.JQGridColumn' 没有名为 'img' 的公共属性。 - Rapunzo

我的回答是针对JavaScript版本的jqGrid。听起来你正在使用其中一个带有服务器端集成的ASP或PHP版本。您可能需要发布您的代码，以便我们更好地了解情况。我建议您将其作为新问题发布。 - Justin Ethier

Answer 2

$("#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：它包含您的列图像和数据。

- sarah

Answer 3

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

使用表格作为“源”，您可以在列中拥有任何内容。

- David Robbins

---

就像你所说的，这并不能解决jqgrid的问题，但这是一个非常好的插件，可以满足我的需求。 - leora

我不得不将“accepted”移动到另一个答案，因为从技术上讲，这是问题的正确答案。 - leora

Answer 4

如果你想要在jqGrid的单元格中添加图片，你需要使用一些技巧，而且如果你的datatype是“client”，它会很好用。

1. 将图片设置为变量。
2. var crossImg = "设置图片的HTML地址";
3. 设置colmodel如下。
4. {name:'delImage',index:'delImage', align:'center', width:40, editable:false,formatter: 'integer',formatoptions:{defaultValue:crossImg}}

- Deepak K