zoukankan      html  css  js  c++  java
  • easyui datagrid列中使用tooltip

    要实现这样一个效果:数据加载到DATAGRID中,鼠标移至某一列时,会弹出tooltip提示框。

    最初的实现方法:

    [javascript] view plaincopy
    1. { field: 'Reply', title: '备注',  220, align: "center",  
    2.                 formatter: function(value, row, index) {  
    3.                     var abValue = value;  
    4.                     if (value.length>=22) {  
    5.                         abValue = value.substring(0,19) + "...";  
    6.                     }  
    7.                     var content = '<a href="#" title="' + value + '" class="tooltip">' + abValue + '</a>';  
    8.                     return content;  
    9.                 }  
    10.   
    11.                }  


    然而效果并没有实现,这原因是动态产生datagrid后,对tooltip未重新渲染,于时用$.parse重新渲染,但还是得到不预定的效果。

    后来在datagrid的onLoadSuccess事件中去产生tooltip,代码如下:

    [javascript] view plaincopy
      1. { field: 'Reply', title: '备注',  220, align: "center",  
      2.                 formatter: function(value, row, index) {  
      3.                     var abValue = value;  
      4.                     if (value.length>=22) {  
      5.                         abValue = value.substring(0,19) + "...";  
      6.                     }  
      7.                     var content = '<a href="#" title="' + value + '" class="note">' + abValue + '</a>';  
      8.                     return content;  
      9.                 }  
      10.   
      11.                }  
      12.   
      13.   
      14. onLoadSuccess:function(data)  
      15.              {  
      16.                 $(".note").tooltip(  
      17.                     {  
      18.                     onShow: function(){  
      19.                         $(this).tooltip('tip').css({   
      20.                             '300',  
      21.                               
      22.                             boxShadow: '1px 1px 3px #292929'                          
      23.                         });  
      24.                     }  
      25.                 }  
      26.                 );  
      27.              }  
  • 相关阅读:
    安装和配置nginx
    tomcat 生产发布脚本
    nginx 静态页面访问
    redis 搭建主从
    redis 安装
    perl 操作redis
    mysql 用户除了root一般不建议本地登录
    mysql创建用户
    mysql 查看排序集
    perl 安装Cpan
  • 原文地址:https://www.cnblogs.com/toSeeMyDream/p/4514410.html
Copyright © 2011-2022 走看看