具体扩展方法如下:
/**
* 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的1.3.3版本中,作者新增了tooltip组件,尽管样式看起来也...之前我写过一篇《扩展:datagrid鼠标经过提示单元格内容》那就是用纯编码生成的tip,更为丑陋,有了Easyui 1.3.3的tooltip,我们实现起来就很容易了
datagrid添加tooltip及超出宽度添加省略号
在给定的部分代码中,我们看到了一个名为`doCellTip`的方法被添加到了EasyUI的`datagrid`方法集合中。这个方法的主要目的是为了在数据表格的单元格上实现tooltip功能。下面,我们将详细解析这一过程: 1. **初始化...
9. `plugins`:扩展插件文件夹,提供了额外的功能模块,可以进一步增强EasyUI的使用范围。 jQuery EasyUI提供的主要组件包括但不限于: 1. 数据网格(datagrid):用于展示和操作表格数据,支持排序、分页、搜索等...
- **数据展示组件**:如表格(datagrid)、树形视图(tree)和表单(form),用于显示和操作大量数据。 - **导航组件**:如菜单(menu)、工具栏(toolbar)、导航条(navbar)和面包屑(breadcrumb),提供页面...
这些组件包括但不限于:数据网格(datagrid)、表单(form)、对话框(dialog)、菜单(menu)、下拉选择框(combobox)、滑块(slider)以及各种按钮和提示(tooltip)。这些组件不仅样式统一,而且功能强大,例如...
- `$(selector).easyUI(method)`: 这是调用 EasyUI 方法的基本格式,其中 selector 是选择器,method 是具体的方法名。 - 方法参数:许多方法接收一个或多个参数,用于配置组件行为或传递数据。 - 事件监听:...
//扩展 $.extend($.fn.datagrid.methods, { /** * 开打提示功能 * @param {} jq * @param {} params 提示消息框的样式 * @return {} */ doCellTip : function(jq, params) { function showTip(data, td, e) { if ($...
1. **组件介绍**:文档会详细介绍EasyUI提供的各种组件,如`datagrid`(数据网格)、`dialog`(对话框)、`panel`(面板)、`menu`(菜单)、`tooltip`(提示框)等。每个组件都会包括其基本用法、属性、方法和事件...
为了增强表单的交互性,你可以使用 EasyUI 的 `form` 方法来处理表单的提交事件,进行异步数据交换: ```javascript $('#myForm').form({ url: 'submit.php', onSubmit: function(){ return $(this).form('...
EasyUI 的核心组件包括:布局(layout)、表格(datagrid)、对话框(dialog)、菜单(menu)、表单(form)、树形控件(tree)、下拉树(combotree)、下拉框(combobox)、按钮(button)、提示(tooltip)等。...
在这个例子中,`#dg`是表格的ID,`datagrid`方法初始化了数据网格,`url`属性指定数据来源,`columns`定义了列的配置。 总的来说,EasyUI 1.3.2为前端开发者提供了一套完整且易于使用的界面构建工具,使得在不编写...
在1.2.5版本中,它包含了诸如对话框(dialog)、表格(datagrid)、表单(form)、菜单(menu)、按钮(button)等多种常见的UI组件,以及布局(layout)、树形控件(tree)、下拉树(combobox)、提示(tooltip)等...
"jQuery EasyUI 1.5.5" 是一个基于 jQuery 的前端开发框架,它为构建交互式、响应式的Web应用程序提供了丰富的组件和便捷的API。EasyUI 的目标是简化前端开发,让开发者能够快速地创建功能完备的用户界面,而无需...
除此之外,jQuery EasyUI 还包括布局(layout)、面板(panel)、按钮(button)、提示(tooltip)、滑块(slider)、时间选择器(datetimebox)等组件,覆盖了网页开发中的常见需求。每个组件都有一套完善的文档和...
例如,你可以通过调用`$.fn.datagrid`方法来初始化、加载、刷新或执行其他操作在数据网格上。每个组件都有一系列的选项(options)来配置其行为,如数据源(data)、列定义(columns)等,以及一系列的方法(methods...
在实际项目中,开发者通常会结合EasyUI的插件进一步扩展功能,比如使用 `easyui-layout` 插件实现页面布局,使用 `easyui-tabs` 实现标签页切换,或使用 `easyui-validator` 进行表单验证。 总的来说,jQuery ...
在"EasyUI表格合并"这一主题中,我们主要讨论的是如何使用EasyUI的datagrid组件来实现表格的行或列合并。在EasyUI的datagrid中,通过设置特定的属性,比如`colspan`和`rowspan`,可以实现单元格的跨行或跨列。这在...
除此之外,EasyUI 还提供了菜单(menu)、工具栏(toolbar)、提示(tooltip)、进度条(progressbar)等辅助组件,增强了用户体验。这些组件都可以通过简单的 HTML 标签和 CSS 类来实现,极大地提高了开发效率。 ...
jQuery EasyUI 的核心在于其组件化的设计,这些组件包括数据网格(datagrid)、下拉菜单(combobox)、对话框(dialog)、表单(form)、布局(layout)、菜单(menu)、树形视图(tree)、通知(tooltip)等。...