javascript - 大崩OrgChart库样式节点

Question

我正在使用 Dabeng Orgchart 库，但我想自定义节点，特别是创建一个菱形而不是大多数示例中的正方形。我看过 createNode 方法，也找到了各种用于创建菱形的 CSS，但我不知道如何将其集成到大崩组织结构图中。我想要做的是在满足某些条件时显示菱形，如果满足其他条件则显示默认方形。我在网上搜索过，但没有改变形状的例子。

Answer 1

我目前正在为组织结构图使用 nodeTemplate 属性。示例:

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

在您的 orgtemplate 函数中，数据是您包含在组织结构图数据中的任何内容(在示例中是姓名和职务)。你可以用其他标志填充这个对象。例如，我有一个图表，我在其中创建了新节点并允许用户在将数据提交到图表之前将数据输入到节点中。我的数据对象中有一个标志 data.isSaved 告诉我的模板这个节点是否被保存。如果已保存，我会进行内联 html 检查(在 AngularJS 中使用 ngIf 等，如果您完全熟悉 AngularJS)以根据数据更改模板。

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

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

我在我的网站中使用 AngularJS，因此我定义了新的范围并使用 Angular Directive(指令)使其更具可扩展性。这供任何偶然发现此问题的人引用。我的 orgTemplate 函数定义如下。

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

这是组织结构图 Github因为我确定您已经浏览过很多次了。如果您查看底部，您将看到我上面提到的 nodeTemplate 属性定义。希望这对您有所帮助!

旁注:我在使用自定义模板时遇到了一些样式问题，尤其是在定义不同的图形方向(即“l2r”)时。