首页 > 网站 > WEB开发 > 正文

easyUI的doCellTip 就是鼠标放到单元格上有个提示的功能

2024-04-27 14:15:09
字体:
来源:转载
供稿:网友

easyUI的doCellTip 就是鼠标放到单元格上有个提示的功能

1:这个东西是我抄的(抄的哪儿的我就想不起来了- -)弹出的窗没有样式 不是很好看

//扩展    $.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;                       }                   });       }   }); 调用方法1:functiondoCellTip(){

$('#dg').datagrid('doCellTip',{'max-width':'100px'});

}

functioncancelCellTip(){

$('#dg').datagrid('cancelCellTip');

}

调用方法2:

onLoadSuccess:function(data){

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

}

就这么着吧!!!


上一篇:(五)backbone

下一篇:javascript 生成UUID

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表