Javascript 将KendoUI网格中的每一行的行详细信息显示为鼠标悬停时的弹出窗口/ToopTip表单

我有一个充满数据和数据的网格 我只想显示3或2列，隐藏其余的列，因为网格非常宽。 当鼠标悬停在一行上时，我希望以弹出/工具提示形式显示该行的所有列

请帮我做这个。我搜索了很多，只找到了可编辑的弹出窗口和按钮点击，而不是与悬停

function PopulateGrid() {
    $("#recentNews").kendoGrid({

        columns: [
            { field:      'Date', title: 'Date', width: 80,
                template: '#=kendo.toString(toDate(NewsDate), "yyyy/MMM/dd") #'
            },
            { field:      'TradeTime', title: 'Time', width: 60,
                template: '#=kendo.toString(toDate(NewsTime), "hh:mm:ss") #'
            },

            { field: 'Title', title: 'Description', width: 200 },
            { field: 'Country', title: 'Country', width: 40 },
            { field: 'Economy', title: 'Economoy', width: 40 }

        ],

        dataSource: {
            transport: {
                read: {
                    url:      'Home/GetNews',
                    dataType: "json",
                    type:     "POST"
                }
            },
            schema:    {
                data:  function (data) {
                    return data.data;
                },
                total: function (data) {
                    return data.total;
                }
            },
            pageSize:  100

        },
        //            change: onChange,
        //          dataBound: onDataBound,
        dataBound:  HoverOnGrid,
        pageable:   true,
        sortable:   true,
        scrollable: true,
        height:     565,
        width:      2000
    });
}

关于您尝试实施的内容，有两个不同的问题：

将鼠标悬停绑定到

网格

行（简单）

生成显示其余列的弹出窗口/工具提示（很简单，但需要一些编码）

因为您似乎已经定义了一个名为

HoverOnGrid

的函数，所以让我们将其编写为：

function HoverOnGrid() {
    $("tr", "#recentNews").on("mouseover", function (ev) {
        // Invoke display tooltip / edit row
        var rowData = grid.dataItem(this);
        if (rowData) {
            showTooltip(rowData);
        }
    });
}

其中，

网格

为：

var grid = $("#recentNews").kendoGrid({
    ...
}).data("kendoGrid";

现在，棘手的问题是，如何显示工具提示/弹出窗口。。。没有预先确定的方法，你应该自己做。您可以获得的关闭是将

HoverOnGrid

定义为：

function HoverOnGrid() {
    $("tr", "#recentNews").on("click", function (ev) {
        grid.editRow(this);
    })
}

而

网格

初始化表示：

 editable:   "popup",

但这会打开一个

弹出窗口

，但字段处于编辑模式（您可以在

dataSource.schema.model

中定义所有字段都不可编辑：

model: {
    fields: {
        Date:      { editable: false },
        TradeTime: { editable: false },
        Title:     { editable: false },
        Country:   { editable: false },
        Economy:   { editable: false }
    }
}

但是它仍然在

弹出窗口中显示
更新
和
取消
按钮

因此，我的建议是编写一段代码来创建工具提示

编辑：要隐藏
工具提示
，应首先截获
鼠标出
事件：

$("tr", "#recentNews").on("mouseout", function (ev) {
    // Hide Tooltip
    hideTooltip();
});

其中，
hideTooltip
可能非常简单：

var tooltipWin = $("#tooltip_window_id").data("kendoWindow");
tooltipWin.close()

假设您总是对
工具提示使用相同的
id
（在本例中为
工具提示\u窗口\u id
）你是否考虑使用Kunoui <代码>格式化< >代码>而不是<代码>胡佛< /代码>？非常感谢ONABAI它非常有用，我在DIV中创建了一个剑道窗口，我在悬停上显示它，但是我仍然存在一些问题。A）如何关闭/隐藏在MouSeLeaveB上。如何显示当前HOFRID行附近的弹出窗口。再次感谢您的帮助，请参阅如何关闭窗口的编辑，我认为最好使用
鼠标悬停
事件，而不是使用
鼠标悬停
事件，否则在同一行和跨单元格（至少在我的浏览器上）上水平移动鼠标时会出现一些奇怪的故障。谢谢，它确实起作用了。为了设置弹出窗口的位置，我使用了e.clientX&e.clientY..，为了在弹出窗口中发送悬停行数据，我制作了一些模板，并为所需的单元格传入了this.cell[index].innerText的值。我使用innerText而不是dataItem，因为我认为格式化所需的详细信息更容易。不过也有一些小问题，我想修复每行弹出窗口的位置，而不是e.cleintY，e.clientX。当任何一行鼠标悬停在鼠标指针上时，弹出窗口有时会有点摇晃，弹出窗口windopw会快速闪烁，特别是在firefox中。为了解决闪烁问题，我建议将
鼠标悬停
替换为
鼠标悬停
，这样，工具提示/弹出窗口实际上会跟随鼠标。谢谢您的帮助，先生：）