zoukankan      html  css  js  c++  java
  • easyui -grid每列绑定tooltip

    /**用法:*/
    function doCellTip() {
    $('#dg').datagrid('doCellTip', { 'max-width': '100px' });
    }

    /**
    * 扩展两个方法
    */
    $.extend($.fn.datagrid.methods, {
    /**
    * 开打提示功能
    * @param {} jq
    * @param {} params 提示消息框的样式
    * @return {}
    */
    doCellTip: function (jq, params) {
    function showTip(data, td, e) {
    if ($(td).text() == "")
    return;
    data.tooltip.text($(td).text()).css({
    top: (e.pageY + 10) + 'px',
    left: (e.pageX + 20) + 'px',
    'z-index': $.fn.window.defaults.zIndex,
    display: 'block'
    });
    };
    return jq.each(function () {
    var grid = $(this);
    var options = $(this).data('datagrid');
    if (!options.tooltip) {
    var panel = grid.datagrid('getPanel').panel('panel');
    var defaultCls = {
    'border': '1px solid #333',
    'padding': '2px',
    'color': '#333',
    'background': '#f7f5d1',
    'position': 'absolute',
    'max-width': '200px',
    'border-radius': '4px',
    '-moz-border-radius': '4px',
    '-webkit-border-radius': '4px',
    'display': 'none'
    }
    var tooltip = $("<div id='celltip'></div>").appendTo('body');
    tooltip.css($.extend({}, defaultCls, params.cls));
    options.tooltip = tooltip;
    panel.find('.datagrid-body').each(function () {
    var delegateEle = $(this).find('> div.datagrid-body-inner').length ? $(this).find('> div.datagrid-body-inner')[0] : this;
    $(delegateEle).undelegate('td', 'mouseover').undelegate('td', 'mouseout').undelegate('td', 'mousemove').delegate('td', {
    'mouseover': function (e) {
    if (params.delay) {
    if (options.tipDelayTime)
    clearTimeout(options.tipDelayTime);
    var that = this;
    options.tipDelayTime = setTimeout(function () {
    showTip(options, that, e);
    }, params.delay);
    }
    else {
    showTip(options, this, e);
    }

    },
    'mouseout': function (e) {
    if (options.tipDelayTime)
    clearTimeout(options.tipDelayTime);
    options.tooltip.css({
    'display': 'none'
    });
    },
    'mousemove': function (e) {
    var that = this;
    if (options.tipDelayTime)
    clearTimeout(options.tipDelayTime);
    //showTip(options, this, e);
    options.tipDelayTime = setTimeout(function () {
    showTip(options, that, e);
    }, params.delay);
    }
    });
    });

    }

    });
    },
    /**
    * 关闭消息提示功能
    *
    * @param {}
    * jq
    * @return {}
    */
    cancelCellTip: function (jq) {
    return jq.each(function () {
    var data = $(this).data('datagrid');
    if (data.tooltip) {
    data.tooltip.remove();
    data.tooltip = null;
    var panel = $(this).datagrid('getPanel').panel('panel');
    panel.find('.datagrid-body').undelegate('td', 'mouseover').undelegate('td', 'mouseout').undelegate('td', 'mousemove')
    }
    if (data.tipDelayTime) {
    clearTimeout(data.tipDelayTime);
    data.tipDelayTime = null;
    }
    });
    }
    });

  • 相关阅读:
    Mybatis获取插入记录的自增长ID
    mybatisGenerator 代码自动生成报错 Result Maps collection already contains value for BaseResultMap
    <c:if test="value ne, eq, lt, gt,...."> 用法
    大话设计模式之----状态模式
    php文件加锁 lock_sh ,lock_ex
    in_array 判断问题的疑惑解决。
    我是一只IT小小鸟观后感
    《世界是数字的》
    我是一只IT小小鸟
    解压缩
  • 原文地址:https://www.cnblogs.com/huangf714/p/5907906.html
Copyright © 2011-2022 走看看