现在的位置: 首页 > easyui > Grid > datagrid > 正文
扩展:datagrid鼠标经过提示单元格内容
2012年12月24日 datagrid ⁄ 共 5270字 评论数 20 ⁄ 被围观 33,851 views+
文章目录
[隐藏]

实现代码:

  1. /**  
  2.  * 扩展两个方法  
  3.  */  
  4. $.extend($.fn.datagrid.methods, {   
  5.     /**
  6.      * 开打提示功能  
  7.      * @param {} jq  
  8.      * @param {} params 提示消息框的样式  
  9.      * @return {}  
  10.      */  
  11.     doCellTip : function(jq, params) {   
  12.         function showTip(data, td, e) {   
  13.             if ($(td).text() == "")   
  14.                 return;   
  15.             data.tooltip.text($(td).text()).css({   
  16.                         top : (e.pageY + 10) + 'px',   
  17.                         left : (e.pageX + 20) + 'px',   
  18.                         'z-index' : $.fn.window.defaults.zIndex,   
  19.                         display : 'block'   
  20.                     });   
  21.         };   
  22.         return jq.each(function() {   
  23.             var grid = $(this);   
  24.             var options = $(this).data('datagrid');   
  25.             if (!options.tooltip) {   
  26.                 var panel = grid.datagrid('getPanel').panel('panel');   
  27.                 var defaultCls = {   
  28.                     'border' : '1px solid #333',   
  29.                     'padding' : '1px',   
  30.                     'color' : '#333',   
  31.                     'background' : '#f7f5d1',   
  32.                     'position' : 'absolute',   
  33.                     'max-width' : '200px',   
  34.                     'border-radius' : '4px',   
  35.                     '-moz-border-radius' : '4px',   
  36.                     '-webkit-border-radius' : '4px',   
  37.                     'display' : 'none'   
  38.                 }   
  39.                 var tooltip = $("<div id='celltip'></div>").appendTo('body');   
  40.                 tooltip.css($.extend({}, defaultCls, params.cls));   
  41.                 options.tooltip = tooltip;   
  42.                 panel.find('.datagrid-body').each(function() {   
  43.                     var delegateEle = $(this).find('> div.datagrid-body-inner').length   
  44.                             ? $(this).find('> div.datagrid-body-inner')[0]   
  45.                             : this;   
  46.                     $(delegateEle).undelegate('td', 'mouseover').undelegate(   
  47.                             'td', 'mouseout').undelegate('td', 'mousemove')   
  48.                             .delegate('td', {   
  49.                                 'mouseover' : function(e) {   
  50.                                     if (params.delay) {   
  51.                                         if (options.tipDelayTime)   
  52.                                             clearTimeout(options.tipDelayTime);   
  53.                                         var that = this;   
  54.                                         options.tipDelayTime = setTimeout(   
  55.                                                 function() {   
  56.                                                     showTip(options, that, e);   
  57.                                                 }, params.delay);   
  58.                                     } else {   
  59.                                         showTip(options, this, e);   
  60.                                     }   
  61.   
  62.                                 },   
  63.                                 'mouseout' : function(e) {   
  64.                                     if (options.tipDelayTime)   
  65.                                         clearTimeout(options.tipDelayTime);   
  66.                                     options.tooltip.css({   
  67.                                                 'display' : 'none'   
  68.                                             });   
  69.                                 },   
  70.                                 'mousemove' : function(e) {   
  71.                                     var that = this;   
  72.                                     if (options.tipDelayTime) {   
  73.                                         clearTimeout(options.tipDelayTime);   
  74.                                         options.tipDelayTime = setTimeout(   
  75.                                                 function() {   
  76.                                                     showTip(options, that, e);   
  77.                                                 }, params.delay);   
  78.                                     } else {   
  79.                                         showTip(options, that, e);   
  80.                                     }   
  81.                                 }   
  82.                             });   
  83.                 });   
  84.   
  85.             }   
  86.   
  87.         });   
  88.     },   
  89.     /**
  90.      * 关闭消息提示功能  
  91.      * @param {} jq  
  92.      * @return {}  
  93.      */  
  94.     cancelCellTip : function(jq) {   
  95.         return jq.each(function() {   
  96.                     var data = $(this).data('datagrid');   
  97.                     if (data.tooltip) {   
  98.                         data.tooltip.remove();   
  99.                         data.tooltip = null;   
  100.                         var panel = $(this).datagrid('getPanel').panel('panel');   
  101.                         panel.find('.datagrid-body').undelegate('td',   
  102.                                 'mouseover').undelegate('td', 'mouseout')   
  103.                                 .undelegate('td', 'mousemove')   
  104.                     }   
  105.                     if (data.tipDelayTime) {   
  106.                         clearTimeout(data.tipDelayTime);   
  107.                         data.tipDelayTime = null;   
  108.                     }   
  109.                 });   
  110.     }   
  111. });  

使用事项:

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

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

效果演示:

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

更新日志

2013-05-25

