扩展:datagrid鼠标经过提示单元格内容

来源：互联网发布：iphone7必备软件推荐编辑：程序博客网时间：2024/05/29 03:40

/**   * 扩展两个方法   */  $.extend($.fn.datagrid.methods, {       /**     * 开打提示功能       * @param {} jq       * @param {} params 提示消息框的样式       * @return {}       */      doCellTip : function(jq, params) {           function showTip(data, td, e) {               if ($(td).text() == "")                   return;               data.tooltip.text($(td).text()).css({                           top : (e.pageY + 10) + 'px',                           left : (e.pageX + 20) + 'px',                           'z-index' : $.fn.window.defaults.zIndex,                           display : 'block'                       });           };           return jq.each(function() {               var grid = $(this);               var options = $(this).data('datagrid');               if (!options.tooltip) {                   var panel = grid.datagrid('getPanel').panel('panel');                   var defaultCls = {                       'border' : '1px solid #333',                       'padding' : '1px',                       'color' : '#333',                       'background' : '#f7f5d1',                       'position' : 'absolute',                       'max-width' : '200px',                       'border-radius' : '4px',                       '-moz-border-radius' : '4px',                       '-webkit-border-radius' : '4px',                       'display' : 'none'                   }                   var tooltip = $("<div id='celltip'></div>").appendTo('body');                   tooltip.css($.extend({}, defaultCls, params.cls));                   options.tooltip = tooltip;                   panel.find('.datagrid-body').each(function() {                       var delegateEle = $(this).find('> div.datagrid-body-inner').length                               ? $(this).find('> div.datagrid-body-inner')[0]                               : this;                       $(delegateEle).undelegate('td', 'mouseover').undelegate(                               'td', 'mouseout').undelegate('td', 'mousemove')                               .delegate('td', {                                   'mouseover' : function(e) {                                       if (params.delay) {                                           if (options.tipDelayTime)                                               clearTimeout(options.tipDelayTime);                                           var that = this;                                           options.tipDelayTime = setTimeout(                                                   function() {                                                       showTip(options, that, e);                                                   }, params.delay);                                       } else {                                           showTip(options, this, e);                                       }                                     },                                   'mouseout' : function(e) {                                       if (options.tipDelayTime)                                           clearTimeout(options.tipDelayTime);                                       options.tooltip.css({                                                   'display' : 'none'                                               });                                   },                                   'mousemove' : function(e) {                                       var that = this;                                       if (options.tipDelayTime) {                                           clearTimeout(options.tipDelayTime);                                           options.tipDelayTime = setTimeout(                                                   function() {                                                       showTip(options, that, e);                                                   }, params.delay);                                       } else {                                           showTip(options, that, e);                                       }                                   }                               });                   });                 }             });       },       /**     * 关闭消息提示功能       * @param {} jq       * @return {}       */      cancelCellTip : function(jq) {           return jq.each(function() {                       var data = $(this).data('datagrid');                       if (data.tooltip) {                           data.tooltip.remove();                           data.tooltip = null;                           var panel = $(this).datagrid('getPanel').panel('panel');                           panel.find('.datagrid-body').undelegate('td',                                   'mouseover').undelegate('td', 'mouseout')                                   .undelegate('td', 'mousemove')                       }                       if (data.tipDelayTime) {                           clearTimeout(data.tipDelayTime);                           data.tipDelayTime = null;                       }                   });       }   });

使用事项：

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

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

效果演示：

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

更新日志

2013-05-25

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

转载地址：http://www.easyui.info/archives/796.html

http://www.easyui.info/archives/796.html

0 0