`

扩展: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]
分享到:
评论

相关推荐

    ASP.NET应用:DataGrid使用最佳实践

    5. **事件处理**: DataGrid拥有丰富的事件模型,如ItemCreated、ItemDataBound、Command等,这使得我们可以根据需要在特定时刻执行操作。例如,ItemDataBound事件可用于在数据绑定后进行数据格式化或附加额外逻辑。 ...

    Flex(mx:DataGrid)实现数据过滤显示

    为了实现用户输入时实时过滤,可以监听DataGrid的键盘事件或文本输入框的change事件,每当输入变化时,更新过滤条件并重新过滤数据。 ```actionscript textInput.addEventListener(Event.CHANGE, onFilterChange...

    Flex实现分页显示功能(mx:DataGrid)

    本篇将聚焦于如何使用Adobe Flex来实现分页显示功能,特别是通过mx:DataGrid组件。 Flex是一种基于ActionScript和MXML的开源框架,用于构建富互联网应用程序(RIA)。mx:DataGrid是Flex提供的一个强大组件,可以...

    FLEX4 s:dataGrid单元格弹出可文本

    2. **监听cellClick事件**:在`DataGrid`中添加事件监听器,如下所示: ```actionscript dataGrid.addEventListener(ListEvent.ITEM_CLICK, handleCellClick); ``` `handleCellClick`函数会处理单元格点击事件。...

    ASP.NET应用:DataGrid使用最佳实践代码

    ASP.NET中的DataGrid控件是Web开发中常用的数据展示组件,尤其在构建数据密集型的Web应用程序时。本文将深入探讨DataGrid的使用最佳实践,旨在帮助开发者优化性能,提高用户体验,同时保持代码的可维护性和灵活性。 ...

    ASP.NET应用:DataGrid使用最佳实践视频

    ASP.NET中的DataGrid控件是Web开发中一个非常重要的组件,尤其对于初学者来说,它提供了数据展示的强大功能。在本教程中,我们将深入探讨DataGrid的使用,并遵循最佳实践来提升开发效率和用户体验。 首先,DataGrid...

    Datagrid键盘事件响应

    本文将详细讲解Datagrid键盘事件响应,包括Datagrid整体和单元格两个层面。 首先,我们来看Datagrid上的键盘响应。当Datagrid获得焦点后,用户可以通过键盘进行操作。例如,按下"0-1"、"A-Z"、"Enter"、"Backspace...

    FLEX的一个DataGrid例子

    DataGrid提供了丰富的事件,如`click`、`doubleClick`、`cellClick`等,可以监听这些事件进行交互处理。例如,监听单元格点击事件: ```actionscript myGrid.addEventListener(DataGridEvent.CELL_CLICK, ...

    表格DataGrid

    8. 扩展性:DataGrid控件本身具有很高的可扩展性,可以添加自定义行为和功能,例如,通过编写自定义适配器来处理复杂的数据操作。 在DEMO文件中,你可能会看到一个关于DataGrid 5.9.2版本的示例应用程序,其中展示...

    EasyUI-1.Datagrid 数据网格

    Datagrid 提供了一系列的事件,如 `onLoadSuccess`(数据加载成功时触发)、`onClickRow`(点击行时触发)、`onDblClickRow`(双击行时触发)等,开发者可以通过监听这些事件来实现自定义功能。 6. **自定义模板**...

    easyUI,datagrid小样例

    4. **事件处理**:EasyUI 提供了丰富的事件机制,如 onDblClickRow(双击行事件)、onClickRow(点击行事件)、onLoadSuccess(数据加载成功事件)等,开发者可以通过监听这些事件来扩展 Datagrid 的功能。...

    Silverlight中给DataGrid赋值

    4. **处理数据交互**:一旦DataGrid与数据源关联,你可以监听DataGrid的事件(如SelectionChanged、CellEditEnding等)来处理用户交互,例如更新数据源。 ```csharp dataGrid.SelectionChanged += (sender, e) =&gt; {...

    easyui datagrid 增加鼠标悬停弹窗事件

    - **监听事件**:首先,我们需要为Datagrid的每一行添加`mouseover`和`mouseout`事件监听器。 - **获取行数据**:在`mouseover`事件触发时,我们可以获取当前行的数据,这通常通过`$(this).data()`或`$(this)....

    DataGrid双击事件&取值

    本篇文章将深入探讨如何在Visual Studio 2012中利用`DataGrid`控件实现双击事件处理以及如何从选定的行中获取数据。 首先,我们需要了解`DataGrid`控件的基本用法。`DataGrid`可以与各种数据源绑定,如数组、...

    flex datagrid

    Flex DataGrid 是 Adobe Flex 中一个重要的组件,...在实际应用中,还可以结合事件监听、自定义样式和皮肤等高级特性,使得 DataGrid 更加符合项目需求。对于 Flex 开发者来说,掌握 DataGrid 的使用是非常重要的技能。

    DataGrid控件使用及HTTPService参数传递说明

    4. **事件监听**:我们可以监听DataGrid的各种事件,如itemClick、doubleClick等,以便进行相应的操作。例如: ```actionscript myGrid.addEventListener(ListEvent.ITEM_CLICK, handleItemClick); ``` 接下来,...

    .net下功能強大的Datagrid控件

    在.NET框架中,Datagrid控件是一个非常重要的组件,尤其在ASP.NET环境下,它被广泛用于数据展示和交互。这个控件提供了丰富的功能,能够帮助开发者轻松地在网页上创建表格,显示数据库中的数据,并允许用户进行编辑...

    设置datagrid行背景色示例

    2. **创建自定义 `Datagrid` 子类**:在子类中,你可以重写或扩展渲染器(renderer)的逻辑,渲染器负责显示每个单元格的内容。为了改变行背景色,我们需要自定义行渲染器。 3. **实现行渲染器**:行渲染器通常是 `...

    DataGrid-Attribute-master_WPF_datagrid_

    10. **扩展性和插件**:除了内置功能,开发者还可以利用第三方库(如Extended WPF Toolkit)来扩展DataGrid的功能,如冻结列、列拖放、导出数据等。 综上所述,“DataGrid-Attribute-master”项目旨在深入理解并...

Global site tag (gtag.js) - Google Analytics