Javascript

WEBサイト作成

再帰処理でHTMLリスト化しjsTreeでツリー表示


HTMLリストの構造

HTMLリストは<ul>で開始してリストの各アイテムを<li>と</li>で囲んで列挙し</ul>で終了します。当然以下のように入れ子に出来ますので、再帰処理でDBのテーブルから動的に入れ子のHTMLリストを生成することになります。

<ul>
  <li>node1_1
    <ul>
      <li>node2_1</li>
      <li>node2_2</li>
    </ul>
  </li>
  <li>node1_2</li>
</ul>

このHTMLリストをjsTreeでツリー表示するには、HTMLリストをdiv要素のidセレクタ指定で囲み、jQuery関数からidセレクタでHTMLリストを探して、jstreeメソッドでツリー表示します。

//HTMLリストをdiv要素で囲む

<div id="html">

<ul>
  <li>node1_1
    <ul>
      <li>node2_1</li>
      <li>node2_2</li>
    </ul>
  </li>
  <li>node1_2</li>
</ul>

</div>


// idセレクタでHTMLリストを取得しjstreeメソッドでツリー表示
$('#html').jstree({

で、今回やろうとしていることは以下のような部品構成の親子関係をHTMLリストに生成してjsTreeメソッドでツリー表示することです。

再帰処理でHTMLリスト化しjsTreeでツリー表示

上記のテーブルの親子関係からこんな感じでツリー表示します。
再帰処理でHTMLリスト化しjsTreeでツリー表示

jQueryとjsTreeの呼び出し

Headタグ内にjsTreeのテーマテンプレートとjQuery関数とjsTreeプラグインの3つを読み込み、

<head>
	 <link rel="stylesheet" href="themes/default/style.min.css" />
     <script src="jquery.js"></script>
         <script src="jstree.min.js"></script>
</head>

ツリーのソース用DB(BOMの親子関係を定義するテーブル)のパラメータ定義。

$host = "localhost";
$user = "root";
$password = "password";
$db = "asp";
$table = "asp_integrated";

HTMLリストをdiv要素のidセレクタ(html)で囲み、ツリーの根っこ部分をRootとして定義。

<div id="html">
<ul>
    <li>Root
        <ul>

再帰処理関数による親子レコード取得とツリー実装の流れ

以上が前準備で、ここから処理が始まります。
1.子品目データが存在すればマッチする親品目のレコードセットを配列$mainに格納。
2.子品目データが存在しなければそのまま親品目のレコードセットを配列$mainに格納。

$con = mysql_connect($host, $user, $password);
$db_selected = mysql_select_db($db, $con);
$sql = "SELECT C_ITM_CD from $table";
$result = mysql_query($sql);
		
if(isset($_GET['node']) and $_GET['node']<>""){
	$sql = "select P_ITM_CD from $table where P_ITM_CD='".$_GET['node']."'";

}else{
	$sql = "select P_ITM_CD from $table";
			
}
		
$result = mysql_query($sql);
		
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
	$main[] = $row["P_ITM_CD"];
}

配列$mainから要素(親品目のレコード)を1個ずつ取り出して再帰処理関数getChild()に渡す。

if(isset($main)){
	foreach($main as $main_item){
					
		echo "<li>".$main_item;
		echo getChild($con, $main_item, $table)."</li>\n";
	}
}
		
mysql_close($con);

この再帰処理関数が難しいのですがポイントです。

function getChild($con, $item, $table){
	
	$sql = "select * from $table where P_ITM_CD='".$item."'";
	$result = mysql_query($sql, $con);
	$num_rows = mysql_num_rows($result);
	
	if($num_rows > 0){
		//子品目ありの場合
		unset($sem);
		while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
			if($row["C_ITM_CD"] != ""){
				$sem[] = $row["C_ITM_CD"];
			}
		}
		$str = "";
		foreach($sem as $sem_item){
			$child = getChild($con, $sem_item, $table);
			if( $child == ""){ 					
				$str .= "<ul><li>".$sem_item."</li></ul>\n";
			}else{
				$str .= "<ul><li>".$sem_item."$child</li></ul>\n";
			}
		}
		return $str;
	}else{
		//子品目なしの場合
	}
}

上記までで生成した再帰HTMLリストをツリービューで表示します。まずjstreeメソッドでツリー表示のインスタンスを生成する部分ですが、基本JavaScriptですので<script>タグ内に記述します。

jstreeメソッドのオプションとしてcoreとdndとpluginsの3つを指定しています。

<script>
//jstreeメソッドでツリービューのインスタンス作成
$('#html')
	.jstree({
		"core" : {
			'check_callback' : function (operation, node, node_parent, node_position, more) {
				node_dest = node_parent["text"].replace(regex, "").trim();
				var res = node_dest.split("[");

				if(res[0] == "Root"){
					return false;
					node_dest = "";
				}else{
					node_dest = res[0];
					return true;
				}
			}
		},

		"dnd" : {
	        },

        	"plugins" : [ "themes", "html_data", "dnd" ]
	});