Easyui 1.3.3版本推出了tooltip,可以基于tooltip更为容易地实现该功能,请参见《基于1.3.3版本tooltip的datagrid单元格tip实现》

目前有 20 条留言 其中:访客:10 条, 博主:9 条 引用: 1

  1. pigslin : 2012年12月27日13:30:48  -49楼 @回复 回复

    var options = $(this).data(‘datagrid’);
    小雪,请问这里的datagrid是什么时候保存在data中的?


    • 管理员
      世纪之光 : 2012年12月27日16:24:30  地下1层 @回复 回复

      表格初始化的时候就会存储这部分数据了啊,我扩展的是方法,使用方法的前提肯定是表格已经初始化完毕。

      • pigslin : 2012年12月28日13:18:11  地下2层 @回复 回复

        也就是说easui源码里在表格初始化时会把datagrid保存在data中?


        • 管理员
          世纪之光 : 2012年12月28日13:47:34  地下3层 @回复 回复

          建议你去学习下jQuery的data函数,否则我一言两语可能真解释不清楚啊。

  2. 匿@名 : 2014年02月22日14:55:18  -48楼 @回复 回复

    非常不错,感谢分享!

  3. xewsk : 2014年07月16日17:38:42  -47楼 @回复 回复

    treegrid时title显示错误,因为td里面嵌套table了,48行等所有选择td的地方改为“td:not(:has(table))”可以解决此问题


    • 管理员
      世纪之光 : 2014年07月19日22:34:21  地下1层 @回复 回复

      谢谢提醒,这个扩展当初没有考虑在treegrid上使用,所以没有测试treegrid。

  4. Ejim : 2014年08月04日00:35:52  -46楼 @回复 回复

    你好,在使用你这个方法中,我发现你的tooltip内容不支持换行,尝试使用了或者别的换行符都不行,请问有没有办法解决(我不想升级到1.3.3….),万分感谢 😛


    • 管理员
      世纪之光 : 2014年08月04日09:24:14  地下1层 @回复 回复

      看到第15行代码了吗?要支持换行的话,把jquery的text()函数换成html()函数,然后你的文本信息里换行符用<br/>就可以了。

      • Ejim : 2014年08月06日20:25:03  地下2层 @回复 回复

        感谢指点,的确可行,但是问题又出来了,用了html()以后,文本大部分都被隐藏了,而且如果没有文本,依然会有一个空白的tooltip的框存在,有点丑,这样该如何改?我是新手小白,希望老大能指点一下,这里发布上截图,请问老大有qq吗? 😛


        • 管理员
          世纪之光 : 2014年08月07日20:46:21  地下3层 @回复 回复

          没有文本,或者文本根本没有被截断的情况,其实都不应该有tip的个问题我在:
          http://www.easyui.info/archives/1330.html
          这篇文章里有解决思路,建议你看看我的代码,看我是如何判断什么时候该有tip的,你把逻辑迁移过来就可以了。

  5. 天空 : 2014年10月23日12:05:52  -45楼 @回复 回复

    您好 我要实现 鼠标滑过显示的内容是 根据列上的名称和 行上 的 名称 去 数据库查数据,但是这个方法在鼠标滑过的时候怎么取得列上field 的值 和这个行上的 隐藏了的字段呢 谢谢指点 麻烦给看下谢谢


    • 管理员
      世纪之光 : 2014年10月27日21:43:35  地下1层 @回复 回复

      字段值可以通过行数据获取,行数据可以通过行索引获取,行索引可以通过鼠标经过的事件源往上遍历到tr节点,tr节点的属性中含有行索引。
      你分析一下DOM结构就知道了。

  6. 小白 : 2015年10月27日15:41:24  -44楼 @回复 回复

    刷新页面能用,我有一个查询功能,查询之后这个功能就不能用了


    • 管理员
      世纪之光 : 2015年10月28日09:34:38  地下1层 @回复 回复

      目前事件是委托在.datagrid-body上面的,你可以把它改成委托在panel上面,这样应该就不受影响了。

      • 不会 : 2016年03月04日14:52:11  地下2层 @回复 回复

        怎么委托在panel上面?可以具体说一下吗?谢谢


        • 管理员
          世纪之光 : 2016年03月19日15:36:24  地下3层 @回复 回复

          你先去看一下时间委托的概念,然后看一下jQuery的委托方法。

  7. tinyGuitar : 2015年11月05日10:00:37  -43楼 @回复 回复

    因项目需要,我将tab的cache属性设置为了false,但是出现了一个bug:每次选中一个tab页面时(当然tab会执行refresh方法),页面中的form组件会随着打开该选项卡的次数每次增加。我看过easyui的源码,貌似它refresh前是会对panel中DOM进行一个销毁的,不知道为什么还会出现这种问题,不知道能否提点一二,多谢多谢


    • 管理员
      世纪之光 : 2015年11月06日13:31:03  地下1层 @回复 回复

      这样的问题,只能打断点去调试了,ajax处首先设断点,总能找出原因的。
      因为没遇到过,所以也给不了你多少建议。

给我留言

留言无头像?


×