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.              }  
  • 相关阅读:
    C# 两个窗体中相互切换的方法
    Linq对DataTable数据的分组统计
    如何让窗体大小随着控件的大小变化而变化
    两张表解决用户自定义数据库之思路
    picturebox显示用字符串代表图片名称的(已导入资源的)图片
    如何将access高版本数据库保存为低版本的?
    Microsoft.Jet.OLEDB.4.0和Microsoft.ACE.OLEDB.12.0的区别
    条件编译解决AutoCAD多版本问题
    一个爬取股票信息的爬虫程序
    Python爬虫抓取东方财富网股票数据并实现MySQL数据库存储
  • 原文地址:https://www.cnblogs.com/toSeeMyDream/p/4514410.html
Copyright © 2011-2022 走看看