Easyui 鼠标悬停显示单元格内容

example1:$.extend($.fn.datagrid.methods, {
    /**
     * @author SoySauce
     * 开打提示功能（基于1.3.3+版本）
     * @param {} jq
     * @param {} params 提示消息框的样式
     * @return {}
     */
    doCellTip:function (jq, params) {
        function showTip(showParams, td, e, dg) {
            //无文本，不提示。
            if ($(td).text() == "") return;
            var mycontent = $(td).text();
           
            if (mycontent.length > 18) {
//              alert("长度")
//             console.info(mycontent.length)
            
            params = params || {};
            var options = dg.data('datagrid');
            var styler = 'style="';
            if(showParams.width){
                styler = styler + "width:" + showParams.width + ";";
            }
            if(showParams.maxWidth){
                styler = styler + "max-width:" + showParams.maxWidth + ";";
            }
            if(showParams.minWidth){
                styler = styler + "min-width:" + showParams.minWidth + ";";
            }
            styler = styler + '"';
            showParams.content = '<div class="tipcontent" ' + styler + '>' + showParams.content + '</div>';
            $(td).tooltip({
                content:showParams.content,
                trackMouse:true,
                position:params.position,
                onHide:function () {
                    $(this).tooltip('destroy');
                },
                onShow:function () {
                    var tip = $(this).tooltip('tip');
                    if(showParams.tipStyler){
                        tip.css(showParams.tipStyler);
                    }
                    if(showParams.contentStyler){
                        tip.find('div.tipcontent').css(showParams.contentStyler);
                    }
                }
            }).tooltip('show');}
        };
        return jq.each(function () {
            var grid = $(this);
            var options = $(this).data('datagrid');
            if (!options.tooltip) {
                var panel = grid.datagrid('getPanel').panel('panel');
                panel.find('.datagrid-body').each(function () {
                    var delegateEle = $(this).find('> div.datagrid-body-inner').length ? $(this).find('> div.datagrid-body-inner')[0] : this;
                    $(delegateEle).undelegate('td', 'mouseover').undelegate('td', 'mouseout').undelegate('td', 'mousemove').delegate('td[field]', {
                        'mouseover':function (e) {
                            //if($(this).attr('field')===undefined) return;
                            var that = this;
                            var setField = null;
                            if(params.specialShowFields && params.specialShowFields.sort){
                                for(var i=0; i<params.specialShowFields.length; i++){
                                    if(params.specialShowFields[i].field == $(this).attr('field')){
                                        setField = params.specialShowFields[i];
                                    }
                                }
                            }
                            if(setField==null){
                                options.factContent = $(this).find('>div').clone().css({'margin-left':'-5000px', 'width':'auto', 'display':'inline', 'position':'absolute'}).appendTo('body');
                                var factContentWidth = options.factContent.width();
                                params.content = $(this).text();
                                if (params.onlyShowInterrupt) {
                                    if (factContentWidth > $(this).width()) {
                                        showTip(params, this, e, grid);
                                    }
                                } else {
                                    showTip(params, this, e, grid);
                                }
                            }else{
                                panel.find('.datagrid-body').each(function(){
                                    var trs = $(this).find('tr[datagrid-row-index="' + $(that).parent().attr('datagrid-row-index') + '"]');
                                    trs.each(function(){
                                        var td = $(this).find('> td[field="' + setField.showField + '"]');
                                        if(td.length){
                                            params.content = td.text();
                                        }
                                    });
                                });
                                showTip(params, this, e, grid);
                            }
                        },
                        'mouseout':function (e) {
                            if (options.factContent) {
                                options.factContent.remove();
                                options.factContent = null;
                            }
                        }
                    });
                });
            }
        });
//        }
    },
    /**
     * 关闭消息提示功能（基于1.3.3版本）
     * @param {} jq
     * @return {}
     */
    cancelCellTip:function (jq) {
        return jq.each(function () {
            var data = $(this).data('datagrid');
            if (data.factContent) {
                data.factContent.remove();
                data.factContent = null;
            }
            var panel = $(this).datagrid('getPanel').panel('panel');
            panel.find('.datagrid-body').undelegate('td', 'mouseover').undelegate('td', 'mouseout').undelegate('td', 'mousemove')
        });
    }
});


