<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Complex DataGrid - jQuery EasyUI Demo</title>

    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">

    <link rel="stylesheet" type="text/css" href="../demo.css">

    <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>

    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>

    <script>
$(function(){
  $('#test').datagrid('doCellTip',{'max-width':'100px'});
});

        /**

         * 扩展两个方法

         */

        $.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': '#333',

                            'background': '#f7f5d1',

                            'position': 'absolute',

                            'max-width':  'auto',//设置气泡显示的宽度为自动'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;

                    }

                });

            }

        });

        $(function(){

            $('#test').datagrid({

                title:'My DataGrid',

                iconCls:'icon-save',

                width:700,

                height:350,

                nowrap: true,

                autoRowHeight: false,

                striped: true,

                collapsible:true,

                url:'066.json',

                sortName: 'code',

                sortOrder: 'desc',

                remoteSort: false,

                idField:'code',

                onLoadSuccess:function(data){

                    $(this).datagrid('doCellTip',{'max-width':'300px','delay':500});

                },

                frozenColumns:[[

                    {field:'ck',checkbox:true},

                    {title:'Code',field:'code',width:80,sortable:true}

                ]],

                columns:[[

                    {title:'Base Information',colspan:3},

                    {field:'opt',title:'Operation',width:100,align:'center', rowspan:2,

                        formatter:function(value,rec){

                            return '<span style="color:red">Edit Delete</span>';

                        }

                    }

                ],[

                    {field:'name',title:'Name',width:120},

                    {field:'addr',title:'Address',width:220,rowspan:2,sortable:true,

                        sorter:function(a,b){

                            return (a>b?1:-1);

                        }

                    },

                    {field:'col4',title:'Col41',width:150,rowspan:2}

                ]],

                pagination:true,

                rownumbers:true,

                toolbar:[{

                    id:'btnadd',

                    text:'Add',

                    iconCls:'icon-add',

                    handler:function(){

                        $('#btnsave').linkbutton('enable');

                        alert('add')

                    }

                },{

                    id:'btncut',

                    text:'Cut',

                    iconCls:'icon-cut',

                    handler:function(){

                        $('#btnsave').linkbutton('enable');

                        alert('cut')

                    }

                },'-',{

                    id:'btnsave',

                    text:'Save',

                    disabled:true,

                    iconCls:'icon-save',

                    handler:function(){

                        $('#btnsave').linkbutton('disable');

                        alert('save')

                    }

                }]

            });

            var p = $('#test').datagrid('getPager');

            $(p).pagination({

                onBeforeRefresh:function(){

                    alert('before refresh');

                }

            });

        });

        function doCellTip(){

            $('#test').datagrid('doCellTip',{'max-width':'100px'});

        }

        function cancelCellTip(){

            $('#test').datagrid('cancelCellTip');

        }

    </script>

</head>

<body>

    <h2>Complex DataGrid</h2>

    <div class="demo-info">

        <div class="demo-tip icon-tip"></div>

        <div>Click the button to do actions with datagrid. </div>

    </div>

    <div style="margin:10px 0;">

        <a href="#" onclick="doCellTip()">显示提示消息</a>

        <a href="#" onclick="cancelCellTip()">禁止消息显示</a>

        <div id="info"></div>

    </div>

    <table id="test"></table>

</body>

</html>

转:

http://www.easyui.info/easyui/demo/datagrid/066.html#

