如何在悬停在组织结构图上时显示图像

Question

我正在编写以下代码以使用 Jquery 插件参考创建组织结构图

https://www.jqueryscript.net/demo/Fully-Customizable-Organisational-Chart-Plugin-With-jQuery-OrgChart/

悬停在不同节点上时显示图像，如下所示

我引用了这个插件并编写了代码来创建组织结构图，它选择 Sharepoint 源并创建组织结构图层次结构节点，如下所示

组织结构图按预期工作，内容也即将到来但我没有得到的是悬停在下方的图像是我的完整代码

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'/>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.9/css/jquery.orgchart.min.css'/> 
<style>

.orgchart {
    box-sizing: border-box!important;
    display: inline-block!important;
    min-height: 202px!important;
    min-width: 202px!important;
    -webkit-touch-callout: none!important;
    -webkit-user-select: none!important;
    -khtml-user-select: none!important;
    -moz-user-select: none!important;
    -ms-user-select: none!important;
    user-select: none!important;
    background-image: none !important;
    background-size: 10px 10px!important;
    border: 1px dashed transparent;
    padding: 20px!important;
}

.orgchart .lines .leftLine {
    border-left: 1px solid #eb3c96!important;
    float: none!important;
    border-radius: 0!important;
}

.orgchart .lines .topLine {
    border-top: 2px solid #eb3c96!important;
}

.orgchart .node .title {
    box-sizing: border-box!important;
    padding: 2px!important;
    width: 130px!important;
    text-align: center!important;
    font-size: .75rem!important;
    font-weight: 700!important;
    height: 20px!important;
    overflow: hidden!important;
    text-overflow: ellipsis!important;
    white-space: nowrap!important;
    background-color: #eb3c96!important;
    color: #fff!important;
    border-radius: 4px 4px 0 0!important;
}


.orgchart .lines .downLine {
    background-color: #eb3c96!important;
    margin: 0 auto!important;
    height: 20px!important;
    width: 2px!important;
    float: none!important;
}

</style>
<div id="chart-container"></div>
<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.9/js/jquery.orgchart.min.js'></script>
<script type="text/javascript">
function Employee (ID,Name,Manager,Designation,Email) {
    this.ID = ID;
    this.Name= Name;
    this.Manager = Manager;
    this.Designation = Designation;
    this.Email=Email;
}
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+'"';
        
            employeeProcessed.push(objEmp.Name);
            var empUl = GetOrgJSON(employeeList,objEmp.ID);
            if(empUl !=""){
                note +=',"children": [' + empUl + ']';
            }
            note +='},';
        }       
    } 
    return note;
}
(function($){
  $(function() {
    $.ajax({
        url: "https://XXXXXXX/sites/YYYYYYY/_api/web/lists(guid'XXXXXXXXXXXXXXXXXXXXXXXXXXX')/items?$select=ID,Title,Member/ID,Member/EMail,Member/Title,Manager/ID,Manager/Title,Title&$expand=Manager/Id,Member/Id &$top=1000",
        type: "GET",
        headers: {
            "Accept": "application/json;odata=verbose",
        },
        success: function (data) {
            if(data.d.results.length>0){
                var employeeList = [];
                $.each(data.d.results,function(i,employee){
                var Email=employee.Member.EMail;
                    var title = employee.Member.Title;
                    var ID = employee.Member.ID;
                    var manager = employee.Manager.ID!= undefined ? employee.Manager.ID:"0";
                    //var manager = employee.Manager.ID ? employee.Manager.ID : "0";
                    var designation=employee.designation;
                    var objEmp = new Employee(ID,title ,manager,designation,Email);
                    employeeList.push(objEmp);
                });
                var datascource = GetOrgJSON(employeeList,"0").replace(/},]/g,"}]");
                datascource=datascource.slice(0, datascource.length-1);
                
                //$('#chart-container').orgchart({
                //  'data' : JSON.parse(datascource),
                // 'nodeContent': 'title'
                //});
                

                 $('#chart-container').orgchart({
                 'data' : JSON.parse(datascource),
                 'depth': 2,
                 'nodeTitle': 'name',
                 'nodeContent': 'title',
                 'nodeID': 'id',
                 'createNode': function($node, data) {
                 var nodePrompt = $('<i>', {
                 'class': 'fa fa-info-circle second-menu-icon',
                  click: function() {
                $(this).siblings('.second-menu').toggle();
          }
        });
        var secondMenu = '<div class="second-menu"><img class="avatar" src="img/avatar/' + data.id + '.jpg"></div>';
        $node.append(nodePrompt).append(secondMenu);
      }
    });             
                 
                 

                
            }
        },
        error: function (data) {
            //alert("Error");
        }
    });  
  });
})(jQuery);

Answer 1

尝试在您的样式表中添加以下 css，引用自 jQuery Org Chart（通过浏览器开发控制台检查 DOM）

.orgchart .node .second-menu {
    display: none;
    position: absolute;
    top: 0;
    right: -70px;
    border-radius: 35px;
    box-shadow: 0 0 10px 1px #999;
    background-color: #fff;
    z-index: 1;
}

如何在悬停在组织结构图上时显示图像

How to show image on hover over org chart

jquery

jquery-plugins

orgchart