grid列内容省略,鼠标悬停样式修改

时间:2019-10-15
本文章向大家介绍grid列内容省略,鼠标悬停样式修改,主要包括grid列内容省略,鼠标悬停样式修改使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
//css样式
<style>
    div[role=tooltip].k-tooltip {
        padding: 2px;
        background: #5c9acf;
    }

    .k-tooltip-content {
        padding: 4px;
        text-align: left;
        background: #fff;
        color: #666;
    }

    .k-callout {
        border-bottom-color: #5c9acf;
    }
</style>
//绑定grid修改样式
//add tooltip
    $("#grid").kendoTooltip({
        show: function (e) {
            if ($.trim(this.content.text()) != "") {
                $('[role="tooltip"]').css("visibility", "visible");
            }
        },
        hide: function () {
            $('[role="tooltip"]').css("visibility", "hidden");
        },
        filter: "td:nth-child(n+3)",
        content: function (e) {
            var element = e.target[0];
            if (element.offsetWidth < element.scrollWidth) {
                var text = $(e.target).text();
                return '<div style="min-width:100px;max-width: 1000px;">' + text + '</div>';
            } else {
                $('[role="tooltip"]').css("visibility", "hidden");
                return "";
            }

        }
    });

原文地址:https://www.cnblogs.com/yt-yt/p/11677630.html