Javascript

WEBサイト作成

再帰処理でデータを取得し追加・更新・削除可能なグリッドに表示

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

ライブラリとプラグインの違い

業務システムのマスタ管理画面にはCRUD（Create/Retrieve/Update/Delete）機能付きのデータグリッドが便利なのですが、一番シンプルなのはjQueryとJQuery Easy UIのみで実現するDataGridです。

ツリー表示で使ったjsTreeはjQueryのプラグインであり<script>タグの中に別途jstreeプラグインを読み込む必要がありましたが、DataGridはTabsなどと同じようにJQuery UIのウィジェットにあたります。

ライブラリとプラグインの違いは汎用的か特定ソフト用かなのでjQuery UIはライブラリでもありjQuery用のプラグインでもあると言えると思います。またWordPressのウィジェットがサイドバーへの機能追加に特化したプラグインなのに対し、jQuery UIのウィジェットは言葉の使われ方が若干異なります。

ということでちょっと言葉の整理をしておきたいのですが・・・

  1. ライブラリは汎用的関数の集合体
  2. プラグインは特定ソフト用拡張プログラム
  3. ウィジェットはライブラリ（プラグイン）が提供するコントロール（部品）
  4. jQueryはJavaScriptでよく使われる機能を簡単に呼び出せるようにしたライブラリ
  5. AjaxはJavaScriptの非同期通信に焦点をあてた概念

DataGridがあるにもかかわらず多くのメーカーがデータグリッド用のライブラリ（プラグイン）を出している理由は以下の2つで差別化を図りたいからです。

  1. 見栄え　＞　見栄えの良いRIA（Rich Internet Applications）技術
  2. スピード　＞　時間のかかる処理を非同期実行（Ajax利用）

jQuery UIの基本DataGrid実装方法

それで今回はDataGridを使うのですが、ざっくり以下の3つを実装すれば実現できそうです。

  1. HTMLテーブルにグリッド装飾class要素とCRUDアクションのid要素
  2. 親子関係からデータを取得する再帰処理関数を作成
  3. CRUDアクション時のダイアログを定義し新規・更新・削除ボタンにマッピング

まずタブ＆パネルと同じようにheadタグの中でjQueryライブラリとjQuery用のUIライブラリ（インターフェースデザイン用ライブラリ）であるjQuery UIを読み込む必要がありますが、jQuery UIはライブラリ本体とスタイルシートを読み込む必要があります。

<head>
//jQuery EasyUI用のスタイルシート
<link rel="stylesheet" type="text/css" href="jquery_easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery_easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="jquery_easyui/themes/style.css" />

//jQueryとjQuery EasyUIライブラリ本体
<script type="text/javascript" src="jquery_easyui/jquery.min.js"></script>
<script type="text/javascript" src="jquery_easyui/jquery.easyui.min.js"></script>
</head>

データグリッド画面はid要素dgで定義し、HTMLテーブルをデータグリッド化するためのclass要素easyui-datagridを指定し、データは再帰関数で取得しレコードセットの値を表に表示します。

//初期表示画面
<table id="dg" title="" class="easyui-datagrid" style="height:auto;" toolbar="#toolbar" pagination="true" rownumbers="true" fitColumns="false" singleSelect="true">
	<thead>
		<tr>
			<th field="P_ITM_CD">Parent Item Code</th>
			<th field="IMaster_ProcNo">Proc No</th>
	              	<th field="IMaster_ProcCode">Proc Code</th>
	              	<th field="IMaster_InstructionType">Instruction Type</th>
	              	<th field="IMaster_InstructionCode">Instruction Code</th>
	              	<th field="C_ITM_CD">Child Item Code</th>
			<th field="IMaster_Task2Expr">Production</th>
		</tr>
	</thead>
	<tbody>
		<?php
		if($_GET['node'] != ""){
			while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
				$main[] = $row["P_ITM_CD"];
			}
			if(isset($main)){
				foreach($main as $main_item){
					echo getChild($koneksi, $main_item, $table);
				}
			}
		}else{
			while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
				echo "<tr>";
				echo "<td>".$row["P_ITM_CD"]."</td>";
				echo "<td>".$row["IMaster_ProcNo"]."</td>";
				echo "<td>".$row["IMaster_ProcCode"]."</td>";
				echo "<td>".$row["IMaster_InstructionType"]."</td>";
				echo "<td>".$row["IMaster_InstructionCode"]."</td>";
				echo "<td>".$row["C_ITM_CD"]."</td>";
				echo "<td>".$row["IMaster_Task2Expr"]."</td>";
				echo "</tr>";
			}
		}
		?>
	</tbody>
