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.              }  
  • 相关阅读:
    jq 获取下一个兄弟原素 下拉箭头旋转
    weui复选框无法传值
    小乌龟 coding 克隆、提交一直提示无权限
    mysql 时间操作
    Mysql表结构导出excel(含数据类型、字段备注注释)
    sql server数据库文件的迁移(mdf&ldf文件)
    thinkphp 5 _initialize 使用问题
    thinkphp5 or
    找实习与校招总结——经验与收获2021
    千兆网数据CRC检验和过滤
  • 原文地址:https://www.cnblogs.com/toSeeMyDream/p/4514410.html
Copyright © 2011-2022 走看看