现在的位置: 首页 > easyui > Grid > datagrid > 正文
小 中 大
扩展:datagrid鼠标经过提示单元格内容
2012年12月24日 ⁄ datagrid ⁄ 共 5270字 ⁄ 评论数 20 ⁄ 被围观 40,249 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接口源码分
panel改进:auto属性定制自动解析远程数据
一个问题的思考
浅谈validatebox组件校验的实现方案
事件冒泡引起的tabs组件二次请求

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