现在的位置: 首页 > easyui > Grid > datagrid > 正文
小 中 大
扩展:datagrid鼠标经过提示单元格内容
2012年12月24日 ⁄ datagrid ⁄ 共 5270字 ⁄ 评论数 20 ⁄ 被围观 38,694 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实现》

返回

作者:

【上篇】
【下篇】

您可能还会对这些文章感兴趣！

  1. 基于1.3.3版本tooltip的datagrid单元格tip实现
  2. jQuery EasyUI Datagrid 列属性函数中如何获取当前列
  3. jQuery EasyUI datagrid列名包含特殊字符会导致表格错
  4. jQuery EasyUI Datagrid性能优化专题
  5. jQuery EasyUI Datagrid VirtualScrollView视图简
  6. 基于1.3.3版本tooltip的datagrid单元格tip实现
  7. jQuery EasyUI Datagrid组件默认视图分析
  8. jQuery EasyUI Datagrid组件fixRowHeight接口源码分
jQuery EasyUI Datagrid组件的完整的基础DOM结构
jQuery获取DOM绑定事件问题
实现tabs组件IFrame模式的遮罩效果
浅谈 easyui tabs 的href和content属性

目前有 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处首先设断点，总能找出原因的。
      因为没遇到过，所以也给不了你多少建议。

查看来自外部的引用: 1

给我留言

留言无头像?


插入图片

返回首页

Copyright © 2012-2017 WebUI框架使用参考  保留所有权利.   Theme by Robin
×