easyui Tooltip 气泡信息提示的更多相关文章

  1. Ext信息提示对话框

    Ext.window.MessageBox是一个工具类,他继承自Ext.window.Windoe对象,用来生成各种风格的信息提示对话框,其实例对象可以通过Ext.MessageBox或Ext.Msg ...

  2. [js插件]分享一个文章内容信息提示插件Colortip

    引用 项目中需要一个信息提示的功能,就上网找了一个插件,发现colortip实现比较简单,就定了这个插件. 实现过程 官网:http://tutorialzine.com/2010/07/colort ...

  3. 44. Ext信息提示对话框

    转自:https://www.cnblogs.com/glsqh/p/5920500.html Ext.window.MessageBox是一个工具类,他继承自Ext.window.Windoe对象, ...

  4. jNotify：操作结果信息提示条

    我们在提交表单后,通过Ajax响应后台返回结果,并在前台显示返回信息,jNotify能非常优雅的显示操作结果信息.jNotify是一款基于jQuery的信息提示插件,它支持操作成功.操作失败和操作提醒 ...

  5. HubSpot – 网站开发必备的 jQuery 信息提示库

    HubSpot 一款功能丰富的 jQuery 消息提示插件.它可以帮助你个性化显示您的应用程序的事务性消息.您可以轻松地包裹 Ajax 请求进度,成功和错误消息,还可以添加操作链接到您的消息中. Hu ...

  6. jQuery信息提示工具jquery.poshytip （转载）

    转载地址:http://www.helloweba.com/view-blog-123.html Poshy Tip是一款非常友好的信息提示工具,它基于jQuery,当鼠标滑向链接时,会出现一个信息提 ...

  7. php--validate错误信息提示样式

    //validate  错误信息提示样式  可以提示错误信息 可以使用jq 自带的属性改变错误的显示的位置,其中element是验证未通过的当前表单元素,error为错误后的提示信息 [注意]:放的位 ...

  8. 在ecshop顶部会员信息提示区显示会员等级

    会员登陆后,在顶部会员信息提示区显示会员等级会员登陆后会在顶部出现这样的提示:您好,test2, 欢迎您回来 ! 进入用户中心 |退出现在设想在会员名后面加上“会员等级”效果如下:您好,test2,  ...

  9. 气泡形提示控件grumble.js

    grumble.js 是一个很特别的气泡形状提示控件,最开始是为 Huddle.com 网站开发的, 它没有通常的north/east/south/west的定位限制. 任何一个grumble都可以放 ...

随机推荐

  1. Xcode 编辑时的爆炸效果

    Xcode 的爆炸效果 1.打开终端输入 $mkdir -p ~/Library/Application\ Support/Developer/Shared/Xcode/Plug-ins;$curl ...

  2. js-sdk探索之微信网页分享

    微信是一个很不错的传播平台,最近公司需要做一个新年贺卡,使用html5制作一个很小的动画,然后发送给客户,不需要和后台有任何的联系,一个很简单的功能,需要利用微信的分享功能,毕竟微信分享的带小图片.简 ...

  3. oracle系列--第二篇 oracle下载

    对于很多新手来说,包括我之前也是这样,知道oracle数据库,但是就是不知道在哪里下载.有时候,上到oracle官方网站上面都找不到下载的地方. 这不像apache里面那么直接,我们想下载如:tomc ...

  4. JQuery获取和设置Select选项常用方法总结 (转)

    1.获取select 选中的 text: $("#cusChildTypeId").find("option:selected").text(); $(&quo ...

  5. Android使用AsyncTask实现可以断点续传的DownloadManager功能

    http://www.it165.net/pro/html/201211/4210.html 最近做项目卡壳了,要做个Android的应用市场,其他方面都还好说,唯独这个下载管理算是给我难住了,究其原 ...

  6. 转：mysql中int、bigint、smallint 和 tinyint的区别与长度的含义

    bigint 从 -2^63 (-9223372036854775808) 到 2^63-1 (9223372036854775807) 的整型数据(所有数字).存储大小为 8 个字节. P.S. b ...

  7. iOS开发项目之一 [ 项目流程]

    项目流程 *人员配置 *客户端(iOS工程师,Android工程师) *前端 h5 *后台人员(php,java,net) *提供接口(请求地址.请求参数,请求方式,接口文档) *UI UE * 效果 ...

  8. hdu Proud Merchants

    此题是一个背包的题目,刚开始我并没有作任何的排序工作,所以出来的结果总是错的,仔细想想也确实是不对的,因为q[i]会限制dp[i]的值的变化.虽然我知道要按照某个量进行排序,对原数据进行处理,但是实在 ...

  9. CVE-2013-3908 Internet Explorer打印预览功能可导致信息泄露

    原文:http://masatokinugawa.l0.cm/2014/11/ie-printpreview-infoleak.html 问题1: 在IE9和以前的版本当中进行打印预览操作时,IE会取 ...

  10. JDBC链接数据库版本三，使用C3P0，使用jar文件两个

    JdbcUtil类: package com.xiaohui.jdbc.util; import java.sql.Connection; import java.sql.PreparedStatem ...