ノードの各種情報をuiGetParents()関数で取得しています。

function uiGetParents(loSelectedNode) {
        try {
            var lnLevel = loSelectedNode.node.parents.length;
            var lsSelectedID = loSelectedNode.node.id;
            var loParent = $("#" + lsSelectedID);
            var lsParents =  loSelectedNode.node.text + ' >';
            for (var ln = 0; ln <= lnLevel -1 ; ln++) {
                var loParent = loParent.parent().parent();
                if (loParent.children()[1] != undefined) {
                    lsParents += loParent.children()[1].text + " > ";
                }
            }
            if (lsParents.length > 0) {
                lsParents = lsParents.substring(0, lsParents.length - 1);
            }
			str_parent = lsParents.replace(/(<([^>]+)>)/ig,"");
        }
        catch (err) {
            alert('Error in uiGetParents');
        }
    }
	
</script>





おすすめ記事一覧

1

よく会計の世界では「利益と減価償却でキャッシュを作る」と言われ、これは企業のキャッシュの源泉が利益と減価償却の二種類あるという意味なのですが、減価償却費はキャッシュの流出のない費用であり、P/L上の当期利益額よりも実際には減価償却費分だけキャッシュは多く残っているという数字遊びをしているだけで、物理的にキャッシュが生み出されるわけではありません。

2

毎月の生産でいくらコストがかかったかを計算する原価計算(実際原価)業務は、インドネシアではシステム化されている事例は少なく、細かく計算すれば時間がかかり、どんぶり勘定だと見たい情報が見られず、コロナ禍の影響で時間に余裕が出来た今は収益改善という観点から原価計算のやり方を見直す絶好の機会です。

3

ジャカルタでは、2019年4月にMRT地下鉄の第1期区間(総延長15.7km)が正式開通しましたが、コロナ禍の中にあった今年6月に、現在の始発駅であるPlaza Indonesia前のBendaran HI駅から、北ジャカルタのKotaまでの6.3km、西ジャカルタのアンチョールの車両基地までの5.2kmの総延長11.5km(11駅)を第2期区間として工事が開始されました。

4

2014年に誕生したジョコウィ政権は、事あるごとに中国寄りと言われ、2015年に中国と日本が受注合戦を繰り広げ日本の新幹線方式での導入が確実視されていたジャカルタ~バンドゥン高速鉄道案件では、インドネシア政府が手のひら返し中国案に鞍替えし、日本を袖にしたのは記憶に新しいところですが、南シナ海の南方にあるナトゥナ諸島周辺の排他的経済水域(EEZ)は、中国が主権を主張する「九段線」と呼ばれる境界と重複しており、中国漁船が公船を伴って活動する違法漁業問題で中国と対立しています。

大統領選挙で考えたギャップにハマるということ 5

ギャップにキュンとするというのは人間の本能みたいなもので、ジョコウィの私利私欲のない素朴なおじさん像と、その実強力なリーダーシップを発揮する実務派という内面が、一見普通の人だが実はスゴイというギャップ好きのインドネシア人に大ウケして、大衆は一種の集団催眠状態にあるようです。

情報の質のレベル 6

見える化された結果を共有化することで問題点が共通認識されますが、共有化が進むことで情報の持つ希少価値が薄れて困る人間がいる場合、有益な情報を独占することでポジションを高めようという政治力が働きます。

7

日本人がインドネシアに来ると、インドネシア人ののんびり加減にイライラするというのは昔からよく聞く話で、インドネシア在住日本人にとってのバイブル的小説である深田祐介著「ガルーダ商人」の中でも、インドネシア宗教省の高官が日本人とインドネシア人を自宅に招待する際に、インドネシア人向けの招待状には、遅刻することを前提にパーティ開始時間を三十分早く書いておくという記述があるほどです。

宗教によって異なる「死んだらどうなる」の考え方 8

キリスト教もイスラム教もともにユダヤ教から派生した宗教であり、それぞれイエス・キリスト(本人が神)またはアッラーという唯一無二の神を信じます。

株価操作なんてインドネシア株では当たり前 9

株価は売り注文と買い注文により変動し、大量の売り注文を買う注文がたくさん入れば、他の投資家達は「俺も俺も」と続くことで株価が上がります。

心臓に毛が生えたインドネシア人のずうずうしい転職活動を応援してみた 10

インドネシア人は秘密の話は誰かに暴露しないと精神の安定を保てない人が多いため、内緒の話に情報の希少性は少なく信憑性も低いことが多いので、「ここだけの話」という枕詞付きで聞かされる話は話半分に聞いておいたほうがいいかもしれません。

日系企業のインドネシアでの存在意義 11

今のまま日本の人口減が続けば、内需は縮小の一途をたどるわけで、そうなると日本国内市場だけで生き残るのは難しいと判断する国内企業が、海外市場に活路を見出そうとするのは必然です。

チャンスはあるが勝てる分野を見つけるのが難しい 12

