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.              }  
  • 相关阅读:
    懒加载与预加载
    Javascript之 Ajax 与 JSON
    Q&A:为什么prototype中的方法不能赋值给变量,再调用?
    Javascript之 浅克隆 与 深克隆
    Javascript之 __proto__ 与 prototype
    React入门(二)—— Props属性
    React入门(一)—— State属性
    Flask调用layer-iframe后,如何从服务器端关闭弹出窗
    Python从入门到项目实践(明日科技 吉林大学出版社)
    从实例到数理来解析感知机学习算法(PLA)
  • 原文地址:https://www.cnblogs.com/toSeeMyDream/p/4514410.html
Copyright © 2011-2022 走看看