SQLの窓

2018年03月08日


FileReader で、ローカルの CSV を読み込んで(shift_jis)、jQuery でテーブルを作成して表示する

2018/03/08 : ドラッグ & ドロップで読み出すパターンを追加しました
デモページ1( INPUT要素 type="file" ) デモページ2( ドラッグ & ドロップ ) type="file" でローカルのファイルを指定して、キャラクタセットを指定して読み込みます。ここでは、input 要素に multiple を指定していないのでファイルは一つしか指定できませんが、multiple を指定して追加の処理(cssファイルを読み込んでテーブルの見た目を調整する等)を行うのもいいでしょう。 ※ 処理は、multiple を想定して files.length ぶんループしています ※ JavaScript のコレクション処理は、$.each を使う必要があります。 input に accept="text/*" を指定できますが、csv は対象では無かったので使用していません。画像を使う場合には絶対に使用する必要があるでしょう。 ソースコード( INPUT要素 type="file" )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
#list {
	border-collapse: collapse;
}
#list  td {
	padding: 5px;
	border: solid #000000 1px;
	white-space: nowrap;
}
</style>
<input type="file" id="row1_fld" name="row1_fld">
<table id="list"></table>
<script>
$("#row1_fld").on("change", function(){

	for( i = 0; i < this.files.length; i++ ) {

		// FileReader は毎回作成(同時に複数のファイルを扱えない)
		var reader = new FileReader();

		// FileReader にデータが読み込まれた時のイベント
		var token1 = "";
		var token2 = "";
		var tr = null;
		$(reader).on("load", function () {
			token1 = this.result.split("\n");
			$.each( token1, function( idx, value ){
				// 空行を無視
				if ( value == "" ) {
					return;
				}
				token2 = value.split(",");
				// 行を作成
				tr = $("<tr></tr>").appendTo("#list");
				$.each( token2, function( idx, value ){
					// TD を追加して、テキストをセット
					$("<td></td>").appendTo(tr)
						.text(value);
				} )
			} )
		});

		// 上記イベントを発動するための処理( this.files[i] は blob )
		if (this.files[i]) {
			// CSV は通常 shift_jis なので、指定します
			reader.readAsText(this.files[i],"shift_jis");
		}
	}

});
</script>


ソースコード( ドラッグ & ドロップ )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
#list {
	border-collapse: collapse;
}
#list td {
	padding: 5px;
	border: solid #000000 1px;
	white-space: nowrap;
}
#file_drop {
	height:30px;
	padding:10px;
	text-align: center;
	margin-bottom:8px;
	border: solid #000000 1px;
}
</style>
<div id="file_drop">ここにドロップ</div>
<table id="list"></table>
<script>

$("#file_drop").on("dragenter", function(e){
	e.stopPropagation();
	e.preventDefault();

	$(this).css("background-color","#ddd");

	console.log("dragenter");
	
} );
$("#file_drop").on("dragover", function(e){
	e.stopPropagation();
	e.preventDefault();	

} );
$("#file_drop").on("dragleave", function(e){
	e.stopPropagation();
	e.preventDefault();	

	$(this).css("background-color","#fff");
} );
$("#file_drop").on("drop", function(e){
	e.stopPropagation();
	e.preventDefault();		

	$(this).css("background-color","#fff");

	var files = e.originalEvent.dataTransfer.files;
	for( i = 0; i < files.length; i++ ) {

		// FileReader は毎回作成(同時に複数のファイルを扱えない)
		var reader = new FileReader();

		// FileReader に画像が読み込まれた時のイベント
		var token1 = "";
		var token2 = "";
		var tr = null;
		$(reader).on("load", function () {
			token1 = this.result.split("\n");
			$.each( token1, function( idx, value ){
				// 空行を無視
				if ( value == "" ) {
					return;
				}
				token2 = value.split(",");
				// 行を作成
				tr = $("<tr></tr>").appendTo("#list");
				$.each( token2, function( idx, value ){
					// TD を追加して、テキストをセット
					$("<td></td>").appendTo(tr)
						.text(value);
				} )
			} )
		});

		// 上記イベントを発動するための処理( this.files[i] は blob )
		if (files[i]) {
			reader.readAsText(files[i],"shift_jis");
		}
	}
	
} );