実際にインドネシアに住んでみて、自分で動いて人と話しをして、現地の事情を少しずつ理解していくにつれて、インドネシアで起業することが意外と手強いことに気づき、その難しさの原因は、高い送料と関税であったりローカル企業との競争であったり、就労ビザ(IMTA)や外国人技能開発基金(DPKK)などのランニングコストの高さであったりします。

インドネシアのシステムインテグレーション業界 13

先日JETRO(日本貿易振興機構)さんと、インドネシアの中小企業のIT投資について意見交換させていただく機会をいただいたのですが、そこで「システム投資のコストメリットはどのように説明できるのか」という、システムインテグレーターの存在価値にも関わる重要な問題提起がありました。

肉体と精神と心と魂 14

「Body and Soul」といえば、昨日の内閣改造に伴う人事で内閣府政務官に内定した自民党の今井絵理子参議院員がメンバーだったSPEEDのデビュー曲であり、インドネシアの老舗女性ファッションブランド名でもあります。

ジャカルタのラーメン市場 15

僕がインドネシアに初めて来たのが1997年10月、インドネシア語は分からないし、仕事は辛いし、周囲の人間は理不尽だし、一時期日本に帰りたくて仕方がない時期がありましたが、当時自分をかろうじてインドネシアに繋ぎ止める心の支えとなっていたのが、協栄プリンスビル(今のWisma Keiai)の日本食レストラン「五右衛門」であり、ここでキムチラーメンを食べることが唯一の楽しみと言っても過言ではありませんでした。

ブランド力、技術力、資金力の3要素 16

1998年のジャカルタ暴動後、ルピアが暴落し海外からのドル建て債務を抱えた国内企業が利子の支払いに苦しんでいた頃、僕は外貨が獲得できるインドネシアでの新しいビジネスを探していました。

日本とインドネシアの間でのタイムマシン経営が通じなくなっている件 17

先進国と後進国との間にある流行のタイムラグを利用して、先進国での成功例を後進国で実践するビジネスモデルをタイムマシン経営といいますが、インターネットの普及に伴い情報がフラット化してしまい、モノと情報のタイムラグが限りなく小さくなった今、先駆者である中小零細同業他社が乱立し市場が出来上がったところに、後発の大手が参入し先発零細を駆逐していく、という典型的な負けパターンにはまります。

サリナデパートとマクドナルド 18

本日5月10日を最後にインドネシアのマクドナルド第1号店であるサリナデパート店(Sarinah)が閉店になりますが、ジャカルタのショッピングモールが新しいコンセプトでモダンにリニューアルされ続ける中で、僕がインドネシアに来たばかりの20数年前には、若者の待ち合わせ場所の定番でもあったサリナデパートやブロックMのパサラヤ(Pasaraya)などは完全に時代に取り残されてしまいました。

不景気の歴史 19

僕がインドネシアに来てからこれまで何度か経済不況を見てきましたが、今回の新型コロナウィルスの感染拡大により、間違いなく景気後退しますので、数年後にはこれがコロナショックとかコロナ不況とか呼ばれるようになるのかもしれません。

日本のバブル経済崩壊後とインドネシアの通貨危機後 20

自分が大学に入学したのがバブル経済末期の1991年、土地も株価もMAX爆上げして、三菱地所がアメリカの象徴であるロックフェラーセンタービルを買収し、ジュリアナ東京でワンレンボディコン(登美丘高校ダンス部のバブリーダンスみたいなやつ)のお姉さん達が扇子振って踊っている時期でした。

内需と外需の自国経済に及ぼす影響 21

公共事業投資を行っても、お金が企業内や個人の貯蓄に滞留してしまい国内消費が増えないのが日本の状況であり、国内消費は増えても消費材の輸入品比率が高く、国内資産が海外に流出しているのがインドネシアの状況です。

2019年の総選挙を前にインドネシア政治史のおさらい 22

来年の大統領選挙(Pemilu Pilpres Pileg Indonesia 2019)に向けての選挙運動(Kampanye)を解禁するにあたり、投票用紙に印字される順番はジョコウィ現職大統領・マフル副大統領候補組が1番、プラボウォ大統領候補・サンディアガウノ副大統領候補組が2番と決まりました。

コーヒーをもっと楽しくもっと美味しく 23

インドネシアは北回帰線と南回帰線をはさむコーヒーベルトに位置するコーヒー栽培に適した国で、1602年の東インド会社の進出を契機にオランダの植民地支配が300年以上続き、その間アラビカ種のコーヒーが持ち込まれ、気候のいい高原地帯で栽培が開始されました。

インドネシア人の悪魔祓い 24

人間誰しも自分の中に悪魔が潜んでおり、それが何らかのきっかけで表面に出て来るという考え方自体には、背景に宗教が有るか無いかの違いだけで、基本的に理解できる話であり、それを信じるか信じないかは別として、そういう考えがあることを認めることは大切なことだと思います。

-WEBサイト作成

© 2020 バテラハイシステム Powered by STINGER