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

痛定思痛。 2022-09-30 09:47 408阅读 0赞

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;    
                 \}    
             \});    
         \}    
     \});