大朋的OrgChart图书馆的风格节点

Question

我正在使用Dabeng Orgchart库（伟大的库，顺便说一句），但我想自定义节点，特别是创建一个钻石而不是大多数示例中的方块。我见过createNode方法，我找到了各种用于创建钻石的css，但是我无法弄清楚如何将它集成到dabeng组织结构图中。我想要做的是在满足某些条件时显示菱形，如果满足其他条件则显示默认方形。我搜索了谷歌，但没有改变形状的例子。

Answer 1

我目前正在使用orgchart的nodeTemplate属性。例如：

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

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

在VanillaJS中，您可以在没有$ compile的情况下返回纯HTML，并在您自己的节点模板中返回所有附加到泵的纯HTML。您实际上可以在函数中进行检查，例如：

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

我在我的网站上使用AngularJS，所以我定义了新的范围并使用angular指令使其更具扩展性。这是偶然发现此事的其他人的参考。我的orgTemplate函数定义如下。

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

这是orgChart Github，因为我确定您已多次浏览过。如果查看底部，您将看到我在上面提到的nodeTemplate属性定义。希望这有帮助！

备注：使用自定义模板时，我在使用样式时遇到了一些问题，尤其是在定义不同的图形方向时（例如，＆＃39; l2r＆＃39;）。

Answer 2

我建议你使用getorgchart，而不是高度可定制的

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

Answer 3

您现在可以使用选项“ 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
});

可以随时使用此demo。