行末的 Kendo Grid 工具提示答案

【问题标题】：Kendo Grid tooltip at the end of row行末的 Kendo Grid 工具提示
【发布时间】：2020-10-21 08:08:59
【问题描述】：

我正在使用剑道网格，我想在用户悬停该行时实现一个操作栏。我找到了example solution。但我正在寻找在行尾而不是当前悬停列显示工具提示。那么如何获取用户当前停留在的最后一列呢？

【问题讨论】：

标签： javascript jquery kendo-ui kendo-tooltip

【解决方案1】：

将:last-child 添加到filter 属性：

filter: "tbody td:last-child",

演示：

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/grid/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.default-v2.min.css" />

    <script src="https://kendo.cdn.telerik.com/2020.2.513/js/jquery.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2020.2.513/js/kendo.all.min.js"></script>
    
    

</head>
<body>

<div id="example">
    <div id="grid"></div>
    <script>
        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                    },
                    pageSize: 20
                },
                height: 550,
                groupable: true,
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                columns: [{
                    template: "<div class='customer-photo'" +
                    "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
                    "<div class='customer-name'>#: ContactName #</div>",
                    field: "ContactName",
                    title: "Contact Name",
                    width: 500
                }, {
                    field: "ContactTitle",
                    title: "Contact Title",
                    width: 300
                }, {
                    field: "CompanyName",
                    title: "Company Name",
                    width: 300
                }, {
                    field: "Country",
                    width: 300
                }]
            });
        });
      
      $("#grid").kendoTooltip({
        position: "right",
        callout: false,
        filter: "tbody td:last-child",
        content: function(e) {
          
          return "<button class='k-button' ><span class='k-icon k-i-trash'></span></button>&nbsp;<button class='k-button'><span class='k-icon k-i-email'></span></button>&nbsp;<button class='k-button'><span class='k-icon k-i-warning'></span></button>";
        }
      });
    </script>
</div>

<style type="text/css">
    .customer-photo {
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-size: 32px 35px;
        background-position: center center;
        vertical-align: middle;
        line-height: 32px;
        box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
        margin-left: 5px;
    }

    .customer-name {
        display: inline-block;
        vertical-align: middle;
        line-height: 32px;
        padding-left: 3px;
    }
</style>


</body>
</html>

Dojo

【讨论】：