datagrid 文本溢出时候鼠标经过出现提示信息tooltip

最新推荐文章于 2023-03-27 17:42:56 发布

转载最新推荐文章于 2023-03-27 17:42:56 发布 · 318 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/871735097-/p/5993660.html

文章标签：

#javascript #ViewUI

本文介绍了一种在EasyUI的Datagrid组件中，当单元格文本溢出时，通过鼠标悬停显示完整文本的实现方法。利用jQuery的tooltip功能，仅在文本超出显示范围时提供工具提示，增强用户体验。

1只有文本溢出的单元格鼠标经过才显示提示信息

$('.datagrid-cell').mouseover(function () {
            if (this.offsetWidth < this.scrollWidth) {
                var content = $(this).text();
                $(this).tooltip({
                    content: content,
                    trackMouse: true,
                    onHide: function () {
                        $(this).tooltip('destroy');
                    }
                }).tooltip('show');
            }
        });

//一下是绑定事件位置

Easyui.$myview = $.extend({}, $.fn.datagrid.defaults.view, {
    onAfterRender: function (target) {
        $.fn.datagrid.defaults.view.onAfterRender.call(this, target);
        var opts = $(target).datagrid('options');
        var vc = $(target).datagrid('getPanel').children('div.datagrid-view');
        vc.children('div.datagrid-empty').remove();
        if (!$(target).datagrid('getRows').length) {
            var d = $('<div class="datagrid-empty"></div>').html(opts.emptyMsg || 'no records').appendTo(vc);
            d.css({
                position: 'absolute',
                left: 0,
                top: 50,
                width: '100%',
                textAlign: 'center'
            });
        }
        $(target).datagrid("fixRownumber");//自适应rownumber
        $('.datagrid-cell').mouseover(function () {
　　　　　　　//判断文本是否溢出
            if (this.offsetWidth < this.scrollWidth) {
                var content = $(this).text();
                $(this).tooltip({
                    content: content,
                    trackMouse: true,
                    onHide: function () {
                        $(this).tooltip('destroy');
                    }
                }).tooltip('show');
            }
        });
    }
});
Easyui.datagrid = function (/*object*/options) {
    var $dg = $('#' + options.datagridId);
    var _options = $.extend({
        loadMsg: '数据加载中，请稍后……',
        method: 'post',
        pageList: [15, 20, 30, 50],
        pageSize: 50,
        toolbar: '#dg_toorbar',
        fit: true,
        pagination: true,
        border: false,
        rownumbers: true,
        striped: true,
        view: Easyui.$myview,
        singleSelect: true,
        fitColumns: true,
        emptyMsg: '未找到符合条件的数据',
        cache: false
    }, options);
    if (options.formId && $(options.formId).form('validate')) {
        _options.queryParams = $(options.formId).form('serialize');
    }
    $dg.datagrid(_options);
};