现在的位置: 首页 > easyui > Grid > datagrid > 正文
小 中 大
扩展:datagrid鼠标经过提示单元格内容
2012年12月24日 ⁄ datagrid ⁄ 共 5270字 ⁄ 评论数 20 ⁄ 被围观 36,380 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接口源码分
combo扩展:禁止手工改变输入框的值
扩展的validatebox校验规则跑哪里去了
panel,dialog,window组件越界问题汇总
技巧:propertygrid组件formatter字段内容

目前有 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
×