Kendo Grid - 悬停时获取单元格索引答案

【问题标题】：Kendo Grid - Get cell index on hoverKendo Grid - 悬停时获取单元格索引
【发布时间】：2018-07-31 16:18:40
【问题描述】：

我正在尝试将 kendoToolTip 添加到网格上特定列的单元格中。现在，工具提示有效，但它会在将鼠标悬停在网格上的任何单元格上时显示。

我想获取我悬停在上面的项目的特定单元格索引，这样我只能在例如悬停在单元格索引 9 上时显示工具提示。

我的代码总是返回 -1 的单元格索引。我可以让它与 onclick 事件一起使用，但我无法让它在悬停时使用。

任何帮助将不胜感激。

    $("#samplerequest-grid").kendoTooltip({
        filter: "td",
        content: function(e) {
            var grid = $("#samplerequest-grid").data("kendoGrid");
            var dataItem = grid.dataItem(e.target.closest('tr'));
            var rowIdx = $("tr", grid.tbody).index(dataItem);
            var colIdx = $("td", dataItem).index(this); // Always returns -1

            console.log("row:" + rowIdx + " col:" + colIdx + " msg: " + dataItem.sampleStatusMsg);
            return dataItem.sampleStatusMsg;
        }
    });

更新：

感谢您的回答。他们都可以工作，我可能会改变我的解决方案来使用它们。在看到您的答案之前，我确实找到了自己的解决方案，即向单元格添加模板并过滤该 ID。

网格列声明：

{
   field: "sampleStatus",
   title: "Sample Status",
   width: "110px",
   locked: true,
   lockable: true,
   template: "<span id='sampStatus'>#=getValue(sampleStatus)#</span>"
},

工具提示的控制器功能

$("#samplerequest-grid").kendoTooltip({
   filter: "#sampStatus",
   content: function(e) {
      var grid = $("#samplerequest-grid").data("kendoGrid");
      var dataItem = grid.dataItem(e.target.closest('tr'));
      return dataItem.sampleStatusMsg;
   }
});

【问题讨论】：

标签： javascript jquery kendo-ui kendo-grid kendo-tooltip

【解决方案1】：

我认为你在这里把事情复杂化了。您可以通过以下方式获取索引：

e.target.index()单元格索引；
e.target.closest('tr') 行索引。

你content的事件应该是：

content: function(e) {
    var grid = $("#samplerequest-grid").data("kendoGrid");
    var tr = e.target.closest('tr');
    var dataItem = grid.dataItem(tr);
    var rowIdx = tr.index();
    var colIdx = e.target.index();

    console.log("row:" + rowIdx + " col:" + colIdx + " msg: " + dataItem.sampleStatusMsg);
    return dataItem.sampleStatusMsg;
}

Demo

【讨论】：

【解决方案2】：

查找索引的代码将不起作用，因为您正在 dataItem 的上下文中搜索 td 元素。另外，我不认为内容函数的上下文是当前单元格。此代码应该可以找到索引：

var row = e.target.closest('tr');                  
var colIdx = $("td", row).index(e.target);

但恕我直言，更好的方法是向列单元格添加一个类，并将相同的类添加到过滤器： https://dojo.telerik.com/@SiliconSoul/UbImUjOl

【讨论】：