</table>

<div id="toolbar">
 <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newData()">新規</a>
 <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editData()">更新</a>
 <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeData()">削除</a>
 </div>

 

DBから再帰処理で親子関係のデータを取得しDataGridに流す処理

ツリー表示でやった再帰処理のテーブルバージョンです。やってることは同じで、子品目（C_ITM_CD）にマッチする親品目（P_ITM_CD）があればデータを表示し、再帰的に自関数を読む処理をマッチする親品目がなくなる（最下層品目）まで繰り返します。

function getChild($con, $item, $table){
	$sql = "select * from $table where P_ITM_CD='".$item."' and IMaster_InstructionType<>'U'";
	$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){
			$test = getChild($con, $sem_item, $table);
			if( $test == ""){ 
				$sql_detil = "select IMaster_ProcNo, IMaster_ProcCode, IMaster_InstructionCode, IMaster_Task2Expr, IMaster_InstructionType from  $table where P_ITM_CD='".$item."' and C_ITM_CD='".$sem_item."'";
				$result_detil = mysql_query($sql_detil, $con);
				$row_detil = mysql_fetch_array($result_detil, MYSQL_ASSOC);
				
				$str .= "<tr>";
				$str .= "<td>".$item."</td>";
				$str .= "<td>".$row_detil["IMaster_ProcNo"]."</td>";
				$str .= "<td>".$row_detil["IMaster_ProcCode"]."</td>";
				$str .= "<td>".$row_detil["IMaster_InstructionType"]."</td>";
				$str .= "<td>".$row_detil["IMaster_InstructionCode"]."</td>";
				$str .= "<td>".$sem_item."</td>";
				$str .= "<td>".$row_detil["IMaster_Task2Expr"]."</td>";
				$str .= "</tr>";
				
				$sql_blue = "select * from $table where P_ITM_CD='".$item."' and IMaster_InstructionType='U'";
				$result_blue = mysql_query($sql_blue, $con);
				$num_rows_blue = mysql_num_rows($result_blue);
				if($num_rows_blue > 0){
					while ($row_blue = mysql_fetch_array($result_blue, MYSQL_ASSOC)) {
						$str .= "<tr>";
						$str .= "<td>".$row_blue["P_ITM_CD"]."</td>";
						$str .= "<td>".$row_blue["IMaster_ProcNo"]."</td>";
						$str .= "<td>".$row_blue["IMaster_ProcCode"]."</td>";
						$str .= "<td>".$row_blue["IMaster_InstructionType"]."</td>";
						$str .= "<td>".$row_blue["IMaster_InstructionCode"]."</td>";
						$str .= "<td>".$row_blue["C_ITM_CD"]."</td>";
						$str .= "<td>".$row_blue["IMaster_Task2Expr"]."</td>";
						$str .= "</tr>";
					}
				}
			}else{
				$sql_detil = "select IMaster_ProcNo, IMaster_ProcCode, IMaster_InstructionCode, IMaster_Task2Expr, IMaster_InstructionType from  $table where P_ITM_CD='".$item."' and C_ITM_CD='".$sem_item."'";
				$result_detil = mysql_query($sql_detil, $con);
				$row_detil = mysql_fetch_array($result_detil, MYSQL_ASSOC);
				
				$str .= "<tr>";
				$str .= "<td>".$item."</td>";
				$str .= "<td>".$row_detil["IMaster_ProcNo"]."</td>";
				$str .= "<td>".$row_detil["IMaster_ProcCode"]."</td>";
				$str .= "<td>".$row_detil["IMaster_InstructionType"]."</td>";
				$str .= "<td>".$row_detil["IMaster_InstructionCode"]."</td>";
				$str .= "<td>".$sem_item."</td>";
				$str .= "<td>".$row_detil["IMaster_Task2Expr"]."</td>";
				$str .= "</tr>";
				$str .= $test;
				
				$sql_blue = "select * from $table where P_ITM_CD='".$item."' and IMaster_InstructionType='U'";
				$result_blue = mysql_query($sql_blue, $con);
				$num_rows_blue = mysql_num_rows($result_blue);
				if($num_rows_blue > 0){
					while ($row_blue = mysql_fetch_array($result_blue, MYSQL_ASSOC)) {
						$str .= "<tr>";
						$str .= "<td>".$row_blue["P_ITM_CD"]."</td>";
						$str .= "<td>".$row_blue["IMaster_ProcNo"]."</td>";
						$str .= "<td>".$row_blue["IMaster_ProcCode"]."</td>";
						$str .= "<td>".$row_blue["IMaster_InstructionType"]."</td>";
						$str .= "<td>".$row_blue["IMaster_InstructionCode"]."</td>";
						$str .= "<td>".$row_blue["C_ITM_CD"]."</td>";
						$str .= "<td>".$row_blue["IMaster_Task2Expr"]."</td>";
						$str .= "</tr>";
					}
				}
			}
		}
		
		unset($row);
		return $str;
		
	}else{
		//子品目なしの場合
		return "";
	}
}

