jQuery Kendo Grid如何为编辑、更新、取消、删除图标添加悬浮提示

问题原因 #

Kendo Grid 内置的命令按钮不会自动识别自定义的title配置，且按钮DOM会在分页、切换编辑状态时重新渲染，单次手动添加title会在DOM刷新后失效。

解决方案 #

提供两种可直接落地的实现方式：

方案1：使用Kendo官方Tooltip组件（推荐，无需处理DOM刷新逻辑）

在现有Grid初始化代码后新增如下代码即可：

// 为Grid内的操作按钮绑定悬浮提示
$("#grid").kendoTooltip({
  filter: ".k-grid-edit, .k-grid-update, .k-grid-cancel, .k-grid-delete",
  content: function(e) {
    const target = e.target;
    if (target.hasClass("k-grid-edit")) return "编辑";
    if (target.hasClass("k-grid-update")) return "更新";
    if (target.hasClass("k-grid-cancel")) return "取消";
    if (target.hasClass("k-grid-delete")) return "删除";
  },
  position: "top"
});

方案2：手动添加原生title属性（无额外组件依赖）

修改Grid的初始化配置，新增dataBound和edit事件处理，在按钮每次重新渲染后自动添加title：

$("#grid").kendoGrid({
  // 原有配置保持不变，新增以下两个事件配置
  dataBound: function() {
    // 数据加载完成后，给未进入编辑状态的操作按钮加提示
    this.tbody.find(".k-grid-edit").attr("title", "编辑");
    this.tbody.find(".k-grid-delete").attr("title", "删除");
  },
  edit: function() {
    // 进入行编辑状态后，给编辑状态下的操作按钮加提示
    this.tbody.find(".k-grid-update").attr("title", "更新");
    this.tbody.find(".k-grid-cancel").attr("title", "取消");
  }
});

两种方案任选其一即可实现操作列图标悬浮显示对应提示的需求。

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