Question

我正在使用kendo网格，每当用户在任何网格单元格上执行鼠标悬停时，我都想显示工具提示。以下示例工作正常，但如果我不知道用户执行鼠标悬停的列呢？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.mobile.all.min.css"/>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"> 
</script>
</head>
<body>

<div id="grid"></div>
<style>
  #grid{
    width:300px;
  }
</style>
<script>
  var grid = null;

  $(document).ready(function () {
    var dataSource = new kendo.data.DataSource({
      data: [
        {ID:1 ,Text: "Text 1"},
        {ID:2 ,Text: "Text 2"},
        {ID:3 ,Text: "Text 3"}
      ],
      schema: {
        model: {
          fields: {
            ID: { type: "number" },
            Text: { type: "string" }
          }}
      },
      pageSize: 20
    });

    grid = $("#grid").kendoGrid({
      dataSource: dataSource,
      scrollable: true,
      filterable: true,
      toolbar: ["create"],
      columns: [
        { field: "ID", width: "50px" },
        { field: "Text", width: "200px", attributes: {
          style: 'white-space: nowrap '
        }  }],
      editable: "incell"
    }).data("kendoGrid");

    $("#grid").kendoTooltip({
      filter: "td:nth-child(2)", //this filter selects the second column's cells
      position: "right",
      content: function(e){
        var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
        var content = dataItem.Text;
        return content;
      }
    }).data("kendoTooltip");
  });
</script>

</body>
</html>

所以这条线在我的情况下是不够的：

var content = dataItem.Text;

，因为： 1）我可以有field1，field2，field3等。在这种情况下，我们假设启用鼠标悬停的唯一列是名为“Text”的列。 2）我不仅需要用户执行鼠标悬停的任何单元格的值，还需要列名称。

所以我需要在工具提示中显示：

var content = "column name: " + columname + " - Value: " + columnValue;

其中columname是从任何列mouseover获取的名称，columnValue是该单元格的值。

由于

Answer 1

所以我假设您只是想要列标题和您正在悬停的特定单元格的值，如果我正确理解您的问题，而不是显示整个dataItem对象，即

{ID:1, Text:"Text Value 1"}

你只想：

 Text : Text Value 1

假设这是你想要的，那么这个道场应该会有所帮助。 http://dojo.telerik.com/uleJEbiz

以下是仅供参考的代码：

function(e){

        var grid = $('#grid').data('kendoGrid'); 
        var rowIndex = e.target.closest("tr").index(); 
        var colIndex = e.target.index(); 

        var dataItem = grid.dataItem(e.target.closest("tr"));

        var columns = grid.columns.filter(function(col){
          return !col.hidden; 
        }); 

         var content = 'Found on Row::' + rowIndex + ' Column::' + colIndex + 
         '<br/>' +  columns[colIndex].field + '::' +   dataItem[columns[colIndex].field];


        return content;
      }

我所做的就是将问题视为grid我们知道我们要查找哪一行但不一定是我们所追查的列，因为我们可能有隐藏的列，所以我们不能只看dataItem的特定索引，用于提取该项，因为它可能不正确。例如如果你有三个属性，但中间的一个被隐藏，那么你最终会得到一个不正确的值。

因此，如果只获取可见列标题，那么我们可以通过字段名称引用该属性。

我显然已经更改了内容字符串，以显示我们在网格中遇到的行和列位置。

Kendo网格工具提示未知列

1 个答案: