wesnolte / jOrgChart

A jQuery plugin to draw tree-like structures such as OrgCharts.
994 stars 674 forks source link

How to add onclick event to chart items? #37

Open forceberg opened 11 years ago

forceberg commented 11 years ago

I wish to add onclick or onmouseover events to chart items.

How to accomplish this? I'm totally stuck here. I've tried things like:

$('li').click() { // do something }

$('#org li').click() { // do something }

But nothing I am trying applies...

nkolban commented 9 years ago

I too have the same problem ... any answers available?

dabeng commented 8 years ago

Hi @forceberg @nkolban . I built a new plugin OrgChart based on jOrgChart. It provides a handy callback "createNode" for users who wanna customize the internal structure and behavior of every node of orgchart. Of course, you could accomplish click event bingding for chart items inside this callback. The followings are code snippets of adding secondary menu for very employee node. Hope this demo can assist you to complete the task. Good luck! :blush: // sample of core source code $('#chart-container').orgchart({ 'data' : datascource, 'depth': 2, 'nodeContent': 'title', 'nodeID': 'id', 'createNode': function($node, data) { var secondMenuIcon = $('<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(secondMenuIcon).append(secondMenu); } }); screen-capture

Samourond commented 6 years ago

Hi, I would like to know if it is possible to have a second menu popup for each element I add in the node. Example : I have 4 for the depth of my diagram. But the last level is all members of team that I add in the last node content.

So, I have the last node that I would call Team work 23. In the content, I add the name of the employee and the second-menu icon like in the preceding example secondMenu. I tried Bootstrap popover but it displays title only and not content on dynamic control.
Maybe that's because the onhover is set on the node and not the content? Would it be possible achieving that with playing with my css? I want that way to have all my people of one team in the content of the node, so if I have 15 people in my team I will not have 15 node box but only one...

Thanks for your help.