显示行详细信息作为弹出/顶部提示窗体鼠标悬停在每一行在KendoUI网格

Show Row Details as a Popup/ToopTip form on Mouse Hover for each row in KendoUI Grid

本文关键字：悬停 网格 KendoUI 一行 鼠标 窗体 详细信息 提示 顶部 显示      更新时间：2023-09-26

我有一个填充了数据和的网格我想只显示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
    });
}

有两个独立的问题关于你正在尝试实现什么:

  1. 将悬停绑定到Grid行(简单)。
  2. 生成一个弹出窗口/工具提示，显示其余的列(简单，但需要一些编码)。

既然你似乎已经定义了一个叫做HoverOnGrid的函数，让我们把它写成:

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

其中grid为:

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

现在，棘手的问题，如何显示工具提示/弹出…没有预先定义好的方法，你应该自己去做。您可以得到的关闭是将HoverOnGrid定义为:

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

和Grid初始化说:

 editable:   "popup",

但是这打开了一个popup，但是在编辑模式下有字段(你可以在dataSource.schema.model中定义所有字段都不可编辑:

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

但是在popup中仍然显示update和cancel按钮。

所以，我的建议是写一段代码来创建tooltip。

EDIT:为了隐藏tooltip，你应该首先拦截mouseout事件:

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

其中hideTooltip可能是简单的:

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

假设您总是为tooltip(在本例中为tooltip_window_id)使用相同的id。

相关文章：