1

Dabeng Orgchart ライブラリ (素晴らしいライブラリ、btw) を使用していますが、ノードをカスタマイズしたいと思います。具体的には、ほとんどの例にある正方形の代わりにひし形を作成します。私は createNode メソッドを見て、ダイヤモンドを作成するためのさまざまな css を見つけましたが、dabeng 組織図に統合する方法がわかりません。私がやりたいのは、いくつかの条件が満たされている場合はひし形を表示し、他の条件が満たされている場合はデフォルトの正方形を表示することです。私はグーグルで検索しましたが、形状を変更する例はありません。

4

3 に答える 3

1

現在、組織図の nodeTemplate 属性を使用しています。例：

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

orgtemplate 関数では、data は組織図データに含めたものです (この例では、名前と役職になります)。このオブジェクトに他のフラグを詰めることができます。たとえば、新しいノードを作成し、グラフにコミットする前にユーザーがノードにデータを入力できるようにするチャートがあります。このノードが保存されているかどうかをテンプレートに伝えるために、data.isSaved のデータ オブジェクトにフラグがあります。保存されている場合は、データに基づいてテンプレートを変更するインライン html チェック (AngularJS に精通している場合は、ngIf などを使用する AngularJS など) があります。

VanillaJS では、$compile を使用せずに純粋な HTML を返すだけで、独自のノード テンプレートでポンプにアタッチされたすべてのものを返すことができます。たとえば、関数内で実際にチェックを行うことができます。

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

私は自分の Web サイトで 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 属性の定義が表示されます。お役に立てれば！

補足: カスタム テンプレートを使用するとき、特にさまざまなグラフの方向 (つまり「l2r」) を定義するときに、スタイリングに問題がありました。

于 2017-12-19T16:45:02.180 に答える