现在的位置: 首页 > easyui > Grid > datagrid > 正文
小 中 大
扩展:datagrid鼠标经过提示单元格内容
2012年12月24日 ⁄ datagrid ⁄ 共 5270字 ⁄ 评论数 20 ⁄ 被围观 40,381 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 parser 的使用场景
My97DatePicker与easyui共用问题
一些javascript代码的小细节
基于jQuery的监控表单元素变化的小插件

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

  1. pigslin : 2012年12月27日13:30:48  -49楼 @回复 回复
  2. 匿@名 : 2014年02月22日14:55:18  -48楼 @回复 回复
  3. xewsk : 2014年07月16日17:38:42  -47楼 @回复 回复
  4. Ejim : 2014年08月04日00:35:52  -46楼 @回复 回复
  5. 天空 : 2014年10月23日12:05:52  -45楼 @回复 回复
  6. 小白 : 2015年10月27日15:41:24  -44楼 @回复 回复
  7. tinyGuitar : 2015年11月05日10:00:37  -43楼 @回复 回复

查看来自外部的引用: 1

给我留言

留言无头像?


插入图片

返回首页

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