dabeng / OrgChart

It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.
MIT License
2.87k stars 770 forks source link

Is there a way to expand a middle node on load instead of the top-level node? #534

Open MikeAlhayek opened 4 years ago

MikeAlhayek commented 4 years ago

First of all, thank you for this great plugin!

I am wonder if there is away to show a middle node by default instead of the top-level. here is an example,

{
  'name': 'Lao Lao',
  'title': 'general manager',
  'children': [
    { 'name': 'Bo Miao', 'title': 'department manager', 'collapsed': true,
      'children': [
        { 'name': 'Li Jing', 'title': 'senior engineer', 'className': 'slide-up' },
        { 'name': 'Li Xin', 'title': 'senior engineer', 'collapsed': true, 'className': 'slide-up',
          'children': [
            { 'name': 'To To', 'title': 'engineer', 'className': 'slide-up' },
            { 'name': 'Fei Fei', 'title': 'engineer', 'className': 'slide-up' },
            { 'name': 'Xuan Xuan', 'title': 'engineer', 'className': 'slide-up' }
          ]
        }
      ]
    },
    { 'name': 'Su Miao', 'title': 'department manager',
      'children': [
        { 'name': 'Pang Pang', 'title': 'senior engineer' },
        { 'name': 'Hei Hei', 'title': 'senior engineer', 'collapsed': true,
          'children': [
            { 'name': 'Xiang Xiang', 'title': 'UE engineer', 'className': 'slide-up' },
            { 'name': 'Dan Dan', 'title': 'engineer', 'className': 'slide-up' },
            { 'name': 'Zai Zai', 'title': 'engineer', 'className': 'slide-up' }
          ]
        }
      ]
    }
  ]
}

When the page first load, I want to show "Hei Hei" as the top level and the first node under it to show. If someone click on the up arrow on "Hei Hei" I want to show "Su Miao".

msteudtn commented 4 years ago

Hello,

I used a "dirty" workaround to achieve this.

1.) Replace the collapsed: true (at "Hei Hei") with an unique ID, like "id":"NameOfDepartment"

2.) Create a "virtual" mouse-click on the CSS-class "topEdge" below this ID.

function showDepartment(deptID) {
    document.getElementById(deptID).getElementsByClassName("topEdge")[0].click();
}
showDepartment("NameOfDepartment")

Disadvantage: The whole chart gets loaded at first and then hidden on a virtual click.