$(document).on('dragenter', function (e)
{
	e.stopPropagation();
	e.preventDefault();
});
$(document).on('dragover', function (e)
{
	e.stopPropagation();
	e.preventDefault();
});
$(document).on('drop', function (e)
{
	e.stopPropagation();
	e.preventDefault();
});


</script>


関連する記事

ブラウザ上のテキストデータを名前を付けて保存できる FileSaver.js を使って、テーブルのデータを Excel で開ける事を想定した CSV にして PC に保存



posted by lightbox at 2018-03-08 21:27 | jQuery | このブログの読者になる | 更新情報をチェックする

2018年02月27日


STYLE 要素を追加して、CSS テキストをセットして、jQuery で CSS に important 指定を追加する。

これが自然だと思います。

だいたいにおいて、important を使いたい場合は既存の環境を完全に把握できていないからこそ頼みの綱的な事が多々あるので、要素単位の cssText で塗り替えるのは違うかと。
$("<style></style>")
	.text( "body{ background-color:white!important }")
	.appendTo(document.head);

以下がデベロッパーツールで見た結果
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <style>body{background-color:white!important }</style>
</head>






タグ:jquery important
posted by lightbox at 2018-02-27 21:27 | jQuery | このブログの読者になる | 更新情報をチェックする

2018年02月08日


jQuery + bootstrap.js で ajax の GET と POST を使用した DB テーブルを更新する UI テンプレート

実際のアプリケーションの UI 部分のみ取り出して、ブラウザでテストできるように構成しました。特に jQuery の ajax を用いたテンプレートとして流用できると思います。

初回の キー入力部分では、$.get で GET 読み込みを行っています。第二パスである更新時は $.ajax で POST を使用して送信しています。( POST では FormData オブジェクトを使用しています )

更新確認には、bootstrap のダイアログを使用して、一つのフォームで二つのデータ送信がコードとして別々に読めるようになっています。

実際の FORM の中に入力フィールドを配置して、HTML のチェック機能を利用できるようにしています。ブラウザの送信は、preventDefault() でキャンセルして、ajax でデータを送信するスタイルとなっています。

※ submit_type == "pass1" は、第一パス(キーの送信)です
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.js"></script>

<script>
// ▼ このコードのみでのテスト用変数
var submit_type = "pass1";
//var submit_type = "pass2";

$(function(){

	if ( submit_type == "pass1" ) {
		$("[name^='fld_'],#ref_btn").prop('disabled', true);
	}
	if ( submit_type == "pass2" ) {
		$("input[name='key_code']").prop('readonly', true);
		$("[name^='fld_'],#ref_btn").prop('disabled', false);
	}

	// **************************************
	// 確認処理
	// **************************************
	$("#base").on( "submit", function(event){

		// 更新確認ダイアログの表示の為、本来の送信処理はキャンセル
		event.preventDefault();

		// 入力したコードよりデータを取得する
		if ( submit_type == "pass1" ) {

			console.log("key_code");
			console.log(key_code);

			// Ajax で GET する
			$.get({
				url: "app-get.php",
				cache: false,
				data: { "key_code" : $(this).find("input[name='key_code']" ).val() }
			})
			.done(function( data, textStatus ){
				console.log( "status:" + textStatus );
				console.log( "data:" + JSON.stringify(data, null, "    ") );

				if ( data.status == 0 ) {

					// *************************************
					// コード部分を入力不可に設定
					// *************************************
					$("input[name='key_code']").prop('readonly', true);

					// *************************************
					// 明細部分を入力可能に変更
					// *************************************
					$("[name^='fld_'],#ref_btn").prop('disabled', false);

					// 氏名
					$("input[name='fld_name']").val( data.row["氏名"] );
					// フリガナ
					$("input[name='fld_kana']").val( data.row["フリガナ"] );
					// 給与
					$("input[name='fld_kyuyo']").val( data.row["給与"] );

					// 所属
					$("input[name='fld_syozoku']").val( data.row["所属"] );
					$("#ref_syozoku").text( data.row["所属名"] );

					// 性別
					$("select[name='fld_seibetu']").val( data.row["性別"] );
					// 生年月日
					$("input[name='fld_birth']").val( data.row["生年月日"].substring(0,10) );

					// フォーカスを設定
					$("input[name='fld_name']").focus();

					// コードをローカルストレージに保存
					localStorage["code"] = parent.$("input[name='key_code']").val();


					// エラーが無ければ次の処理を行えるようにする
					submit_type = "pass2";

				}

				// 対象データが無い場合
				if ( data.status == 1 ) {
					// エラーメッセージを表示
					toastr.error("入力された社員コードは存在しません");

					// エラー部分にフォーカスをセット
					$("input[name='key_code']").focus();
					// エラーが発生したフィールド内の文字列を選択する
					$("input[name='key_code']").select();

				}

				if ( data.status == -1 ) {
					// エラーメッセージを表示
					toastr.error("システムエラーです : SQL にあやまりがあります");

				}
				
			})
			// 失敗
			.fail(function(jqXHR, textStatus, errorThrown ){
				console.log( "status:" + textStatus );
				console.log( "errorThrown:" + errorThrown );

				// エラーメッセージを表示
				toastr.error("システムエラーです");

			})
			// 常に実行
			.always(function() {
			})
			;

		}


		// Bootstrap の モーダルダイアログの表示
		if ( submit_type == "pass2" ) {
			$("#update_check").modal();
		}

	});

	// **************************************
	// Bootstrap OK ボタン
	// ※ ここで第二パスの送信処理を確定
	// **************************************
	$("#data_update").on("click", function(){

		// Ajax で POSTする

		// 新規送信用オブジェクト
		var formData = new FormData();

		// ファイルオブジェクト
		formData.append("key_code", $("input[name='key_code']").val() );
		formData.append("fld_name", $("input[name='fld_name']").val() );
		formData.append("fld_kana", $("input[name='fld_kana']").val() );
		formData.append("fld_seibetu", $("select[name='fld_seibetu']").val() );
		formData.append("fld_birth", $("input[name='fld_birth']").val() );
		formData.append("fld_kyuyo", $("input[name='fld_kyuyo']").val() );
		formData.append("fld_syozoku", $("input[name='fld_syozoku']").val() );

		// **************************************
		// サーバ呼び出し
		// **************************************
		$.ajax({
			url: "app-update.php",
			type: "POST",
			data: formData,
			processData: false,  // jQuery がデータを処理しないよう指定
			contentType: false   // jQuery が contentType を設定しないよう指定
		})
		.done(function( data, textStatus ){
			console.log( "status:" + textStatus );
			console.log( "data:" + JSON.stringify(data, null, "    ") );

			// *************************************
			// コードを入力可に設定
			// *************************************
			$("input[name='key_code']").prop('readonly', false);

			// *************************************
			// 明細部分を入力不可に変更
			// *************************************
			$("[name^='fld_'],#ref_btn")
				.prop('disabled', true);

			// 氏名のクリア
			$("input[name='fld_name']").val( "" );
			// フリガナのクリア
			$("input[name='fld_kana']").val( "" );
			// 給与のクリア
			$("input[name='fld_kyuyo']").val( "" );

			// 所属のクリア
			$("input[name='fld_syozoku']").val( "" );
			$("#ref_syozoku").text("");

			// 性別の初期化
			$("select[name='fld_seibetu']").val( "0" );
			// 生年月日の初期化
			$("input[name='fld_birth']").val( "" );

			// フォーカスを設定
			$("input[name='key_code']").focus();
			
			// エラーが無ければ次の処理を行えるようにする
			submit_type = "pass1";

			toastr.info("更新されました");


		})
		.fail(function(jqXHR, textStatus, errorThrown ){
			console.log( "code:" + jqXHR.status );
			console.log( "status:" + textStatus );
			console.log( "errorThrown:" + errorThrown );
		})
		.always(function() {
		})
		;



	});

});
</script>


<input
	id="action_copy"
	type="submit"
	value="送信"
	class="btn btn-primary"
	onclick="$('#action').click();"
	style='float:right'>

