现在的位置: 首页 > easyui > Grid > datagrid > 正文
基于1.3.3版本tooltip的datagrid单元格tip实现
2013年05月25日 datagrid ⁄ 共 6554字 评论数 44 ⁄ 被围观 37,983 views+
文章目录
[隐藏]

在Easyui的1.3.3版本中,作者新增了tooltip组件,尽管样式看起来也不咋的,但是终归也是官方出品,同时其功能也算是比较丰富。之前我写过一篇《扩展:datagrid鼠标经过提示单元格内容》那就是用纯编码生成的tip,更为丑陋,有了Easyui 1.3.3的tooltip,我们实现起来就很容易了,直接上代码:

实现代码

  1. /**
  2.  * Created with JetBrains WebStorm.
  3.  * User: cao.guanghui
  4.  * Date: 13-6-26
  5.  * Time: 下午11:27
  6.  * To change this template use File | Settings | File Templates.
  7.  */
  8. $.extend($.fn.datagrid.methods, {
  9.     /**
  10.      * 开打提示功能(基于1.3.3+版本)
  11.      * @param {} jq
  12.      * @param {} params 提示消息框的样式
  13.      * @return {}
  14.      */
  15.     doCellTip:function (jq, params) {
  16.         function showTip(showParams, td, e, dg) {
  17.             //无文本,不提示。
  18.             if ($(td).text() == ""return;
  19.             params = params || {};
  20.             var options = dg.data('datagrid');
  21.             var styler = 'style="';
  22.             if(showParams.width){
  23.                 styler = styler + "width:" + showParams.width + ";";
  24.             }
  25.             if(showParams.maxWidth){
  26.                 styler = styler + "max-width:" + showParams.maxWidth + ";";
  27.             }
  28.             if(showParams.minWidth){
  29.                 styler = styler + "min-width:" + showParams.minWidth + ";";
  30.             }
  31.             styler = styler + '"';
  32.             showParams.content = '<div class="tipcontent" ' + styler + '>' + showParams.content + '</div>';
  33.             $(td).tooltip({
  34.                 content:showParams.content,
  35.                 trackMouse:true,
  36.                 position:params.position,
  37.                 onHide:function () {
  38.                     $(this).tooltip('destroy');
  39.                 },
  40.                 onShow:function () {
  41.                     var tip = $(this).tooltip('tip');
  42.                     if(showParams.tipStyler){
  43.                         tip.css(showParams.tipStyler);
  44.                     }
  45.                     if(showParams.contentStyler){
  46.                         tip.find('div.tipcontent').css(showParams.contentStyler);
  47.                     }
  48.                 }
  49.             }).tooltip('show');
  50.         };
  51.         return jq.each(function () {
  52.             var grid = $(this);
  53.             var options = $(this).data('datagrid');
  54.             if (!options.tooltip) {
  55.                 var panel = grid.datagrid('getPanel').panel('panel');
  56.                 panel.find('.datagrid-body').each(function () {
  57.                     var delegateEle = $(this).find('> div.datagrid-body-inner').length ? $(this).find('> div.datagrid-body-inner')[0] : this;
  58.                     $(delegateEle).undelegate('td', 'mouseover').undelegate('td', 'mouseout').undelegate('td', 'mousemove').delegate('td[field]', {
  59.                         'mouseover':function (e) {
  60.                             //if($(this).attr('field')===undefined) return;
  61.                             var that = this;
  62.                             var setField = null;
  63.                             if(params.specialShowFields && params.specialShowFields.sort){
  64.                                 for(var i=0; i<params.specialShowFields.length; i++){
  65.                                     if(params.specialShowFields[i].field == $(this).attr('field')){
  66.                                         setField = params.specialShowFields[i];
  67.                                     }
  68.                                 }
  69.                             }
  70.                             if(setField==null){
  71.                                 options.factContent = $(this).find('>div').clone().css({'margin-left':'-5000px', 'width':'auto', 'display':'inline', 'position':'absolute'}).appendTo('body');
  72.                                 var factContentWidth = options.factContent.width();
  73.                                 params.content = $(this).text();
  74.                                 if (params.onlyShowInterrupt) {
  75.                                     if (factContentWidth > $(this).width()) {
  76.                                         showTip(params, this, e, grid);
  77.                                     }
  78.                                 } else {
  79.                                     showTip(params, this, e, grid);
  80.                                 }
  81.                             }else{
  82.                                 panel.find('.datagrid-body').each(function(){
  83.                                     var trs = $(this).find('tr[datagrid-row-index="' + $(that).parent().attr('datagrid-row-index') + '"]');
  84.                                     trs.each(function(){
  85.                                         var td = $(this).find('> td[field="' + setField.showField + '"]');
  86.                                         if(td.length){
  87.                                             params.content = td.text();
  88.                                         }
  89.                                     });
  90.                                 });
  91.                                 showTip(params, this, e, grid);
  92.                             }
  93.                         },
  94.                         'mouseout':function (e) {
  95.                             if (options.factContent) {
  96.                                 options.factContent.remove();
  97.                                 options.factContent = null;
  98.                             }
  99.                         }
  100.                     });
  101.                 });
  102.             }
  103.         });
  104.     },
  105.     /**
  106.      * 关闭消息提示功能(基于1.3.3版本)
  107.      * @param {} jq
  108.      * @return {}
  109.      */
  110.     cancelCellTip:function (jq) {
  111.         return jq.each(function () {
  112.             var data = $(this).data('datagrid');
  113.             if (data.factContent) {
  114.                 data.factContent.remove();
  115.                 data.factContent = null;
  116.             }
  117.             var panel = $(this).datagrid('getPanel').panel('panel');
  118.             panel.find('.datagrid-body').undelegate('td', 'mouseover').undelegate('td', 'mouseout').undelegate('td', 'mousemove')
  119.         });
  120.     }
  121. });

入参列表

doCellTip方法的参数包含以下属性:

名称 参数类型 描述以及默认值
onlyShowInterrupt string 是否只有在文字被截断时才显示tip,默认值为false,即所有单元格都显示tip。
specialShowFields Array 需要特殊定义显示的列,比如要求鼠标经过name列时提示standName列(可以是隐藏列)的内容,specialShowFields参数可以传入:[{field:'name',showField:'standName'}]。
position string tip的位置,可以为top,botom,right,left。
minWidth string tip的最小宽度(IE7+)。
maxWidth string tip的最大宽度(IE7+)。
width string tip的宽度,例如'200px'。
tipStyler object tip内容的样式,注意要符合jquery css函数的要求。
contentStyler object 整个tip的样式,注意要符合jquery css函数的要求。

使用示例

  1. function doCellTips(onlyShowInterrupt) {
  2.     $('#dg').datagrid('doCellTip', {
  3.         onlyShowInterrupt : onlyShowInterrupt,
  4.         position : 'bottom',
  5.         maxWidth : '200px',
  6.         specialShowFields : [ {
  7.             field : 'status',
  8.             showField : 'statusDesc'
  9.         } ],
  10.         tipStyler : {
  11.             'backgroundColor' : '#fff000',
  12.             borderColor : '#ff0000',
  13.             boxShadow : '1px 1px 3px #292929'
  14.         }
  15.     });
  16. }

效果演示

http://www.easyui.info/version/jquery-easyui-1.3.3/demo/datagrid/celltips.html

目前有 44 条留言 其中:访客:26 条, 博主:17 条 引用: 1

  1. 独行僧 : 2013年05月26日12:46:08  -49楼 @回复 回复

    能不能提示其它列的内容?如隐藏列或其它动态信息?


    • 管理员
      世纪之光 : 2013年05月26日16:28:14  地下1层 @回复 回复

      隐藏列本扩展是无法提示的,其他动态内容不知道你指的是什么?

      • 独行僧 : 2013年05月27日19:12:05  地下2层 @回复 回复

        我说的有两个意思,一是鼠标放在A列,tip提示B列的信息,例如A列表示名称,B列表示别名,因为别名不常用,而且表格宽度有限,因此我把B列使用Hidden属性隐藏起来了,但是我希望鼠标放在A列时,提示B列中的别名信息。

        第二哥需求是根据行ID通过AJAX取得更多后台数据显示于提示框中。


        • 管理员
          世纪之光 : 2013年05月28日08:42:01  地下3层 @回复 回复

          首先你这两个需求更定是可以实现的。
          第一个需求思路也很简单,入参加上fields对象数组,每个元素可以定义一个它要显示的字段,不定义的话,则显示自身;
          第二个需求的思路应该也是比较清晰的,1.3.3的tooltip是支持ajax定制内容的,所以实现起来应该不难。
          我有时间的话会整理实现这两个需求的。


        • 管理员
          世纪之光 : 2013年05月28日13:30:04  地下3层 @回复 回复

          你说的第一个要求,已经实现,相关代码已经更新了。第二个要求不怎么通用性,所以我就不在这个扩展里取实现了。

  2. 阿仁 : 2013年06月21日17:36:08  -48楼 @回复 回复

    功能不错~!但是用户需要的功能不可能每行都是显示tooltip,应该减少不必要的tooltip的显示!应该要有参数设置功能可以控制哪一行哪一列当中显示tooltip的提示


    • 管理员
      世纪之光 : 2013年06月23日17:13:33  地下1层 @回复 回复

      减少不必要的提示,个人觉得提供是否有截断的单元格才提示tip的参数是最好的了,不用设置具体的单元格,完全智能区分。

    • 小武 : 2014年07月29日00:03:47  地下1层 @回复 回复

      请问 treegrid 怎样才能和tooltip结合使用,请做个Demo 谢谢


      • 管理员
        世纪之光 : 2014年07月29日15:03:57  地下2层 @回复 回复

        这个……你参照我这个实现,再改改就能用在treegrid上了。

    • 小武 : 2014年07月29日00:06:51  地下1层 @回复 回复

      请问 treegrid 怎样才能和tooltip结合使用,求救求救啊 大哥

      • 傻逼小武 : 2014年09月05日08:59:57  地下2层 @回复 回复

        你傻逼啊

    • So っwhat : 2015年06月12日15:43:20  地下1层 @回复 回复

      设置截断显示与全部显示无效,。onlyShowInterrupt参数设置了不起作用,全部在显示,求解答


      • 管理员
        世纪之光 : 2015年06月12日17:02:57  地下2层 @回复 回复

        我的Demo里面是可以的,请把你使用的浏览器版本以及easyui版本说一下。

  3. kinglike : 2013年06月26日18:59:37  -47楼 @回复 回复

    能给个演示么?我测试没有成功!谢谢!

  4. arun : 2013年06月28日17:02:10  -46楼 @回复 回复

    在的“specialShowFields”选项没有被罚款..有一个演示页面,可以请你呢?以任何方式限制特定列的工具提示..?(不好意思。使用谷歌翻译..)

  5. newEU : 2013年08月12日09:06:56  -45楼 @回复 回复

    请问tip内容可以显示自定义的东西么?


    • 管理员
      世纪之光 : 2013年08月12日11:44:19  地下1层 @回复 回复

      这个功能没有提供,你可以在我代码的基础上再改改,你的需求实在是比较少见,所以没有做支持。

  6. OUTMAN : 2013年11月16日19:40:31  -44楼 @回复 回复

    不知道为什么,提示出来后总是离鼠标偏左大概200像素的距离,动一下鼠标就回到鼠标下边了。


    • 管理员
      世纪之光 : 2013年11月19日09:37:48  地下1层 @回复 回复

      这个是因为maxWidth样式引起的,目前没有时间去研究怎么解决这个问题,你可以先不用这个样式。

  7. 小时候我可狠了 : 2013年11月23日15:13:35  -43楼 @回复 回复

    我试了下 去掉maxwidth的话 就变成很长不会换行 你可以在easyui.css里的.tooltip-content {
    font-size: 12px;
    max-width:200px;
    word-break:break-all;
    }添加宽度和强制换行就可以了


    • 管理员
      世纪之光 : 2013年11月25日12:05:45  地下1层 @回复 回复

      修改easyui.css不太好,不过能满足你需要的话就行了。maxWidth不能用,with
      还是可以用的,只不过不够灵活而已。

  8. 小陈 : 2013年11月28日09:17:19  -42楼 @回复 回复

    鼠标放上去影响了页面的高度 导致出现了滚动条 页面本来没有滚动条 这样就会抖动 😀

  9. H先生 : 2013年11月28日16:16:54  -41楼 @回复 回复

    1.3.2版本能用吗


    • 管理员
      世纪之光 : 2013年11月28日19:33:36  地下1层 @回复 回复

      1.3.2不能用,tooltip是1.3.3版本开始才有的.

  10. 瓦哈哈 : 2013年12月09日16:12:55  -40楼 @回复 回复

    有个问题,用了这个提示后,当表格的某一列用格式化语句formatter 把列里面的内容格式化成控件时,该控件无法被点击选中了。

    • 瓦哈哈 : 2013年12月09日16:19:33  地下1层 @回复 回复

      补充下,竟然被屏蔽了,是radio控件

  11. jj : 2014年03月08日17:04:28  -39楼 @回复 回复

    怎么获得列的实际值,而不是formatter经过处理的值。


    • 管理员
      世纪之光 : 2014年03月10日12:25:32  地下1层 @回复 回复

      getData getRows getChecked getSelected这些方法获取到的 都是没有经过formatter处理过的值。

  12. 无状态 : 2014年12月31日16:56:43  -38楼 @回复 回复

    我想当数据量大的时候,本身datagrid渲染一遍,然后你再次遍历加入tooltip,这样性能会不会很慢? ❓


    • 管理员
      世纪之光 : 2014年12月31日19:25:49  地下1层 @回复 回复

      tooltip使用的事件委托,并没有将事件处理程序注册到每一个单元格上,所以跟数据量大小应该关系不大,但是EasyUI的datagrid自身加载大数据量就比较慢。

  13. ruien : 2015年03月26日14:06:52  -37楼 @回复 回复

    写得不错,不过如果遇到那种定时刷新的datagrid的时候,就会出现严重的bug,在刷新的时候,如果鼠标正好mouseout,tip层不会消失,而且永远就显示在那个位置不动了,LZ可以试一试,把定时刷新时间调得越小越好,然后鼠标在datagrid上来回晃动,就能发现这个BUG了.刚才想用这个效果,发现有这个BUG,可惜了,不能用


    • 管理员
      世纪之光 : 2015年03月26日21:21:52  地下1层 @回复 回复

      重新加载的时候,Tip的宿主DOM已经被删除,无法触发相关事件了。暂时没有想到好的解决方法。想用的话,可以再刷新之前自己从body上删除一下tip对应的DOM。

  14. 小管 : 2015年04月13日11:16:30  -36楼 @回复 回复

    能不能指定列提示,其他的都不提示呢


    • 管理员
      世纪之光 : 2015年04月13日14:21:44  地下1层 @回复 回复

      稍微增加一点参数控制就可以了。

    • 管少 : 2015年05月15日12:09:33  地下1层 @回复 回复

      这个功能你做好了吗,做好拿来参考一下

  15. 管少 : 2015年05月15日11:13:26  -35楼 @回复 回复

    指定列提示,要怎么修改呢

  16. 小寒 : 2015年06月11日16:23:35  -34楼 @回复 回复

    你好,鼠标放上去影响了页面的高度 导致出现了滚动条 页面本来没有滚动条 这样就会抖动,这个问题要怎么解决呢?


    • 管理员
      世纪之光 : 2015年06月13日00:46:41  地下1层 @回复 回复

      这个问题比较难办,超出页面高度的话,肯定会撑开页面,如果你的body的overflow属性可以设置为hidden的话,设置为hidden可以解决这个问题

  17. sevilin : 2016年12月30日11:40:36  -33楼 @回复 回复

    作者你好,用了这个之后,效果基本都能显示,
    但是现在出现一个问题..
    有些列弹出的显示层每行只有1~2个字符..
    导致高度非常大
    有些列每行又稍微多一些,
    不知道什么原因

  18. 十八 : 2017年05月03日16:19:20  -32楼 @回复 回复

    作者你好,使用这个效果的时候,不知道为什么tooltip里面的内容不会换行

给我留言

留言无头像?


×