Question

我正在尝试通过JSON模式实现orgchart树形结构。我正在尝试将Id与BossId映射，并且Id是唯一的，并且拥有BossId的{{1}}的人是该{{1}的子雇员}。我尝试了jQuery插件和Google Org Chart。但是，这两个都有不同的模式。我的JSON模式是

Id

BossId是CEO，在他下面的所有其他员工都是

Answer 1

请参见下面的小提琴和代码，JSON未修改，并且当前包含断开连接，如小提琴所示。

小提琴

https://jsfiddle.net/shL7tjpa/2/

代码

google.charts.load('current', {packages:["orgchart"]});
google.charts.setOnLoadCallback(drawChart);

var members = [
  {
    "BossId": "3",
    "DateOfBirth": "1966-09-27T00:00:00",
    "FamilyName": "Montejano",
    "Gender": "Unspecified",
    "GivenName": "Trinh",
    "Id": "08",
    "Title": "Tech Manager"
  },
  {
    "BossId": "0",
    "DateOfBirth": "1927-01-29T00:00:00",
    "FamilyName": "Fetzer",
    "Gender": "Unspecified",
    "GivenName": "Winfred",
    "Id": "00",
    "Title": "CEO"
  },
  {
    "BossId": "1",
    "DateOfBirth": "1927-08-20T00:00:00",
    "FamilyName": "Dandrea",
    "Gender": "Male",
    "GivenName": "Erich",
    "Id": "02",
    "Title": "VP of Marketing"
  },
  {
    "BossId": "1",
    "DateOfBirth": "1929-02-07T00:00:00",
    "FamilyName": "Nisbet",
    "Gender": "Male",
    "GivenName": "Reinaldo",
    "Id": "03",
    "Title": "VP of Technology"
  },
  {
    "BossId": "1",
    "DateOfBirth": "1932-06-13T00:00:00",
    "FamilyName": "Bufford",
    "Gender": "Unspecified",
    "GivenName": "Alleen",
    "Id": "04",
    "Title": "VP of HR"
  },
  {
    "BossId": "2",
    "DateOfBirth": "1936-09-26T00:00:00",
    "FamilyName": "Klopfer",
    "Gender": "Female",
    "GivenName": "Kristyn",
    "Id": "05",
    "Title": "Director of Marketing"
  },
  {
    "BossId": "1",
    "DateOfBirth": "1937-11-23T00:00:00",
    "FamilyName": "Duhon",
    "Gender": "Male",
    "GivenName": "Sophie",
    "Id": "01",
    "Title": "Tech Manager"
  },
  {
    "BossId": "3",
    "DateOfBirth": "1948-04-05T00:00:00",
    "FamilyName": "Mirabal",
    "Gender": "Female",
    "GivenName": "Suanne",
    "Id": "07",
    "Title": "Tech Manager"
  },
  {
    "BossId": "4",
    "DateOfBirth": "1966-10-13T00:00:00",
    "FamilyName": "Maslowski",
    "Gender": "Unspecified",
    "GivenName": "Norah",
    "Id": "09",
    "Title": "Tech Manager"
  },
  {
    "BossId": "6",
    "DateOfBirth": "1967-08-25T00:00:00",
    "FamilyName": "Redford",
    "Gender": "Female",
    "GivenName": "Gertrudis",
    "Id": "10",
    "Title": "Tech Lead"
  },
  {
    "BossId": "6",
    "DateOfBirth": "1968-12-26T00:00:00",
    "FamilyName": "Tobey",
    "Gender": "Male",
    "GivenName": "Donovan",
    "Id": "11",
    "Title": "Tech Lead"
  },
  {
    "BossId": "9",
    "DateOfBirth": "1969-10-16T00:00:00",
    "FamilyName": "Vermeulen",
    "Gender": "Male",
    "GivenName": "Rich",
    "Id": "12",
    "Title": "Trainer Lead"
  },
  {
    "BossId": "9",
    "DateOfBirth": "1972-10-16T00:00:00",
    "FamilyName": "Knupp",
    "Gender": "Male",
    "GivenName": "Santo",
    "Id": "13",
    "Title": "HR Manager"
  },
  {
    "BossId": "12",
    "DateOfBirth": "1974-03-23T00:00:00",
    "FamilyName": "Grooms",
    "Gender": "Female",
    "GivenName": "Jazmin",
    "Id": "14",
    "Title": "Trainer"
  },
  {
    "BossId": "13",
    "DateOfBirth": "1978-08-25T00:00:00",
    "FamilyName": "Cheeks",
    "Gender": "Female",
    "GivenName": "Annelle",
    "Id": "15",
    "Title": "Recruiter"
  },
  {
    "BossId": "15",
    "DateOfBirth": "1979-08-21T00:00:00",
    "FamilyName": "Harshaw",
    "Gender": "Unspecified",
    "GivenName": "Eliza",
    "Id": "16",
    "Title": "Trainer"
  },
  {
    "BossId": "8",
    "DateOfBirth": "1980-02-09T00:00:00",
    "FamilyName": "Broaddus",
    "Gender": "Unspecified",
    "GivenName": "Xiomara",
    "Id": "17",
    "Title": "Senior Software Developer"
  },
  {
    "BossId": "11",
    "DateOfBirth": "1981-09-08T00:00:00",
    "FamilyName": "Jungers",
    "Gender": "Unspecified",
    "GivenName": "Erminia",
    "Id": "18",
    "Title": "Software Developer"
  },
  {
    "BossId": "10",
    "DateOfBirth": "1984-03-18T00:00:00",
    "FamilyName": "Moffatt",
    "Gender": "Female",
    "GivenName": "Maria",
    "Id": "19",
    "Title": "Software Developer"
  },
  {
    "BossId": "10",
    "DateOfBirth": "1990-09-24T00:00:00",
    "FamilyName": "Grimaldo",
    "Gender": "Female",
    "GivenName": "Tammera",
    "Id": "20",
    "Title": "Senior Software Developer"
  },
  {
    "BossId": "10",
    "DateOfBirth": "1992-06-18T00:00:00",
    "FamilyName": "Das",
    "Gender": "Female",
    "GivenName": "Sharyl",
    "Id": "21",
    "Title": "Software Developer"
  },
  {
    "BossId": "8",
    "DateOfBirth": "1993-11-15T00:00:00",
    "FamilyName": "Harlan",
    "Gender": "Unspecified",
    "GivenName": "Shan",
    "Id": "22",
    "Title": "UI Developer"
  },
  {
    "BossId": "11",
    "DateOfBirth": "1997-03-23T00:00:00",
    "FamilyName": "Almeida",
    "Gender": "Female",
    "GivenName": "Mariah",
    "Id": "23",
    "Title": "QA Tester"
  },
  {
    "BossId": "11",
    "DateOfBirth": "1998-11-10T00:00:00",
    "FamilyName": "Kerfien",
    "Gender": "Male",
    "GivenName": "Darnell",
    "Id": "24",
    "Title": "QA Tester"
  },
  {
    "BossId": "11",
    "DateOfBirth": "2004-04-22T00:00:00",
    "FamilyName": "Vierra",
    "Gender": "Female",
    "GivenName": "Janell",
    "Id": "25",
    "Title": "QA Tester"
  }
];



function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');

       $.each(members,function(idx, member){ 
             // For each orgchart box, provide the name, manager, and tooltip to show.
       member =  JSON.parse(JSON.stringify(member));
       data.addRow(
          [{v: ""+parseInt(member.Id), f:member.GivenName+ ' ' + member.FamilyName+'<div style="color:red; font-style:italic">'+member.Title+'</div>'}, ""+parseInt(member.BossId), '']);
          });

        // Create the chart.
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        // Draw the chart, setting the allowHtml option to true for the tooltips.
        chart.draw(data, {allowHtml:true});
}

通过JSON模式显示树结构层次结构

1 个答案: