如何点击打开弹出组织图表插件与jQuery

Question

this is tree view on my website based on jquery org chart plugin, this tree created dynamically and also create children.

代码是：

     

$(function() {

var datascource = {
  'name': 'Kirby Cochran',
  'title': '5061',
  'children': [
{
    "name": "Sharon Edwards",
    "title": "11454",
    "children": [
        {
            "name": "Kirby Cochran",
            "title": "5061-kr",
            "children": [
                {
                    "name": "Michael Wach",
                    "title": "5063"
                }
            ]
        },
        {
            "name": "Phil Ungricht",
            "title": "6189",
            "children": [
                {
                    "name": "Elaine 2 Cochran",
                    "title": "10238"
                }
            ]
        },
        {
            "name": "Roberto  Montero",
            "title": "5371"
        }
    ]}]};


var oc = $('#chart-container').orgchart({
  'data' : datascource,
  'nodeContent': 'title',
  'draggable': true,
  'dropCriteria': function($draggedNode, $dragZone, $dropZone) {
    if($draggedNode.find('.content').text().indexOf('manager') > -1 && $dropZone.find('.content').text().indexOf('engineer') > -1) {
      return false;
    }
    return true;
  }
});

oc.$chart.on('nodedropped.orgchart', function(event) {
  console.log('draggedNode:' + event.draggedNode.children('.title').text()
    + ', dragZone:' + event.dragZone.children('.title').text()
    + ', dropZone:' + event.dropZone.children('.title').text()
  );
});});

这里的要求是，如果点击任何框打开弹出窗口并显示客户的详细信息。组织结构图

Answer 1

以下是一些加载弹出窗口的代码片段

$(.node).click(function(){
  var id = $(this).attr('id');
 // use ajax here and getdata using id then display a modal and populate it
 });