如何实现jQuery OrgChart组织架构图节点悬停时显示图片

问题修复方案 #

你遇到的悬停不显示图片问题是代码里4处明显的遗漏导致的，按以下步骤修改即可生效：

• 1. 数据源缺少ID字段
     你在生成节点JSON时只写入了name、title两个属性，没有把员工ID写入，导致后续createNode回调里data.id取值为undefined，图片路径完全错误。
• 2. 缺少菜单相关样式
     没有给悬浮菜单、图标写基础样式，默认菜单处于隐藏异常状态，也没有悬浮触发的显示规则。
• 3. 交互逻辑不符合需求
     当前代码绑定的是点击图标触发显示，你要的悬停效果可以直接用CSS控制更简单。
• 4. 字段大小写不匹配
     员工对象的ID属性是大写的ID，后续取值用小写id自然取不到值。

具体修改代码 #

第一步：补充CSS样式

把以下代码加到你现有<style>标签的末尾：

.orgchart .node .second-menu-icon {
    position: absolute;
    right: -10px;
    top: -10px;
    font-size: 14px;
    color: #eb3c96;
    background-color: #fff;
    border-radius: 50%;
    z-index: 10;
}
.orgchart .node .second-menu {
    display: none;
    position: absolute;
    top: 0;
    right: -110px;
    width: 100px;
    padding: 5px;
    background-color: #fff;
    border: 1px solid #eb3c96;
    border-radius: 4px;
    z-index: 20;
}
.orgchart .node:hover .second-menu {
    display: block;
}
.orgchart .node .second-menu .avatar {
    width: 100%;
    border-radius: 4px;
}

第二步：修改GetOrgJSON函数，补充ID字段

function GetOrgJSON(employeeList,manager){
    var note = '';
    var employeeProcessed=[];
    for(var i=0;i<employeeList.length;i++){
        var objEmp = employeeList[i];      
        if(objEmp.Manager == manager && employeeProcessed.indexOf(objEmp.Name) < 0 ){
            note += '{"name":"'+objEmp.Name+'",';
            note += '"title":"'+objEmp.Designation+'",';
            // 新增id字段，和后续取值保持一致
            note += '"id":"'+objEmp.ID+'"';
        
            employeeProcessed.push(objEmp.Name);
            var empUl = GetOrgJSON(employeeList,objEmp.ID);
            if(empUl !=""){
                note +=',"children": [' + empUl + ']';
            }
            note +='},';
        }       
    } 
    return note;
}

第三步：简化createNode回调逻辑

删除不需要的点击事件，直接插入元素即可：

'createNode': function($node, data) {
  var nodePrompt = $('<i>', {
    'class': 'fa fa-info-circle second-menu-icon'
  });
  // 请确认你的图片存储路径正确，对应目录下有对应员工ID命名的jpg文件
  var secondMenu = '<div class="second-menu"><img class="avatar" src="img/avatar/' + data.id + '.jpg"></div>';
  $node.append(nodePrompt).append(secondMenu);
}

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