基于1.3.3版本tooltip的datagrid单元格tip实现

同时其功能也算是比较丰富。之前我写过一篇《扩展:datagrid鼠标经过提示单元格内容》那就是用纯编码生成的tip,更为丑陋,有了Easyui 1.3.3的tooltip,我们实现起来就很容易了,直接上代码:

实现代码
$.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')      
        });      
    }      
});  

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值