在 JQ 网格单元格属性标题中添加图标

Question

我有 2 个图标需要显示在单元格属性标题中，如下图所示，单击图标需要执行一些操作。

设计：enter image description here

我试过：

colModel: [
                    //{name: 'id', index: 'id', width: 65, align: 'center', sorttype: 'int'},
                    {name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date',
                        formatter: 'date', formatoptions: {newformat: 'd-M-Y', reformatAfterEdit: true}, datefmt: 'd-M-Y'},
                    {name: 'name', index: 'name', width: 70,
                        cellattr: function (rowId, val, rawObject, cm, rdata) {
                            return 'title="<i class = fa fa-edit></i>"';
                        }}
]

鼠标悬停在单元格上时，没有获得超棒的字体图标，而不是获得 <i class = fa fa-edit></i>

虚拟开发屏幕： enter image description here

使用了 bootstrap 3.3.7 和 font awesome 4.7 和 Jquery UI css

如何添加图标..?

Answer 1

不清楚您使用的是哪个版本的 jqGrid 以及来自哪个 jqGrid 分支（free jqGrid, commercial Guriddo jqGrid JS or an old jqGrid in version <=4.7). It's unclear which CSS framework you use: jQuery UI, Bootstrap or both. Thus I guess that you use jQuery UI. In the case you need to use tooltip 以另一种方式显示 title 信息。例如代码

$grid.tooltip({
    items: "td[title]",
    content: function() {
        var element = $(this),
            title = element.attr("title");
        if (title) {
            return '<span class="fa fa-lg fa-fw fa-edit"></span>' +
                title;
        }
    }
});

在演示中使用 https://jsfiddle.net/OlegKi/yvbt6w54/60/。结果如下图所示：

在 JQ 网格单元格属性标题中添加图标

add icons inside JQ grid cell attr title

html

javascript

jqgrid

javascript-objects

jqgrid-formatter