Getorgchart视图中鼠标悬停与移出事件实现及元素详情获取问询

嘿，我刚好对GetOrgChart的事件处理比较熟，这就给你一步步说明怎么实现需求，以及如何拿到节点的详细信息～

核心思路 #

GetOrgChart本身提供了专门的节点鼠标事件：nodeMouseEnter（鼠标悬停进入节点）和nodeMouseLeave（鼠标移出节点）。你可以通过这两个事件来监听交互，并且事件回调会传入包含节点详情的参数，直接就能获取你需要的元素信息。

具体实现代码 #

方式1：初始化图表时直接配置事件 #

这种方式适合在创建图表的时候就把事件逻辑写好：

// 初始化GetOrgChart
var orgChart = new getOrgChart(document.getElementById("orgChartContainer"), {
  dataSource: [
    { id: 1, name: "John Doe", title: "CEO", department: "Executive" },
    { id: 2, parentId: 1, name: "Jane Smith", title: "CTO", department: "Tech" }
    // 更多节点数据...
  ],
  // 配置事件
  events: {
    // 鼠标悬停进入节点事件
    nodeMouseEnter: function(event, data) {
      // 这里的data就是当前节点的完整数据对象
      console.log("鼠标悬停节点详情：", data);
      // 你可以在这里做任何操作，比如显示弹窗、修改节点样式
      this.updateNode(data.id, {
        fill: "#e6f7ff" // 悬停时修改节点背景色
      });
    },
    // 鼠标移出节点事件
    nodeMouseLeave: function(event, data) {
      console.log("鼠标移出节点详情：", data);
      // 恢复节点原有样式
      this.updateNode(data.id, {
        fill: "#ffffff" // 恢复默认背景色
      });
    }
  }
});

方式2：图表初始化后动态绑定事件 #

如果需要后续动态添加事件监听，可以用bind方法：

// 先初始化图表
var orgChart = new getOrgChart(document.getElementById("orgChartContainer"), {
  dataSource: [
    { id: 1, name: "John Doe", title: "CEO", department: "Executive" },
    { id: 2, parentId: 1, name: "Jane Smith", title: "CTO", department: "Tech" }
  ]
});

// 绑定鼠标悬停事件
orgChart.bind("nodeMouseEnter", function(event, data) {
  console.log("悬停节点ID：", data.id);
  console.log("节点名称：", data.name);
  console.log("节点职位：", data.title);
  // 自定义字段也能直接获取
  console.log("所属部门：", data.department);
});

// 绑定鼠标移出事件
orgChart.bind("nodeMouseLeave", function(event, data) {
  console.log("离开节点ID：", data.id);
  // 比如隐藏之前显示的详情弹窗
  document.getElementById("nodeDetailPopup").style.display = "none";
});

关键说明 #

• data参数：这是事件回调里最核心的部分，它包含了当前节点的所有原始数据，包括你在dataSource里定义的所有字段（id、name、title等自定义字段），直接就能拿来用。
• this指向：在事件回调里，this指向的是当前的GetOrgChart实例，所以你可以直接调用updateNode、getNodes等实例方法来操作图表。
• 样式修改：如果需要在悬停时改变节点样式，除了用updateNode，也可以通过CSS的:hover伪类，但注意GetOrgChart的节点有特定的类名，比如.getorgchart-node，你可以自定义CSS：

.getorgchart-node:hover {
  background-color: #e6f7ff !important;
  border-color: #1890ff !important;
}

这样就能完美实现你要的鼠标悬停/移出交互，同时轻松获取节点的所有详情啦～

内容的提问来源于stack exchange，提问作者Jeyavel