zoukankan      html  css  js  c++  java
  • Datagrid方法扩展

    最新版本的jQuery Easyui新出来了一个组件叫tooltip,就是提示框。以前的版本没有这个组件的时候就有很多在问,datagrid的单元格,我要加鼠标提示要怎么做。原来我告诉他们的方法都是用formatter,大概方法如下:

    formatter:function(value){
    return '<span title="'+value+'">'+value+'<span>';
    }

     

    这样的方式就利用了浏览器自己的title特性,来达到显示效果。只是这种实现效果还不是非常里想。值得庆幸的是从1.3.3+的版本之后有了tooltip组件我就可以更进一步的自定义我们的提示信息了。

    具体扩展方法如下: 

    /**
    * Datagrid扩展方法tooltip 基于Easyui 1.3.3,可用于Easyui1.3.3+
    * 简单实现,如需高级功能,可以自由修改
    * 使用说明:
    * 在easyui.min.js之后导入本js
    * 代码案例:
    * $("#dg").datagrid({....}).datagrid('tooltip'); 所有列
    * $("#dg").datagrid({....}).datagrid('tooltip',['productid','listprice']); 指定列
    * @author ____′↘夏悸
    */
    $.extend($.fn.datagrid.methods, {
    tooltip : function (jq, fields) {
    return jq.each(function () {
    var panel = $(this).datagrid('getPanel');
    if (fields && typeof fields == 'object' && fields.sort) {
    $.each(fields, function () {
    var field = this;
    bindEvent($('.datagrid-body td[field=' + field + '] .datagrid-cell', panel));
    });
    } else {
    bindEvent($(".datagrid-body .datagrid-cell", panel));
    }
    });

    function bindEvent(jqs) {
    jqs.mouseover(function () {
    var content = $(this).text();
    $(this).tooltip({
    content : content,
    trackMouse : true,
    onHide : function () {
    $(this).tooltip('destroy');
    }
    }).tooltip('show');
    });
    }
    }
    });

  • 相关阅读:
    500. 键盘行
    657. 判断路线成圈
    771. 宝石与石头
    461. 汉明距离
    Java 基本数据类型
    Windows下的DOM操作
    jQuery学习笔记
    Java(16-19)
    Java(1-15)
    总结
  • 原文地址:https://www.cnblogs.com/huangf714/p/5898849.html
Copyright © 2011-2022 走看看