如何在JQ Grid单元格title属性中添加可交互Font Awesome图标？

嘿，我明白你的需求——想在JQ Grid单元格悬停时显示带Font Awesome图标的提示框，还能点击图标执行操作对吧？问题出在浏览器原生的title属性只会渲染纯文本，不会解析HTML，所以你直接把<i>标签塞进去，只会显示成字符串，不会变成图标。不过没关系，咱们可以利用你已经在用的Bootstrap或者jQuery UI的tooltip组件来实现，正好匹配你的技术栈！

方法一：用Bootstrap Tooltip（推荐，因为你已经用了Bootstrap 3） #

这是最顺手的方案，步骤很简单：

1. 修改colModel的cellattr配置：
   给单元格加上Bootstrap tooltip需要的属性，开启HTML解析：

   $(document).ready(function() {
       $("#yourGridId").jqGrid({
           // 你的其他grid配置...
           colModel: [
               // 其他列配置...
               {
                   name: 'name', 
                   index: 'name', 
                   width: 70,
                   cellattr: function(rowId, val, rawObject, cm, rdata) {
                       // 这里用转义的双引号包裹class，避免语法冲突
                       return 'data-toggle="tooltip" data-html="true" title="<i class="fa fa-edit"></i> <i class="fa fa-trash"></i>"';
                   }
               }
           ],
           // 表格加载完成后初始化tooltip
           loadComplete: function() {
               $('[data-toggle="tooltip"]').tooltip();
           }
       });
   });
   

2. 关键注意点：

   • 确保你已经正确引入了Bootstrap的JS文件（Bootstrap 3的tooltip依赖jQuery，所以jQuery得先加载）
   • data-html="true"是核心，告诉Bootstrap tooltip要解析HTML内容
   • title里的双引号必须转成"，不然会打断HTML属性的语法

方法二：用jQuery UI Tooltip #

如果你更习惯用jQuery UI的组件，也可以这么做：

$(document).ready(function() {
    $("#yourGridId").jqGrid({
        // 你的其他grid配置...
        colModel: [
            // 其他列配置...
            {
                name: 'name', 
                index: 'name', 
                width: 70,
                cellattr: function(rowId, val, rawObject, cm, rdata) {
                    // 用自定义属性存储tooltip的HTML内容
                    return 'data-tooltip-content="<i class="fa fa-edit"></i> <i class="fa fa-trash"></i>"';
                }
            }
        ],
        loadComplete: function() {
            $('#yourGridId td').tooltip({
                content: function() {
                    return $(this).data('tooltip-content');
                },
                html: true // 开启HTML解析
            });
        }
    });
});

给图标添加点击事件 #

光显示图标还不够，得让它们能触发操作！以Bootstrap tooltip为例，我们可以在tooltip显示后绑定点击事件：

// 监听tooltip显示完成的事件，给图标绑定点击逻辑
$(document).on('shown.bs.tooltip', '[data-toggle="tooltip"]', function() {
    // 编辑图标点击事件
    $('.tooltip .fa-edit').click(function() {
        // 获取当前行的ID（JQ Grid的单元格ID格式是"gridId_rowId"）
        var rowId = $(this).closest('td').attr('id').split('_')[1];
        alert('开始编辑行：' + rowId);
        // 这里替换成你的编辑逻辑，比如打开编辑弹窗
    });

    // 删除图标点击事件
    $('.tooltip .fa-trash').click(function() {
        var rowId = $(this).closest('td').attr('id').split('_')[1];
        if(confirm('确定要删除这行吗？')) {
            // 调用JQ Grid的删除方法
            $("#yourGridId").jqGrid('delRowData', rowId);
        }
    });
});

这样就能实现你想要的效果：悬停单元格显示两个Font Awesome图标，点击分别执行编辑和删除操作啦！

内容的提问来源于stack exchange，提问作者Pavan