`

基于1.3.3版本tooltip的datagrid单元格tip实现

 
阅读更多
同时其功能也算是比较丰富。之前我写过一篇《扩展:datagrid鼠标经过提示单元格内容》那就是用纯编码生成的tip,更为丑陋,有了Easyui 1.3.3的tooltip,我们实现起来就很容易了,直接上代码:

实现代码
$.extend($.fn.datagrid.methods, {      
    /**
     * 开打提示功能    
     * @param {} jq    
     * @param {} params 提示消息框的样式    
     * @return {}    
     */     
    doCellTip:function (jq, params) {      
        function showTip(showParams, td, e, dg) {      
            //无文本,不提示。      
            if ($(td).text() == "") return;      
               
            params = params || {};   
            var options = dg.data('datagrid');      
            showParams.content = '<div class="tipcontent">' + showParams.content + '</div>';      
            $(td).tooltip({      
                content:showParams.content,      
                trackMouse:true,      
                position:params.position,      
                onHide:function () {      
                    $(this).tooltip('destroy');      
                },      
                onShow:function () {      
                    var tip = $(this).tooltip('tip');      
                    if(showParams.tipStyler){      
                        tip.css(showParams.tipStyler);      
                    }      
                    if(showParams.contentStyler){      
                        tip.find('div.tipcontent').css(showParams.contentStyler);      
                    }   
                }      
            }).tooltip('show');      
     
        };      
        return jq.each(function () {      
            var grid = $(this);      
            var options = $(this).data('datagrid');      
            if (!options.tooltip) {      
                var panel = grid.datagrid('getPanel').panel('panel');      
                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[field]', {      
                        'mouseover':function (e) {   
                            //if($(this).attr('field')===undefined) return;      
                            var that = this;   
                            var setField = null;   
                            if(params.specialShowFields && params.specialShowFields.sort){   
                                for(var i=0; i<params.specialShowFields.length; i++){   
                                    if(params.specialShowFields[i].field == $(this).attr('field')){   
                                        setField = params.specialShowFields[i];   
                                    }   
                                }   
                            }   
                            if(setField==null){   
                                options.factContent = $(this).find('>div').clone().css({'margin-left':'-5000px', 'width':'auto', 'display':'inline', 'position':'absolute'}).appendTo('body');      
                                var factContentWidth = options.factContent.width();      
                                params.content = $(this).text();      
                                if (params.onlyShowInterrupt) {      
                                    if (factContentWidth > $(this).width()) {      
                                        showTip(params, this, e, grid);      
                                    }      
                                } else {      
                                    showTip(params, this, e, grid);      
                                }    
                            }else{   
                                panel.find('.datagrid-body').each(function(){   
                                    var trs = $(this).find('tr[datagrid-row-index="' + $(that).parent().attr('datagrid-row-index') + '"]');   
                                    trs.each(function(){   
                                        var td = $(this).find('> td[field="' + setField.showField + '"]');   
                                        if(td.length){   
                                            params.content = td.text();   
                                        }   
                                    });   
                                });   
                                showTip(params, this, e, grid);   
                            }   
                        },      
                        'mouseout':function (e) {      
                            if (options.factContent) {      
                                options.factContent.remove();      
                                options.factContent = null;      
                            }      
                        }      
                    });      
                });      
            }      
        });      
    },      
    /**
     * 关闭消息提示功能    
     * @param {} jq    
     * @return {}    
     */     
    cancelCellTip:function (jq) {      
        return jq.each(function () {      
            var data = $(this).data('datagrid');      
            if (data.factContent) {      
                data.factContent.remove();      
                data.factContent = null;      
            }      
            var panel = $(this).datagrid('getPanel').panel('panel');      
            panel.find('.datagrid-body').undelegate('td', 'mouseover').undelegate('td', 'mouseout').undelegate('td', 'mousemove')      
        });      
    }      
});  

 

分享到:
评论

相关推荐

    easyui datagrid单元格tip实现

    在Easyui的1.3.3版本中,作者新增了tooltip组件,尽管样式看起来也...之前我写过一篇《扩展:datagrid鼠标经过提示单元格内容》那就是用纯编码生成的tip,更为丑陋,有了Easyui 1.3.3的tooltip,我们实现起来就很容易了

    污水处理厂3D渲染工艺图及其数字化应用

    内容概要:本文详细介绍了污水处理厂的3D渲染高清工艺图,展示了从预处理到生化处理等多个工艺段的设备细节。不仅提供了视觉上的逼真效果,还深入探讨了背后的数字技术支持,如Python代码用于管理设备参数、Houdini的粒子系统模拟鸟类飞行以及Three.js实现实时交互展示。此外,文中通过实际案例(如老张的需求)展现了这些技术的实际应用场景。 适合人群:从事污水处理工程设计、投标工作的工程师和技术人员,对3D渲染和数字化工具有兴趣的相关从业者。 使用场景及目标:①为投标文件提供高质量的视觉材料;②利用代码实现设备参数的动态调整,满足不同工况下的展示需求;③通过Web端进行实时互动展示,增强项目沟通效果。 其他说明:随着技术的发展,传统工程行业也开始融入更多数字化元素,如虚拟现实(VR)巡检等新兴手段的应用前景广阔。

    毕业论文-周边优惠卡券5.9.2小程序+前端-整站商业源码.zip

    毕业论文-周边优惠卡券5.9.2小程序+前端-整站商业源码.zip

    毕业论文-芸众圈子社区V1.7.8 开源版-整站商业源码.zip

    毕业论文-芸众圈子社区V1.7.8 开源版-整站商业源码.zip

    毕业设计-erphpdown9.82美化版-整站商业源码.zip

    毕业设计-erphpdown9.82美化版-整站商业源码.zip

    毕业设计-java安卓原生影视APP源码-整站商业源码.zip

    毕业设计-java安卓原生影视APP源码-整站商业源码.zip

    风光储交直流微电网孤岛Vf控制技术研究与应用

    内容概要:本文详细介绍了风光储交直流微电网模型及其孤岛Vf(电压和频率)控制策略。首先阐述了风光储交直流微电网作为新型分布式能源系统的重要性和组成要素,包括风力发电、光伏发电、储能系统和交直流负荷。接着讨论了孤岛模式下微电网的Vf控制策略,强调了检测孤岛状态并及时切换到Vf控制模式的重要性。文中还具体分析了如何设定合理的电压和频率参考值,协调各能源系统的运行,以确保微电网在孤岛模式下的稳定供电。最后指出,完善微电网模型和有效实施孤岛Vf控制策略对促进可再生能源发展和能源结构调整有重大意义。 适用人群:从事新能源研究、微电网设计与运维的技术人员,以及关注可再生能源发展的科研工作者。 使用场景及目标:适用于希望深入了解风光储交直流微电网及其孤岛控制机制的专业人士,旨在提升微电网的稳定性和可靠性,推动智能电网建设。 其他说明:本文不仅提供了理论分析,还涉及实际应用场景和技术细节,有助于读者全面掌握相关技术和最新进展。

    实训商业源码-美容美发营销版小程序 V1.8.4-论文模板.zip

    实训商业源码-美容美发营销版小程序 V1.8.4-论文模板.zip

    风光储并网协同运行模型及其双闭环控制策略MATLAB仿真

    内容概要:本文详细介绍了风光储并网协同运行模型及其双闭环控制策略,并探讨了单极调制技术在Matlab Simulink中的应用。首先阐述了风光储并网的重要性,指出风能和太阳能虽然具有无限的能源潜力和环保优势,但也存在间歇性和不稳定性的问题。接着介绍了一个整合风力发电、光伏发电和储能系统的协同运行模型,强调每个组件的精密协调与控制,以确保并网的效率和稳定性。然后解释了双闭环控制策略的作用机制,即内环对电流或电压进行快速响应控制,外环调节系统的能量平衡和输出,从而确保风电和光电的稳定输出及储能系统的合理充放电。此外,还讨论了单极调制技术的应用,它有助于优化能源转换和传输,减少能量损失,提高整体效率。最后,展示了如何使用Matlab Simulink进行仿真测试,以验证这些技术和方法的有效性。 适合人群:从事新能源领域的研究人员和技术人员,尤其是那些关注风能、太阳能和储能系统集成的人士。 使用场景及目标:适用于希望深入了解风光储并网系统的设计、控制和仿真的专业人士。目标是在实际项目中应用这些理论和技术,构建高效的风光储并网系统。 其他说明:随着技术的发展,风光储并网系统有望在未来提供更多绿色能源,解决传统能源带来的环境问题。

    毕业论文-摇周边营销V2.8.0-整站商业源码.zip

    毕业论文-摇周边营销V2.8.0-整站商业源码.zip

    2025年度小学手绘风格开学季班会模板.pptx

    2025年度小学手绘风格开学季班会模板

    单相三电平NPC逆变器:载波层叠下SVPWM与SPWM调制技术的应用与对比

    内容概要:本文详细介绍了单相三电平NPC逆变器的工作原理和技术特点,重点探讨了载波层叠技术以及两种主要的调制方法——SVPWM(空间矢量脉宽调制)和SPWM(正弦脉宽调制)。文中解释了这两种调制方式的基本概念、实现机制及其各自的优点和局限性,并提供了部分伪代码示例帮助理解。此外,还讨论了不同应用场景下如何选择最合适的调制策略以满足特定的需求。 适合人群:从事电力电子研究的技术人员、高校相关专业师生及对逆变器技术感兴趣的工程爱好者。 使用场景及目标:为理解和设计单相三电平NPC逆变器提供理论依据和技术指导,特别是在需要优化输出电压质量、降低谐波失真的情况下。 其他说明:文章不仅从理论上阐述了各种技术手段的作用机理,同时也给出了简单的代码片段辅助读者更好地掌握实际操作流程。

    无刷直流电机BLDC无位置传感器控制及MATLAB Simulink仿真研究

    内容概要:本文详细探讨了无刷直流电机(BLDC)在无位置传感器控制下的启动特性和突加负载响应。文章首先介绍了启动阶段的大电流高转矩特性,展示了启动过程中电流尖峰现象及其原因。接着讨论了反电势观测器的设计与实现,特别是滑模观测器的应用,用于估算转子位置。此外,还深入讲解了速度环PI控制器的参数设置,确保系统在突加负载时能够快速恢复并保持稳定运行。最后提到了相位补偿的重要性以及其实现方法。 适合人群:对无刷直流电机控制系统感兴趣的工程师和技术人员,尤其是那些希望深入了解无位置传感器控制技术和MATLAB Simulink仿真的专业人士。 使用场景及目标:适用于需要优化BLDC电机性能的研究项目或工业应用,旨在提高系统的可靠性和效率,特别是在启动和负载变化的情况下。 其他说明:文中提供了具体的MATLAB代码片段,帮助读者更好地理解和实现相关算法。同时提醒了一些常见的陷阱和注意事项,有助于避免实际操作中的错误。

    毕业论文-在线考试系统源码 学生教师用-整站商业源码.zip

    毕业论文-在线考试系统源码 学生教师用-整站商业源码.zip

    轨道车辆转向架3D建模与构架强度仿真分析——CRH380B、CW-200及209HS型转向架关键技术解析

    内容概要:本文介绍了CRH380B、CW-200及209HS型轨道车辆客车转向架的关键技术和3D建模方法。主要内容涵盖转向架的装配体3D图及其关键零部件如轮轴系统、构架、制动闸片、空气弹簧和减震器的介绍。文中还展示了利用SolidWorks软件进行转向架3D建模的具体步骤,包括轮轴系统的草图绘制和构架的拉伸特征创建。此外,文章强调了构架结构强度仿真分析的重要性,并指出部分模型为简化版本,旨在帮助读者快速理解和掌握转向架的基本结构和原理。 适合人群:对轨道交通工程感兴趣的技术爱好者、学生以及从事相关领域的工程师。 使用场景及目标:适用于希望深入了解轨道车辆转向架设计和仿真的技术人员,目标是提高他们对转向架的理解并为其后续的设计优化提供理论支持。 其他说明:文中提供的代码片段仅为示例,实际建模过程中需要考虑更多细节和参数配置。同时,简化后的3D图有助于初学者快速入门,但并不适合作为精确制造的依据。

    毕业设计-婚庆摄影wordpress企业主题-整站商业源码.zip

    毕业设计-婚庆摄影wordpress企业主题-整站商业源码.zip

    实训商业源码-聚合客服 22.7.0 PC端插件 4.9.0-论文模板.zip

    实训商业源码-聚合客服 22.7.0 PC端插件 4.9.0-论文模板.zip

    三相并网逆变器PQ控制与SVPWM技术:750V直流侧电压下的波形优化与参数开发

    内容概要:本文详细介绍了三相并网逆变器采用PQ控制和SVPWM技术进行波形优化和参数开发的过程。文中探讨了PQ控制对有功功率和无功功率的精确管理,以及SVPWM在优化开关序列、减少谐波分量方面的优势。针对750V直流侧电压、220V交流侧电压和20kHz开关频率的具体参数,作者通过仿真和实验设计,成功实现了10e3kW有功功率的控制,并确保了良好的波形质量。此外,文章还讨论了两电平和三电平拓扑的选择及其应用场景,强调了三电平拓扑在高电压和大功率应用中的优越性。 适合人群:从事电力电子、逆变器设计和控制策略研究的专业人士和技术爱好者。 使用场景及目标:适用于需要深入了解三相并网逆变器控制技术和调制方法的研发人员,帮助他们掌握PQ控制和SVPWM算法的实际应用技巧,提升逆变器性能和效率。 其他说明:文章还展望了未来的研究方向,如引入更先进的控制策略和调制技术,以及逆变器在可再生能源并网和微电网中的应用前景。

    毕业设计-多商家营销活动平台2.0.0 小程序前端+后端-整站商业源码.zip

    毕业设计-多商家营销活动平台2.0.0 小程序前端+后端-整站商业源码.zip

    毕业设计-表白墙网站源码 带后台管理-整站商业源码.zip

    毕业设计-表白墙网站源码 带后台管理-整站商业源码.zip

Global site tag (gtag.js) - Google Analytics