当前位置：首页 > news >正文

Easyui悬停组件

news 来源：原创 2025/6/5 13:34:14

文章目录

- - 一、EasyUI 官方悬停解决方案：Tooltip 组件
  - - 1. 基础用法
    - 2. 高级配置项
  - 二、进阶场景：Datagrid 表格悬停扩展
  - - 1. 监听行事件
    - 2. 第三方扩展包（流云大神版）
  - 三、自定义悬停样式
  - 四、常见问题解决

在EasyUI中，没有直接命名为“悬停组件”的独立控件，但可通过其核心组件（如tooltip）或扩展功能实现悬停效果。以下是具体实现方式及示例：

一、EasyUI 官方悬停解决方案：Tooltip 组件

核心功能：在鼠标悬停时显示自定义提示信息，支持纯文本、HTML内容及样式定制。

1. 基础用法

HTML标记创建：

<a href="#" title="基础提示信息" class="easyui-tooltip">悬停查看提示</a>

JavaScript初始化（灵活配置）：

$('#element').tooltip({position: 'right', // 提示框位置：left/right/top/bottomcontent: '<strong>HTML内容</strong>', // 支持HTMLtrackMouse: true,  // 提示框跟随鼠标移动showDelay: 500,    // 显示延迟（毫秒）onShow: function(){ $(this).tooltip('tip').css('background', '#ffeb3b'); // 自定义样式}
});

2. 高级配置项

属性/事件	说明
`deltaX/deltaY`	微调提示框位置（像素）
`onUpdate`	内容更新时触发，可用于动态加载数据
`onPosition`	位置变化时触发，返回当前坐标
`showEvent`	触发显示的事件（默认`mouseenter`，可改为`click`）

二、进阶场景：Datagrid 表格悬停扩展

在表格中实现行级悬停提示（如显示详细信息或图片预览），需结合Datagrid事件与Tooltip。

1. 监听行事件

$('#datagrid').datagrid({onLoadSuccess: function() {$('.datagrid-row').mouseover(function() {const rowData = $('#datagrid').datagrid('getSelected');// 动态生成提示内容（如从行数据中提取）const tooltipContent = `姓名：${rowData.name}<br>部门：${rowData.dept}`;$(this).tooltip({content: tooltipContent,position: 'right'}).tooltip('show');}).mouseout(function() {$(this).tooltip('hide');});}
});

2. 第三方扩展包（流云大神版）

引入扩展JS文件后，可直接通过rowTooltip属性配置：

$('#datagrid').datagrid({rowTooltip: function(index, row) {if (row.status === 'error') {return $('<div>').css('color', 'red').text('数据异常！');}}
});

三、自定义悬停样式

通过CSS覆盖默认样式，实现个性化提示框：

/* 修改提示框背景色与圆角 */
.tooltip-content {background: #2196F3 !important;border-radius: 4px !important;padding: 8px !important;
}

四、常见问题解决

提示框不显示：
- 检查是否遗漏easyui-tooltip类或JavaScript初始化代码。
- 确认元素可访问（如未被display:none隐藏）。
动态内容更新：
- 使用update方法或触发onUpdate事件：
```
$('#element').tooltip('update', '新内容');
```
性能优化：
- 对大量数据表格，避免在onLoadSuccess中频繁绑定事件，改用事件委托。