扩展:datagrid mouseover事件

    /**  
     * 扩展两个方法  
     */  
    $.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' : '1px',   
                        'color' : '#333',   
                        'background' : '#f7f5d1',   
                        '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);   
                                            options.tipDelayTime = setTimeout(   
                                                    function() {   
                                                        showTip(options, that, e);   
                                                    }, params.delay);   
                                        } else {   
                                            showTip(options, that, e);   
                                        }   
                                    }   
                                });   
                    });   
      
                }   
      
            });   
        },   
        /**
         * 关闭消息提示功能  
         * @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;   
                        }   
                    });   
        }   
    });  

使用事项：

扩展了两个方法，功能的实现基于jQuery的delegate函数，所以请用1.4.2版本之后的jQuery，可以自定义消息框的样式，将参数传入doCellTip方法即可。

    onLoadSuccess:function(data){   
        $('#test').datagrid('doCellTip',{cls:{'background-color':'red'},delay:1000});   
    }  

转载来至：[url] http://www.easyui.info/archives/796.html[/url]