Style node of Dabeng's OrgChart library

问题

I am using the Dabeng Orgchart library (great library, btw), but I would like to customize the nodes, specifically creating a diamond instead of the squares they have in most examples. I have seen the createNode method, and I have found various css for creating a diamond but I cant figure out how to integrate it in dabeng org chart. What I want to do is display a diamond if some conditions are met, and the default square shapes if others are met. I have searched around google, but no example for changing the shape.

回答1:

I am currently using the nodeTemplate attribute for the orgchart. Example:

var oc = $('#container').orgchart({
   ...
   'nodeTemplate': orgTemplate,
   ...
});

In your orgtemplate function, data is whatever you have included in your orgchart data (in the example it would be name and title). You can stuff this object with other flags. For example, I have a chart in which I create new nodes and allow users to enter data into the node before committing it to the graph. I have a flag in my data object for data.isSaved to tell my template whether or not this node is saved or not. If it is saved, I have inline html checks (in AngularJS using ngIf's and the like, if you're familiar with AngularJS at all) to change the template based on the data.

In VanillaJS, you can just return pure HTML without the $compile and all that attached to pump in your own node template. You could actually do your check within the function for example:

function orgTemplate(data) {
    if(data.isDiamond) {
       return '<div class="diamond">...</div>';
    } else {
       return '<div class="square">...</div>';
    }
}

I'm using AngularJS in my website so I define new scopes and use angular directives to make it more expandable. This is for reference for anyone else who stumbles upon this. My orgTemplate function is defined below.

function orgTemplate(data) {
    var newScope = $scope.$new(true);
    newScope.data = data;
    return ( $compile('<div data-ng-include="\'.../template.html\'"></div>')(newScope));
}

Here's the orgChart Github as I'm sure you've browsed many times. If you look at the bottom you will see the nodeTemplate attribute definition I mention above. Hope this helps!

Side Note: I have had some trouble with styling when using custom templates, especially when defining different graph directions (i.e. 'l2r').

回答2:

I would suggest you to use getorgchart instead it is highly customizable

http://www.getorgchart.com/Demos/Create-Your-Own-Theme-4

回答3:

You can now customize your own node structure or shape with option "ndoeTemplate":

var nodeTemplate = function(data) {
  return `
    <span class="office">${data.office}</span>
    <div class="title">${data.name}</div>
    <div class="content">${data.title}</div>
  `;
}

var oc = $('#chart-container').orgchart({
  'data' : ds,
  'nodeTemplate': nodeTemplate
});

Feel free to play around with this demo.

来源：https://stackoverflow.com/questions/46962530/style-node-of-dabengs-orgchart-library

标签

javascript

jquery

css

orgchart

getorgchart