Dabeng OrgChart库的样式节点 [英] Style node of Dabeng's OrgChart library

问题描述

我正在使用Dabeng Orgchart库(great库，btw)，但是我想自定义节点，特别是创建菱形而不是大多数示例中的正方形.我已经看到了createNode方法，并且发现了用于创建菱形的各种CSS，但是我无法弄清楚如何将其集成到dabeng组织结构图中.我想做的是，如果满足某些条件，则显示一个菱形，如果满足其他条件，则显示默认的正方形.我在Google周围搜索过，但没有更改形状的示例.

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.

推荐答案

我目前正在为orgchart使用nodeTemplate属性.示例:

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

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

在orgtemplate函数中，数据就是您包含在orgchart数据中的任何数据(在示例中，该数据为名称和标题).您可以用其他标志填充该对象.例如，我有一个图表，可以在其中创建新节点，并允许用户在将数据提交到图形之前将数据输入到该节点中.我的数据对象中有一个用于data.isSaved的标志，用来告诉模板是否保存了该节点.如果已保存，则可以进行内联html检查(如果您完全熟悉AngularJS，则可以使用ngIf等在AngularJS中进行检查)以根据数据更改模板.

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.

在VanillaJS中，您可以只返回纯HTML，而无需$ compile和所有附加到您自己的节点模板中的泵.您实际上可以在函数中进行检查，例如:

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>';
    }
}

我在网站上使用AngularJS，所以我定义了新的作用域并使用angular指令使其更具扩展性.这供任何偶然发现此问题的人参考.我的orgTemplate函数定义如下.

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));
}

这是orgChart Github ，因为我确信您已经浏览了很多次.如果您查看底部，将会看到我上面提到的nodeTemplate属性定义.希望这会有所帮助！

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!

侧面说明:在使用自定义模板时，尤其是在定义不同的图形方向(即"l2r")时，我在样式方面遇到了麻烦.

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

这篇关于Dabeng OrgChart库的样式节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！