`
humlzy
  • 浏览: 21420 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

easyui Datagrid方法扩展 - tooltip

 
阅读更多

具体扩展方法如下:

 

/**

 * Datagrid扩展方法tooltip 基于Easyui 1.3.3,可用于Easyui1.3.3+

 * 简单实现,如需高级功能,可以自由修改

 * 使用说明:

 *   在easyui.min.js之后导入本js

 *   代码案例:

 *      $("#dg").datagrid({....}).datagrid('tooltip'); 所有列

 *      $("#dg").datagrid({....}).datagrid('tooltip',['productid','listprice']); 指定列

 *   例:

 *   在onLoadSuccess中加入如下代码

onLoadSuccess: function(data) {

$(this).datagrid('tooltip',['name','title']);       //数据过长会浮动显示

}

 * @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');

            });

        }

    }

 

});

分享到:
评论

相关推荐

    easyui datagrid单元格tip实现

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

    easyui datagrid tip 超出宽度省略

    datagrid添加tooltip及超出宽度添加省略号

    easyui利用tooltip实现title功能

    在给定的部分代码中,我们看到了一个名为`doCellTip`的方法被添加到了EasyUI的`datagrid`方法集合中。这个方法的主要目的是为了在数据表格的单元格上实现tooltip功能。下面,我们将详细解析这一过程: 1. **初始化...

    jquery-easyui-1.2.6

    9. `plugins`:扩展插件文件夹,提供了额外的功能模块,可以进一步增强EasyUI的使用范围。 jQuery EasyUI提供的主要组件包括但不限于: 1. 数据网格(datagrid):用于展示和操作表格数据,支持排序、分页、搜索等...

    全套EasyUI示例源码

    - **数据展示组件**:如表格(datagrid)、树形视图(tree)和表单(form),用于显示和操作大量数据。 - **导航组件**:如菜单(menu)、工具栏(toolbar)、导航条(navbar)和面包屑(breadcrumb),提供页面...

    jquery-easyui-1.2.2

    这些组件包括但不限于:数据网格(datagrid)、表单(form)、对话框(dialog)、菜单(menu)、下拉选择框(combobox)、滑块(slider)以及各种按钮和提示(tooltip)。这些组件不仅样式统一,而且功能强大,例如...

    jquery easyui 中文api

    - `$(selector).easyUI(method)`: 这是调用 EasyUI 方法的基本格式,其中 selector 是选择器,method 是具体的方法名。 - 方法参数:许多方法接收一个或多个参数,用于配置组件行为或传递数据。 - 事件监听:...

    EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容

    //扩展 $.extend($.fn.datagrid.methods, { /** * 开打提示功能 * @param {} jq * @param {} params 提示消息框的样式 * @return {} */ doCellTip : function(jq, params) { function showTip(data, td, e) { if ($...

    jQuery-easyUi-chm文档

    1. **组件介绍**:文档会详细介绍EasyUI提供的各种组件,如`datagrid`(数据网格)、`dialog`(对话框)、`panel`(面板)、`menu`(菜单)、`tooltip`(提示框)等。每个组件都会包括其基本用法、属性、方法和事件...

    jQuery EasyUI 扩展(tip和form)

    为了增强表单的交互性,你可以使用 EasyUI 的 `form` 方法来处理表单的提交事件,进行异步数据交换: ```javascript $('#myForm').form({ url: 'submit.php', onSubmit: function(){ return $(this).form('...

    easyui1.5中文API+easyui1.5.5.4

    EasyUI 的核心组件包括:布局(layout)、表格(datagrid)、对话框(dialog)、菜单(menu)、表单(form)、树形控件(tree)、下拉树(combotree)、下拉框(combobox)、按钮(button)、提示(tooltip)等。...

    easyui-1.3.2

    在这个例子中,`#dg`是表格的ID,`datagrid`方法初始化了数据网格,`url`属性指定数据来源,`columns`定义了列的配置。 总的来说,EasyUI 1.3.2为前端开发者提供了一套完整且易于使用的界面构建工具,使得在不编写...

    0分免费下载jQuery easyui-1.2.5 含Demo 非常好的框架结构

    在1.2.5版本中,它包含了诸如对话框(dialog)、表格(datagrid)、表单(form)、菜单(menu)、按钮(button)等多种常见的UI组件,以及布局(layout)、树形控件(tree)、下拉树(combobox)、提示(tooltip)等...

    jquery-easyui-1.5.5

    "jQuery EasyUI 1.5.5" 是一个基于 jQuery 的前端开发框架,它为构建交互式、响应式的Web应用程序提供了丰富的组件和便捷的API。EasyUI 的目标是简化前端开发,让开发者能够快速地创建功能完备的用户界面,而无需...

    jQuery EasyUI-1.4.1

    除此之外,jQuery EasyUI 还包括布局(layout)、面板(panel)、按钮(button)、提示(tooltip)、滑块(slider)、时间选择器(datetimebox)等组件,覆盖了网页开发中的常见需求。每个组件都有一套完善的文档和...

    easyui-1.3.2 API

    例如,你可以通过调用`$.fn.datagrid`方法来初始化、加载、刷新或执行其他操作在数据网格上。每个组件都有一系列的选项(options)来配置其行为,如数据源(data)、列定义(columns)等,以及一系列的方法(methods...

    jQuery EasyUI 1.4.3 版 API 中文版

    在实际项目中,开发者通常会结合EasyUI的插件进一步扩展功能,比如使用 `easyui-layout` 插件实现页面布局,使用 `easyui-tabs` 实现标签页切换,或使用 `easyui-validator` 进行表单验证。 总的来说,jQuery ...

    EasyUI表格合并,及echarts折线图,导出折线图为图片

    在"EasyUI表格合并"这一主题中,我们主要讨论的是如何使用EasyUI的datagrid组件来实现表格的行或列合并。在EasyUI的datagrid中,通过设置特定的属性,比如`colspan`和`rowspan`,可以实现单元格的跨行或跨列。这在...

    easyui 1.4.3

    除此之外,EasyUI 还提供了菜单(menu)、工具栏(toolbar)、提示(tooltip)、进度条(progressbar)等辅助组件,增强了用户体验。这些组件都可以通过简单的 HTML 标签和 CSS 类来实现,极大地提高了开发效率。 ...

    最新的jquery easyui 1.3.4 + 中文API

    jQuery EasyUI 的核心在于其组件化的设计,这些组件包括数据网格(datagrid)、下拉菜单(combobox)、对话框(dialog)、表单(form)、布局(layout)、菜单(menu)、树形视图(tree)、通知(tooltip)等。...

Global site tag (gtag.js) - Google Analytics