関数を定義しidセレクタでダイアログを取得し、datagridメソッドで選択行に対して処理を行います。

<script>
//新規
function newData(){
	$('#dlg').dialog('open').dialog('setTitle','Tambah Data');
	$('#fm').form('clear');
	$('#id_user').removeAttr('readonly','readonly');
	url = 'proses.php?cmd=newrow';
}

//修正
function editData(){
	var row = $('#dg').datagrid('getSelected');
	if (row){
		$('#dlg').dialog('open').dialog('setTitle','Edit Data');
		$('#fm').form('load',row);
		$('#id_user').attr('readonly','readonly');
		url = 'proses.php?cmd=updaterow';
		document.getElementById('hdn_P_ITM_CD').value = document.getElementById('P_ITM_CD').value;
		document.getElementById('hdn_IMaster_InstructionType').value = document.getElementById('IMaster_InstructionType').value;
		document.getElementById('hdn_C_ITM_CD').value = document.getElementById('C_ITM_CD').value;
	}
}

//削除
function removeData(){
	var row = $('#dg').datagrid('getSelected');
	if (row){
		$.messager.confirm('Confirm','Anda yakin akan menghapus data ini?',function(r){
			if (r){
				$.post('proses.php?cmd=deleterow',{
						P_ITM_CD:row.P_ITM_CD,
						IMaster_ProcNo:row.IMaster_ProcNo,
						IMaster_ProcCode:row.IMaster_ProcCode,
						IMaster_InstructionType:row.IMaster_InstructionType,
						IMaster_InstructionCode:row.IMaster_InstructionCode,
						C_ITM_CD:row.C_ITM_CD,
						IMaster_Task2Expr:row.IMaster_Task2Expr
					},function(result){
					if (result.success){
						$('#dg').datagrid('reload');	// reload the user data
						location.reload();
					} else {
						$.messager.show({	// show error message
							title: 'Error',
							msg: result.msg
						});
					}
				},'json');
			}
		});
	}
}

//保存
function saveData(){
	$('#fm').form('submit',{
		url: url,
		onSubmit: function(){
			return $(this).form('validate');
		},
		success: function(result){
			var result = eval('('+result+')');
			if (result.success){
				$('#dlg').dialog('close');		// close the dialog
				$('#dg').datagrid('reload');	// reload the user data
						location.reload();
			} else {
				$.messager.show({
					title: 'Error',
					msg: result.msg
				});
			}
		}
	});
			
}

document.getElementById("msg").innerHTML = "";
</script>

新規・更新・削除用のダイアログはid要素dlgで定義し、それぞれの関数にマッピングする。

