Easyui悬停组件

news2025/6/6 7:21:46

文章目录

- - 一、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/bottom
  content: '<strong>HTML内容</strong>', // 支持HTML
  trackMouse: 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中频繁绑定事件，改用事件委托。