<input
	id="action_reset"
	type="button"
	value="リセット"
	class="btn btn-danger mr-3"
	onclick="location.href='/access-1129/app/syain-upd/syain.php'"
	style='float:right'>

<form id="base" method="post" target="_self">
	<div>
		<div class="left">社員コード</div>
		<div class="right">
			<input
				type="text"
				id="key_code"
				name="key_code"
				class="unit"
				value="" required >
		</div>
	</div>
	<div>
		<div class="left">氏名</div>
		<div class="right">
			<input
				type="text"
				id="fld_name"
				name="fld_name"
				class="unit"
				value="" required >
		</div>
	</div>
	<div>
		<div class="left">フリガナ</div>
		<div class="right">
			<input
				type="text"
				id="fld_kana"
				name="fld_kana"
				class="unit"
				value=""  >
		</div>
	</div>
	<div>
		<div class="left">給与</div>
		<div class="right">
			<input
				type="text"
				id="fld_kyuyo"
				name="fld_kyuyo"
				class="unit"
				value="" required maxlength='7' pattern='\d+' >
		</div>
	</div>
	<div>
		<div class="left">所属</div>
		<div class="right">
			<div class="input-group">
				<input
					type="text"
					id="fld_syozoku"
					name="fld_syozoku"
					class="unit form-control"
					value=""
					maxlength="4"
					readonly>
		
				<span class="ml-2 pl-2 pt-2" id="ref_syozoku"></span>

				<input class="ml-2" type="button" value="参照" id="ref_btn">
			</div>
		</div>
	</div>
 
	<div>
		<div class="left">性別</div>
		<div class="right">
			<select class="unit form-control" name="fld_seibetu" id="fld_seibetu" >
				<option value="0">男性</option>
				<option value="1">女性</option>
			</select>
		</div>
	</div>

	<div>
		<div class="left">生年月日</div>
		<div class="right">
			<div class="input-group">
				<input readonly type="text" id="fld_birth" name="fld_birth">
				<button
					type="button"
					class="btn"
					onclick='$(this).prev().val("");'>×</button>
			</div>
		</div>
	</div>

	<div style='height:60px'>
		<div class="left"><label for="fld_skbn">正社員</label></div>
		<div class="right">
			<input type="checkbox" id="fld_skbn" name="fld_skbn" class="unit form-control" value="1" style="width: 1rem;margin-top: 14px;height 1rem">
		</div>
	</div>

	<div>
		<div class="left">年代</div>
		<div class="right">
			<div class="input-group">
				<label for="fld_nendai_a" class="mt-2">20代</label>
				<input type="radio" id="fld_nendai_a" name="fld_nendai" class="ml-1 mr-3" value="A" style="width: 1rem;margin-top: 0.75rem;">

				<label for="fld_nendai_b" class="mt-2">30代</label>
				<input type="radio" id="fld_nendai_b" name="fld_nendai" class="ml-1 mr-3" value="B" style="width: 1rem;margin-top: 0.75rem;">

				<label for="fld_nendai_c"  class="mt-2">40代</label>
				<input type="radio" id="fld_nendai_c" name="fld_nendai" class="ml-1 mr-3" value="C" style="width: 1rem;margin-top: 0.75rem;">

				<label for="fld_nendai_d"  class="mt-2">50代</label>
				<input type="radio" id="fld_nendai_d" name="fld_nendai" class="ml-1" value="D" style="width: 1rem;margin-top: 0.75rem;">
			</div>
		</div>
	</div>

	<div>
		<input
		id="action"
			type="submit"
			value="送信"
			class="btn btn-primary unit mt-5"
			title="mt5 は margin-top の略で 1〜5">
	</div>

</form>

<div class="modal fade" id="update_check" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">

			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">確認</h4>
			</div>

			<div class="modal-body">
			更新しますか?
			</div>

			<div class="modal-footer">
				<button id="data_update" type="button" class="btn btn-default" data-dismiss="modal">OK</button>
			</div>

		</div>
	</div>
</div>





posted by lightbox at 2018-02-08 10:03 | jQuery | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり