关于easyui tooltip

Posted 2020-09-01

相信做管理软件的同行，多多少少都接触过easyui吧。虽然easyui样式那些的确遭到不少人的吐槽，但是不得不说，它的确为我们这些做管理系统的带来不少的方便。最少是我们这些对样式不太熟悉的人确实是不错的(说句实在的，管理系统都是内部系统的比较多，谁还在意样子好不好看呢!)。

就在这段时间，我们系统要加一个提示功能。可能一个提示功能对于很多人来说不是很简单吗?确实，基于easyui的datagrid和tooltip我很快就完成了这个任务。

所以我对datagrid做了一个扩展,基于下面这段代码，我们就可以看到这里的结果。

$.fn.datagrid.methods.showTips = function (jq, params) {

var _tipField = params.tipField;
        var _valueField = params.valueField || _tipField;
        var _tds = $(jq).datagrid(‘getPanel‘).find(‘.datagrid-view .datagrid-body td[field="‘ + _tipField + ‘"]‘);
        var _rows = $(jq).datagrid(‘getRows‘);
        $(_tds).each(function (i, td) {
            $(td).bind("mouseover", function (e) {
                var _rowIndex = $(td).parent("tr").attr("datagrid-row-index");
                var _row = _rows[_rowIndex];
                var _docGuid = _row[_valueField];
                $(td).tooltip({
                    serviceGuid: _docGuid, content: "提示内容", position: "right", hideDelay: 500
                });
                $(td).unbind(‘click‘).click(function (e) {
                    e.stopPropagation()
                    flow.showByDialog(_docGuid);
                });
            });
        });
    }

可能细心的人已经留意到了，这个提示的内容是是被我们写死在那里的，无论你点哪一行，提示的内容是不会变的。那么简单的功能，相信对于很多人来说都是很快就可以实现出了。当然，动态实现，对于能写出这些js的人来说，都是易于反掌的，我就不累赘了。

但当我开发这个功能的时候，我遇到了一个问题，我们的提示，要显示的内容并不是显示一段文字那么简单呢。当然也都不难，因为tooltip的content的类容是支持hmtl的，只要把content的内容编写好，然后加载html到content里面就行了。

但是这时候问题又来了，我们看到了内容太多，出现了滚动条，如果要看完整的内容，那必须是要把鼠标放上去，才能滚动查看完整的内容。但是我们都知道，当我们把鼠标拿开了的话，那显示的类容就消失了。

 1  $.fn.datagrid.methods.showTips = function (jq, params) {
 2         var _loadDefaultContent = function () {
 3             var _tip = this;
 4             flow.loadTipContent(_tip);
 5             return ‘<div style="height:200px;width:500px;overflow:auto;"></div>‘;
 6         }
 7         var _tipField = params.tipField;
 8         var _valueField = params.valueField || _tipField;
 9         var _tds = $(jq).datagrid(‘getPanel‘).find(‘.datagrid-view .datagrid-body td[field="‘ + _tipField + ‘"]‘);
10         var _rows = $(jq).datagrid(‘getRows‘);
11         $(_tds).each(function (i, td) {
12             $(td).bind("mouseover", function (e) {
13                 var _rowIndex = $(td).parent("tr").attr("datagrid-row-index");
14                 var _row = _rows[_rowIndex];
15                 var _docGuid = _row[_valueField];
16                 $(td).tooltip({
17                     serviceGuid: _docGuid, content: _loadDefaultContent, position: "right", hideDelay: 500,
18                     onShow: function (e) {
19                         var _td = this;
20                         var _t = $(_td).tooltip(‘tip‘);
21                         _t.bind(‘mouseover‘, function () {
22                             $(_td).tooltip("show");
23                         }).bind(‘mouseleave‘, function () {
24                             $(_td).tooltip("hide");
25                         })
26                     }
27                 });
28             });
29         });
30     }

View Code

于是，我加上了这段代码。终于实现了当我们把鼠标放到提示的内容中，提示框不会消失，当我们完全离开这个提示框的时候，这个提示框会自动消失。至此，这个提示的功能基本上完善了。

但是问题又来了，tooltip的提示的内容必须是要先加载出来的，也就是说，要显示，必须先加载。如果我列表有10条数据，那么，我是得先加载10提示，当我们鼠标点到触发的地方的时候，它就显示出来。那如果我们那的提示要动态加载的呢？这确实令人头疼啊。这时候，我第一反应是，翻看文档，上网查资料，看这个tooltip是否支持异步加载。结果是否定的。于是我选择放弃easyui这个tooltip，看一下有没有支持异步加载提示的js插件，当我把百度的前10页都浏览完了，发现还是没有。可能tooltip这实在是个太简单的功能了，平常应用根本没有必要考虑到异步加载。于是乎，我决定看一下tooltip的源码，看有没有别的能切入的地方。

然后，居然还被我找到了一个合适的切入点

  function _19(_1f, _20) {
        var _21 = $.data(_1f, "tooltip");
        var _22 = _21.options;
        if (_20) {
            _22.content = _20;
        }
        if (!_21.tip) {
            return;
        }
        var cc = typeof _22.content == "function" ? _22.content.call(_1f) : _22.content;
        _21.tip.children(".tooltip-content").html(cc);
        _22.onUpdate.call(_1f, cc);
    };

我们看到这段代码，我发现，tooltip的conent不但只是支持文本的，还会支持一个方法。所以基于这个切入点于是有了下面这段代码

$.fn.datagrid.methods.showTips = function (jq, params) {
        var _loadDefaultContent = function () {
            //触发tooltip提示的对象
            var _tip = this;
            //这里写异步加载的方法,返回成功后,通过_tip这个对象调用tooltip的update方法去更新提示的内容
            flow.loadTipContent(_tip);
            //这里是先返回一个空白的div，只是先把tooltip的框加载出来
            return ‘<div style="height:200px;width:500px;overflow:auto;"></div>‘;
        }
        var _tipField = params.tipField;
        var _valueField = params.valueField || _tipField;
        var _tds = $(jq).datagrid(‘getPanel‘).find(‘.datagrid-view .datagrid-body td[field="‘ + _tipField + ‘"]‘);
        var _rows = $(jq).datagrid(‘getRows‘);
        $(_tds).each(function (i, td) {
            $(td).bind("mouseover", function (e) {
                var _rowIndex = $(td).parent("tr").attr("datagrid-row-index");
                var _row = _rows[_rowIndex];
                var _docGuid = _row[_valueField];
                $(td).tooltip({
                    serviceGuid: _docGuid, content: _loadDefaultContent, position: "right", hideDelay: 500,
                    onShow: function (e) {
                        var _td = this;
                        var _t = $(_td).tooltip(‘tip‘);
                        _t.bind(‘mouseover‘, function () {
                            $(_td).tooltip("show");
                        }).bind(‘mouseleave‘, function () {
                            $(_td).tooltip("hide");
                        })
                    }
                });
            });
        });
    }