鳴かぬなら鳴かせてみせようC3

変わったC3でイメージチェンジ。

8月の日程です!



つくばふれあいプラザC3
8/5    13:30-15:00
8/12  14:00-15:30
8/19  14:00-15:30
8/26  14:00-15:30


ウェルネスパーク研修室
8/5    17:00-18:30
8/12  17:00-18:30
8/19  17:00-18:30
8/26  17:00-18:30





よろしくお願いします。







______________________________________


CROSSOVER
ーメディカルキックネスー

つくばふれあいプラザ2階C3
・14:00-15:30
・毎週土曜日
@次回は8/5(土)

つくばウェルネスパーク研修室
・17:00-18:30 
・毎週土曜日
@次回は8/5(土)




大塚道場
キックボクシング

つくば市上岩崎ガレージ内
・アマ・プロ選手コース
・詳細は要お問い合わせ




お問い合わせはこちらまで↓
・LINE ID :okadakick
・E-MAIL :



C3キャンペーン開催中

あまりニーズがないかもしれませんが、社内の組織などを階層構造で視覚化したいという場合に使えるjQueryベースのライブラリです。

体制図を作りたいといった場合にも使えるかもしれません。

は、決められたデータソースを指定するだけで組織図を表示できます。

似たようなものとしては、Google Chartのがありますが、デザイン的にOrgChartのほうが綺麗に見せることが出来る点や、Googleのほうはライブラリのソースをウェブ経由で読み込んで利用するため、サーバーにライブラリを保存して使いたいといった場合にOrgChartのほうが利用しやすいかもしれません。

ただ、jQuery3系でしか動かないため注意が必要です。

OrgChartの使い方

まずは、OrgChartをサーバーにインストール(というか設置)する必要がありますが、方法はページに記載のとおりBowerやnpmコマンド経由でも可能ですが、対応してない場合はGitHubからソース一式をダウンロードして適当な場所にJavaScriptを保存しておきましょう。

後は、サンプルなども付属していますのでその辺を見ればわかるのですが、シンプルな組織図を書く例のHTMLは下記のような感じ。

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>組織図</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /><script type='text/javascript' src="https://localhost/cmm/js/jquery3.js"></script><link rel="stylesheet" href="https://localhost/cmm/css/jquery.orgchart.css"><script type="text/javascript" src="https://localhost/cmm/js/jquery.orgchart.js"></script><script type="text/javascript">(function ($)    $(function () {        var datascource = {                  'name': '鈴木 一郎',                  'title': '社長',                  'children': [                    { 'name': '田中 太郎', 'title': '部長', 'className': 'manager',                    },                    { 'name': '佐藤 花子', 'title': '部長', 'className': 'manager',                      'children': [                        { 'name': '渡辺 次郎', 'title': '課長' },                        { 'name': '高橋 三郎', 'title': '課長',                        }                      ]                    }                  ]                };        $('#chart-container').orgchart({            'data' : datascource,            'nodeContent': 'title'        });    });)(jQuery);</script></head><body><div id="chart-container"></div></body></html>

上記で出来上がった組織図は下記。

基本的に、dataというプロパティにJSON形式のデータを渡せばそれに従って組織図を表示してくれます。

サンプルにもありますが、HTMLソース内のUL/LIタグを読み取って解析させることも出来るようです。

後は、幾つかオプションが用意されており、例えばデフォルトでは上記のように縦の組織階層で表示されますが、したりもできます。

すごいのは、ことが出来たり、自分でしたりといったカスタマイズが出来ることでしょうか。

色合いなどを変えたい場合は、CSSで該当クラスのプロパティを上書きしていくような感じとなります。

ただ、そこまで自由度が高くも無いので例えば組織の箱の幅が狭いから広げたいといった場合に、単純に該当のCSSのwidthとかを弄ると縦表示の場合は綺麗に広がってくれるけど、横表示にすると罫線が崩れてしまうといったところもあるようです。

OrgChartを使うときのTipsなど

組織図の表示は簡単にできるのですが、何が一番大変かってそのデータ構造を作る部分だったりします。

