在 Kendo UI 网格列标题上添加悬停文本

Posted

技术标签:

【中文标题】在 Kendo UI 网格列标题上添加悬停文本【英文标题】:Adding Hovertext on KendoUI Grid Column Headers 【发布时间】:2013-11-07 20:41:42 【问题描述】:

我正在尝试将自定义悬停文本(如工具提示)添加到 KendoUI 网格中的列标题。文本应该特定于每一列,最好不要显示在标题行之外的任何内容上。 Grid 对象没有工具提示选项,但我不确定是否有办法使用 CSS 或他们的 row template 配置来做到这一点。

很想听听以前是否有人这样做过,如果这样做过,怎么做,或者是否不可能。

谢谢。

【问题讨论】:

【参考方案1】:

如果工具提示的内容是静态的,那么您可以使用columns.headerTemplate 将tooltip 添加到标题中。

Example jsFiddle.

代码:

$("#grid").kendoGrid(
    dataSource: 
        type: "odata",
        transport: 
            read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
        ,
        schema: 
            model: 
                fields: 
                    OrderID: 
                        type: "number"
                    ,
                    Freight: 
                        type: "number"
                    ,
                    ShipName: 
                        type: "string"
                    ,
                    OrderDate: 
                        type: "date"
                    ,
                    ShipCity: 
                        type: "string"
                    
                
            
        ,
        pageSize: 20,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    ,
    height: 430,
    filterable: true,
    sortable: true,
    pageable: true,
    columns: [
        field: "OrderID",
        filterable: false
    ,
        "Freight", 
        field: "OrderDate",
        title: "Order Date",
        width: 120,
        format: "0:MM/dd/yyyy",
        headerTemplate: '<span title="This is the date the order was made.">Order Date</span>'
    , 
        field: "ShipName",
        title: "Ship Name",
        width: 260,
        headerTemplate: '<span title="The company the order was shipped to.">Ship Name</span>'
    , 
        field: "ShipCity",
        title: "Ship City",
        width: 150,
        headerTemplate: '<span title="The city the order was shipped to.">Ship City</span>'
    ]
);

$("#grid").kendoTooltip(
    filter: ".k-header span"
);

【讨论】:

一点增强:filter: ".k-header .k-link span" 更准确地定位标题单元格。答案之一使过滤器弹出窗口有时不显示,因为工具提示介于两者之间。【参考方案2】:

如果您想在每个列标题上定义工具提示,您可以在网格 thead 元素上定义kendoTooltip,如下所示:

grid.thead.kendoTooltip(
    filter: "th",
    content: function (e) 
        var target = e.target;
        return $(target).text();
    
);

当您将标题悬停在任何地方时,这会显示悬停文本,而不仅仅是标题中的文本。即使列具有最小宽度并且标题的文本未以其全长显示/显示或根本未显示,也会显示工具提示。见example。


以下是 jsbin.com 上示例的完整代码,以防将来需要复制:

HTML:*

<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
 <div id="grid"></div>  
</body>
</html>

JavaScript:

var grid = $("#grid").kendoGrid(
    dataSource: 
        type: "odata",
        transport: 
            read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
        ,
        schema: 
            model: 
                fields: 
                    OrderID: 
                        type: "number"
                    ,
                    Freight: 
                        type: "number"
                    ,
                    ShipName: 
                        type: "string"
                    ,
                    OrderDate: 
                        type: "date"
                    ,
                    ShipCity: 
                        type: "string"
                    
                
            
        ,
        pageSize: 20,
        serverPaging: true
    ,
    height: 430,

    columns: [
            field: "OrderID",
            width: 250
        , 
            field: "ShipName",
            title: "Ship Name",
            width: 200

        
    ]
).data("kendoGrid");

grid.thead.kendoTooltip(
    filter: "th",
    content: function (e) 
        var target = e.target; // element for which the tooltip is shown
        return $(target).text();
    
);

【讨论】:

链接可以作为补充信息提供帮助,但link-only answers are strongly discouraged。请提供与问题相关的链接信息摘要,并说明它如何解决问题。 更好,但您应该始终提供从 jsbin 和 jsfiddle 等网站重现示例所需的完整代码,以防链接失效。绝对要像您一样将重要部分发布在自己的单独块中;然后在底部添加其余代码以供参考。我已经为你添加了。并且 +1,因为您已经证明这是有效的。【参考方案3】:

对于尝试使用 Kendo UI MVC 执行此操作的任何人,都可以使用以下逻辑来实现:

在网格DataBound 事件上创建一个javascript 函数来处理数据绑定。

JavaScript 函数中添加以下代码(在我的示例中,我将函数命名为 createToolTip()

function createToolTip() 

    $("tr > th").kendoTooltip(
        position: "top"
    );

这将创建一个工具提示以显示在网格标题上,工具提示的位置位于标题上方。

【讨论】:

以上是关于在 Kendo UI 网格列标题上添加悬停文本的主要内容,如果未能解决你的问题,请参考以下文章

形状上的文本以区分。悬停时的文本

Ext JS 网格面板:如何在鼠标悬停时显示内容

悬停效果上的角剑道网格行

Kendo UI React Dropdown悬停颜色

Kendo UI 网格过滤器在引导模式中不起作用

如何在材质 ui 卡中悬停时更改文本颜色?我想更改卡片悬停时的文本颜色而不是悬停在文本上?