function doCellTip() {
    $('#dataGrid').datagrid('doCellTip', {
        onlyShowInterrupt: false,
        position: 'bottom',
        maxWidth: '200px',
        specialShowFields: [{
            //  field: 'address',
            //  showField: 'address'
        }],
        tipStyler: {
            'backgroundColor': '#fff000',
            borderColor: '#ff0000',
            boxShadow: '1px 1px 3px #292929'
        }
    });

}

example2:/**  
      * 扩展两个方法  
      */  
     $.extend($.fn.datagrid.methods, {  
         /**  
          * 开打提示功能  
          * @param {} jq  
          * @param {} params 提示消息框的样式  
          * @return {}  
          */  
         doCellTip: function(jq, params){  
             function showTip(data, td, e){  
                 if ($(td).text() == "")   
                     return;  
                 data.tooltip.text($(td).text()).css({  
                     top: (e.pageY + 10) + 'px',  
                     left: (e.pageX + 20) + 'px',  
                     'z-index': $.fn.window.defaults.zIndex,  
                     display: 'block'  
                 });  
             };  
             return jq.each(function(){  
                 var grid = $(this);  
                 var options = $(this).data('datagrid');  
                 if (!options.tooltip) {  
                     var panel = grid.datagrid('getPanel').panel('panel');  
                     var defaultCls = {  
                         'border': '1px solid #333',  
                         'padding': '2px',  
                         'color': 'red',  
                         'background': 'yellow',  
                         'position': 'absolute',  
                         'max-width': '200px',  
                         'border-radius' : '4px',  
                         '-moz-border-radius' : '4px',  
                         '-webkit-border-radius' : '4px',  
                         'display': 'none'  
                     }  
                     var tooltip = $("<div id='celltip'></div>").appendTo('body');  
                     tooltip.css($.extend({}, defaultCls, params.cls));  
                     options.tooltip = tooltip;  
                     panel.find('.datagrid-body').each(function(){  
                         var delegateEle = $(this).find('> div.datagrid-body-inner').length ? $(this).find('> div.datagrid-body-inner')[0] : this;  
                         $(delegateEle).undelegate('td', 'mouseover').undelegate('td', 'mouseout').undelegate('td', 'mousemove').delegate('td', {  
                             'mouseover': function(e){  
                                 if (params.delay) {  
                                     if (options.tipDelayTime)   
                                         clearTimeout(options.tipDelayTime);  
                                     var that = this;  
                                     options.tipDelayTime = setTimeout(function(){  
                                         showTip(options, that, e);  
                                     }, params.delay);  
                                 }  
                                 else {  
                                     showTip(options, this, e);  
                                 }  
                                   
                             },  
                             'mouseout': function(e){  
                                 if (options.tipDelayTime)   
                                     clearTimeout(options.tipDelayTime);  
                                 options.tooltip.css({  
                                     'display': 'none'  
                                 });  
                             },  
                             'mousemove': function(e){  
                                 var that = this;  
                                 if (options.tipDelayTime)   
                                     clearTimeout(options.tipDelayTime);  
                                 //showTip(options, this, e);  
                                 options.tipDelayTime = setTimeout(function(){  
                                         showTip(options, that, e);  
                                     }, params.delay);  
                             }  
                         });  
                     });  
                       
                 }  
                   
             });  
         },  
         /**  
          * 关闭消息提示功能  
          *  
          * @param {}  
          *            jq  
          * @return {}  
          */  
         cancelCellTip: function(jq){  
             return jq.each(function(){  
                 var data = $(this).data('datagrid');  
                 if (data.tooltip) {  
                     data.tooltip.remove();  
                     data.tooltip = null;  
                     var panel = $(this).datagrid('getPanel').panel('panel');  
                     panel.find('.datagrid-body').undelegate('td', 'mouseover').undelegate('td', 'mouseout').undelegate('td', 'mousemove')  
                 }  
                 if (data.tipDelayTime) {  
                     clearTimeout(data.tipDelayTime);  
                     data.tipDelayTime = null;  
                 }  
             });  
         }  
     });