[easyui] - 在easyui的table中展示提示框

因为在easyui的table中字段过多,而无法展示全时,被迫只能使用这个方法.

使用方式:

  $(‘#dg‘).datagrid({

后的

 queryParams: form2Json(‘searchform‘),

后设置:

            //悬停提示tooltip
            onLoadSuccess: function (data) {
                $(this).datagrid(‘tooltip‘);
            },

之后

columns: [[

后的

   ]]
}, //新增逗号

添加:

        //之下为鼠标悬停table上展示单个字段的tooltip
        $.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();
                        if (content && content != "") {
                            $(this).tooltip({
                                content: content,
                                trackMouse: true,
                                deltaX: 15,
                                deltaY: -5,
                                onShow: function () {
                                    $(this).tooltip(‘tip‘).css({
                                        backgroundColor: ‘#f7f5d1‘,
                                        borderColor: ‘black‘
                                    });
                                }
                            }).tooltip(‘show‘);
                        }
                    });
                }
            }
        })
    //tooltip end

即可.

原文地址:https://www.cnblogs.com/ukzq/p/10474545.html

时间: 2024-11-05 13:33:01

[easyui] - 在easyui的table中展示提示框的相关文章

活动中使用提示框(Toast)

任务名称:活动中使用Toast 任务现象:点击button时,会弹出提示框:You Click Button 步骤 1.创建一个项目,新建活动和加载布局.参考: http://8c925c9a.wiz03.com/share/s/2cABOq0BC4HP2LGV_j2dj_pL2PmFkt3XSkVX2GjSRG3a9rRL 2.定义一个Toast的触发点,可以让按键点击的时候弹出这个Toast protectedvoid onCreate(Bundle savedInstanceState){

Ubuntu12.04中eclipse提示框黑色背景色修改

eclipse提示框的背景颜色使用的是系统的提示框颜色配置,在windows下为黄色,但在Ubuntu12.04(gnome)下却 是黑色,造成提示内容很难看清. 在eclipse中我们是无法修改这个颜色的配置的,只能通过修改系统的颜色配置.在ubuntu11.10以前,我们是 可以能过自定义系统外观来修改这一颜色的配置的,但自ubuntu11.10以后,就没有相关的操作界面了,只能通过修改配置文件的方式实现了.这个文件 位于/usr/share/themes/下对应的主题文件夹下,如你使用Ra

在echarts中自定义提示框内容

1.期望效果 以柱状图为例,在鼠标滑过每个数据标签时,为了更友好地显示数据内容,需要对显示的数据内容作格式化处理,添加自定义内容. 如下图,鼠标滑过每个数据项时, 第1张是默认提示框: 第2张是处理成百分比数据后,显示当前单个数据项的提示框: 第3张是处理成百分比数据后,显示当前横坐标下多个数据项的提示框. 图1.默认提示框.jpg 图2.单项提示框.jpg 图3.多项提示框.jpg 2.实现 (本文代码只涉及配置项的部分代码) 上述图片的效果可用echarts的tooltip组件中的一个for

解决input中智能提示框onblur与onclick冲突的问题

背景: 制作一个类似百度输入法的智能提示框, 其中当关键词输入进来时,会有智能提示展开,实际需求是当点击智能提示框的汉字时,输入框中自动补全并关闭智能提示, 当点击其他区域时,智能提示框自动隐藏,如下所示: 分析:点击用onclick事件触发获取的值,然后点击外框用失去焦点的方式解决 但实际出现效果是: 如果添加了失去焦点的方法,点击提示文本的时候,文字也会因为输入框失去焦点而被隐藏,以至于文字无法被选中上去: 问题出现时用方法如下: //oA是智能提示框的列表中的单个文字 oA.onclick

echarts中tooltip提示框位置控制

option = { title: { text: '折线图堆叠' }, tooltip: { trigger: 'axis', position: function(point, params, dom, rect, size){ //其中point为当前鼠标的位置,size中有两个属性:viewSize和contentSize,分别为外层div和tooltip提示框的大小 var x = point[0];// var y = point[1]; var viewWidth = size.v

javascript中简单提示框

.help-tip{ width: 350px; border:1px solid #A0A0A0; background-color: #F8F8F8; border-radius: 5px; display: none; position: absolute; z-index:5555; left: 0; } .help-tip p{ padding: 5px 5px 0 8px; font-size: 13px; color: black; } function show(){ $(".h

第一百九十六节,jQuery EasyUI,Tooltip(提示框)组件

jQuery EasyUI,Tooltip(提示框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Tooltip(提示框)组件的使用方法,,这个组件不依赖于其 他组件. 一.加载方式 //class 加载方式 <a href="http://www.ycku.com" title="这是一个提示信息!" class="easyui-tooltip">Hover Me <

Bootstrap_Javascript_提示框

一. 结构分析 在Bootstrap框架中的提示框,结构非常简单,常常使用的是按钮<button>标签或者链接<a>标签来制作.不管是使用按钮还是链接来制作提示框,他们都有一个共性: 1 . 通过 title 属性的值来定义提示信息(也可以使用自定义属性 data-original-title 来设置提示信息). 2 . 通过 data-placement 自定义属性来控制提示信息框的位置,根据四种不同的位置,data-placement具有四个值:top.right.bottom

Bootstrap提示框

前面的话 提示框是一个比较常见的功能,一般来说是鼠标移动到特定元素上时,显示相关的提示语.本文将详细介绍Bootstrap提示框 基本用法 Bootstrap框架中的提示框,结构非常简单,常常使用的是按钮<button>标签或者链接<a>标签来制作.不管是使用按钮还是链接来制作提示框,他们都需要满足下列条件: 1.通过 title 属性的值来定义提示信息(也可以使用自定义属性 data-original-title 来设置提示信息),title属性的优先级高 2.通过 data-p