組織は動的に動くことが多いと思いますし、組織が大きい場合はデータ量が多いためHTMLを手動で作り上げるのは現実的ではなかったりします。

組織情報はデータベースなどにあるかと思うので、それを利用してJSON形式に変換するのが手っ取り早いのですが、DBのデータ構造とOrgChartで必要なJSON形式の配列構造には違いがあるのでその差分を吸収する必要があります。

例えば、組織図のデータ構造が下記のようになっているとします。

組織コード 組織名 親組織コード
100 人事部 000
110 採用課 100
120 管理課 100
130 労務課 100

で、OrgChartに渡す必要があるデータ構造は下記(PHPの場合の例)。

array (  0 =>   array (    'CODE' => '100',    'NAME' => '人事部',    'PARENT' => '000',    'children' =>     array (      0 =>       array (        'CODE' => '110',        'NAME' => '採用課',        'PARENT' => '100',      ),      1 =>       array (        'CODE' => '120',        'NAME' => '管理課',        'PARENT' => '100',      ),      2 =>       array (        'CODE' => '130',        'NAME' => '労務課',        'PARENT' => '100',      ),    ),  ),)

要は、親組織の中にchildrenキーをつくりその中に子組織の情報を入れ子にしてあげなくてはなりません。

で、これを作るための変換用PHPスクリプトが下記。

public function createTreeInArray($divisionList = [], $rootParantCode = "000", $codeColumn = 'CODE', $parentColumn = 'PARENT') {    if (! is_array($divisionList)) {        return false;    }    $tree  = [];    $index = [];    foreach ($divisionList as $value) {        $id = $value[$codeColumn];        $pid = $value[$parentColumn];        if (isset($index[$id])) {            $value['children'] = $index[$id]['children'];        }        $index[$id] = $value;        if ($pid == $rootParantCode) {            $tree[] = & $index[$id];        } else {            $index[$pid]["children"][] = & $index[$id];        }    }    return $tree;}

データ構造の変換ができれば、後はを通すだけです。

もう1つは、組織の箱をクリックした際に開閉するようなイベントが付随しているのですが、個人的にはいらないと思ったり。

ただ、オプションで消すことが出来そうにないので、クラスを削除することで開閉イベントのトリガーが発生しないようにしてみました。

$('.leftEdge').removeClass('leftEdge');$('.rightEdge').removeClass('rightEdge');

後は、組織や人名をクリックした際にイベントを発火させたいということをしたいかもしれません。

これについては、シンプルに受け渡すデータの中にJavaScriptのコードを埋め込むか、クラスの指定ができるのでクラス名を指定しておいて、別でそのクラスに対
してのクリックイベントを付け加えるということで対応ができます。

最初の例で書いたJavaScript内には部長に対してclassNameのプロパティでmanagerをセットしています。

あとは、このクラスに対してclickイベントを書いてあげるといった具合です。

[PR]

[PR]

[PR]

[広告] 楽天市場
  • 【純正品】OKI(沖データ) TNR-C3LY2 トナーカートリッジ(大) イエロー (C841dn/C811dn/MC883/MC863/MC843シリーズ)
  • チャンピオン tシャツ 再入荷【商品到着後レビューで送料無料】◆Champion 公式ストア チャンピオン ビッグロゴ Tシャツ アクションスタイル アメカジ (C3-F362)
  • ハッピースウィートアソート 【シーキューブ-C3-】 《ギフト 贈り物 プレゼント 内祝い スイーツ ティラミス》
  • 【7/5再入荷! 2017春夏 3サイズ】 ic391 新品 Champion REVERSE WEAVE タイガーストライプ スウェット ショートパンツ C3-D527 メンズ チャンピオン リバースウイーブ タイガーカモフラージュ 迷彩柄 ショーツ ハーフパンツ トリコタグ
  • Tシャツ メンズ 半袖 クルーネック Hanes ヘインズ 3枚組 白 下着【C3M】【パケ1】
  • 【送料無料】ミズノ(MIZUNO) 骨盤ベルト M−L ブラック C3JKB41109【あす楽対応】【SMTB】

シェアする

  • このエントリーをはてなブックマークに追加

フォローする