扩展:datagrid鼠标经过提示单元格内容

╰半橙微兮° 2021-06-24 14:00 433阅读 0赞

$.extend($.fn.datagrid.methods, {      
        /**
         * 开打提示功能    
         * @param {} jq    
         * @param {} params 提示消息框的样式    
         * @return {}    
         */     
        doCellTip:function (jq, params) {      
            function showTip(showParams, td, e, dg) {      
                //无文本，不提示。      
                if ($(td).text() == "") return;      
                   
                params = params || {};   
                var options = dg.data('datagrid');      
                showParams.content = '<div class="tipcontent">' + 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;      
                                }      
                            }      
                        });      
                    });      
                }      
            });      
        },      
        /**
         * 关闭消息提示功能    
         * @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')      
            });      
        }      
    });

**传入参数列表：**

doCellTip方法的参数包含以下属性：

<table style="border:2px solid rgb(204,204,204); border-collapse:collapse; margin:5px 0px 10px; color:rgb(0,0,0); font-family:'Microsoft YaHei',微软雅黑,Arial,'Lucida Grande',Tahoma,sans-serif; font-size:13px; line-height:24.0499992370605px"> 
 <tbody> 
  <tr> 
   <th style="border:1px solid rgb(204,204,204); padding:3px 10px; vertical-align:top; background:rgb(237,239,240)"> <strong>名称</strong></th> 
   <th style="border:1px solid rgb(204,204,204); padding:3px 10px; vertical-align:top; background:rgb(237,239,240)"> <strong>参数类型</strong></th> 
   <th style="border:1px solid rgb(204,204,204); padding:3px 10px; vertical-align:top; background:rgb(237,239,240)"> <strong>描述以及默认值</strong></th> 
  </tr> 
  <tr> 
   <td style="border:1px solid rgb(204,204,204); padding:3px 10px; vertical-align:top"> onlyShowInterrupt</td> 
   <td style="border:1px solid rgb(204,204,204); padding:3px 10px; vertical-align:top"> string</td> 
   <td style="border:1px solid rgb(204,204,204); padding:3px 10px; vertical-align:top"> 是否只有在文字被截断时才显示tip，默认值为false，即所有单元格都显示tip。</td> 
  </tr> 
  <tr> 
   <td style="border:1px solid rgb(204,204,204); padding:3px 10px; vertical-align:top"> specialShowFields</td> 
   <td style="border:1px solid rgb(204,204,204); padding:3px 10px; vertical-align:top"> Array</td> 
   <td style="border:1px solid rgb(204,204,204); padding:3px 10px; vertical-align:top"> 需要特殊定义显示的列，比如要求鼠标经过name列时提示standName列(可以是隐藏列)的内容,specialShowFields参数可以传入：[{field:'name',showField:'standName'}]。</td> 
  </tr> 
  <tr> 
   <td style="border:1px solid rgb(204,204,204); padding:3px 10px; vertical-align:top"> position</td> 
   <td style="border:1px solid rgb(204,204,204); padding:3px 10px; vertical-align:top"> string</td> 
   <td style="border:1px solid rgb(204,204,204); padding:3px 10px; vertical-align:top"> tip的位置，可以为top,botom,right,left。</td> 
  </tr> 
  <tr> 
   <td style="border:1px solid rgb(204,204,204); padding:3px 10px; vertical-align:top"> tipStyler</td> 
   <td style="border:1px solid rgb(204,204,204); padding:3px 10px; vertical-align:top"> object</td> 
   <td style="border:1px solid rgb(204,204,204); padding:3px 10px; vertical-align:top"> tip内容的样式，注意要符合jquery css函数的要求。</td> 
  </tr> 
  <tr> 
   <td style="border:1px solid rgb(204,204,204); padding:3px 10px; vertical-align:top"> contentStyler</td> 
   <td style="border:1px solid rgb(204,204,204); padding:3px 10px; vertical-align:top"> object</td> 
   <td style="border:1px solid rgb(204,204,204); padding:3px 10px; vertical-align:top"> 整个tip的样式，注意要符合jquery css函数的要求。</td> 
  </tr> 
 </tbody> 
</table>

**使用示例：**

$('#dg').datagrid('doCellTip',   
        {   
            onlyShowInterrupt:false,   
            position:'bottom',   
            tipStyler:{'backgroundColor':'#fff000', borderColor:'#ff0000', maxWidth:'50px', boxShadow:'1px 1px 3px #292929'},   
            contentStyler:{backgroundColor:'#333', paddingLeft:'5px'}   
        });

**效果展示：**

[http://www.easyui.info/version/jquery-easyui-1.3.3/demo/datagrid/celltips.html][http_www.easyui.info_version_jquery-easyui-1.3.3_demo_datagrid_celltips.html]

[http_www.easyui.info_version_jquery-easyui-1.3.3_demo_datagrid_celltips.html]: http://www.easyui.info/version/jquery-easyui-1.3.3/demo/datagrid/celltips.html