//新規・修正・削除ポップアップ
<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px" closed="true" buttons="#dlg-buttons">
<div class="ftitle">Informasi Record</div>
	<form id="fm" method="post" novalidate>
		<input type="hidden" name="hdn_P_ITM_CD" id="hdn_P_ITM_CD">
		<input type="hidden" name="hdn_IMaster_InstructionType" id="hdn_IMaster_InstructionType">
		<input type="hidden" name="hdn_C_ITM_CD" id="hdn_C_ITM_CD">
		<div class="fitem">
		<table>
			<tr>
				<td>Final Item Code:</td>
				<td><input name="P_ITM_CD" id="P_ITM_CD" class="easyui-validatebox" required="true"></td>
			</tr>
			<tr>
				<td>Proc No:</td>
				<td><input name="IMaster_ProcNo" id="IMaster_ProcNo" class="easyui-validatebox" required="true"></td>
			</tr>
			<tr>
				<td>Proc Code:</td>
				<td><input name="IMaster_ProcCode" id="IMaster_ProcCode" class="easyui-validatebox" required="true"></td>
			</tr>
			<tr>
				<td>Instruction Type:</td>
				<td><input name="IMaster_InstructionType" id="IMaster_InstructionType" class="easyui-validatebox" required="true"></td>
			</tr>
			<tr>
				<td>Instruction Code:</td>
				<td><input name="IMaster_InstructionCode" id="IMaster_InstructionCode" class="easyui-validatebox" required="true"></td>
			</tr>
			<tr>
				<td>Item Or Resource:</td>
				<td><input name="C_ITM_CD" id="C_ITM_CD" class="easyui-validatebox" required="true"></td>
			</tr>
			<tr>
				<td>Production:</td>
				<td><input name="IMaster_Task2Expr" id="IMaster_Task2Expr" class="easyui-validatebox"></td>
			</tr>
		</table>
		</div>
	</form>
</div>

<div id="dlg-buttons">
	<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveData()">Save</a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
</div>





おすすめ記事一覧

大統領選挙で考えたギャップにハマるということ 1
大統領選挙で考えたギャップにハマるということ。【インドネシア中が盛り上がる5年に1度の大統領選挙】

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

情報の質のレベル 2
情報の質のレベル 【見える化された情報を共有化することによる共通認識、体系化による付加価値の創出】

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

3
先の見えない状況下での戦略と戦術【バックワード志向とフォワード志向】

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

宗教によって異なる「死んだらどうなる」の考え方 4
宗教によって異なる「死んだらどうなる」の考え方 【天国への帰り方、地獄への逝き方】

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

株価操作なんてインドネシア株では当たり前 5
株価操作なんてインドネシアでは当たり前 【馴合売買と終値関与】

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

心臓に毛が生えたインドネシア人のずうずうしい転職活動を応援してみた 6
心臓に毛が生えたインドネシア人のずうずうしい転職活動を応援してみた。【内緒の話は誰かに話さないと気がすまない】

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

日系企業のインドネシアでの存在意義 7
日系企業のインドネシアでの事業展開【ガラパゴス市場に特化するか外の世界で勝負するかという選択】

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

チャンスはあるが勝てる分野を見つけるのが難しい 8
これからのインドネシアでの生存戦略【チャンスはあるが勝てる分野を見つけるのが難しくなった】

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

インドネシアのシステムインテグレーション業界 9
インドネシアのシステムインテグレーション業界【2020年代はメーキングインドネシア4.0の追い風あり】

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

肉体と精神と心と魂 10
肉体と精神と心と魂【無宗教の日本人は霊とか魂という言葉に弱い】

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

ジャカルタのラーメン市場 11
安売り競争を前提とした戦略【インドネシア市場の難しさはコスト】

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

ブランド力、技術力、資金力の3要素 12
インドネシアでのビジネスに必要なブランド力と技術力【オンラインとオフラインが繋がった市場】

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

日本とインドネシアの間でのタイムマシン経営が通じなくなっている件 13
日本とインドネシアの間でのタイムマシン経営が通じなくなっている件 【情報のフラット化によるタイムラグ短縮】

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

サリナデパートとマクドナルド 14
マクドナルド1号店閉店とサリナデパートの歴史的背景【インドネシアを題材とした代表的小説「ガルーダ商人」】

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

不景気の歴史 15
インドネシアの不景気の歴史【政治・宗教・金融・病気という異なる要因】

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

日本のバブル経済崩壊後とインドネシアの通貨危機後 16
日本のバブル経済崩壊後とインドネシアの通貨危機後【緩やかな経済成長】

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

内需と外需の自国経済に及ぼす影響 17
内需と外需の自国経済に及ぼす影響【インドネシアも日本も貿易赤字で内需頼み】

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

2019年の総選挙を前にインドネシア政治史のおさらい 18
2019年の総選挙を前にインドネシア政治史のおさらい【1997年以降のインドネシアの歴代大統領】

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

コーヒーをもっと楽しくもっと美味しく 19
コーヒーをもっと楽しくもっと美味しく 【各地のスペシャリティコーヒーが楽しめるインドネシア】

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

インドネシア人の悪魔祓い 20
インドネシア人の悪魔祓い 【心の中に潜むサタンを除霊のような方法で退散させるクリスチャンの儀式】

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

-WEBサイト作成

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