SQLの窓

2018年07月15日


CSS の calc 関数を使って、IFRAME を画面下半分にフィットさせる



デモページ



以前は、JavaScript で実装してたのですが、知らない間に calc 関数というものがあったのを知り、IE11 ですらうまく動作する結果になっていました。

以下は php を使って、高さの部分を PHP の側の変数を使用して埋め込んでいます。IE11 以外のブラウザならば、var 関数を使用できるのですが、IE11 が実装する見通しも無いのでこのような形にするか、固定値を2度設定する必要があります。
<?php
require_once('view_config.php');

# **************************************
# js キャッシュ用
# **************************************
$tm = mktime();

# **************************************
# 画面定義
# ( Ruby や Python に合わせた画面形式 )
# **************************************
$out_client = <<<HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" />

<script src="{$view_js}?{$tm}"></script>

<style>
/* ブロックを左右に表示  */
.ttl {
	display: inline-block;
	width: 150px;
}
.entry {
	display: inline-block;
}
.line {
	margin-bottom: 0;
}


/* IFRAMEコントロール用  */
html,body {
	height: 100%;
}

body {
	margin: 0;
}
#head {
	padding: 16px;
	width: 100%;
	height: {$view_head_height}px;
	background-color: #e0e0e0;
}
#extend {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: calc( 100% - 3px );
	height: calc( 100% - {$view_head_height}px - 2px );
	border: solid 2px #c0c0c0;
}
</style>
</head>
<body>

<div id="head">
	<p class="ttl">
		氏名で検索
	</p>
	<p class="entry">
		<input
			id="cond"
			type="text">
		<input
			class="ml-4 btn btn-success"
			id="btn"
			type="button"
			value="問合せ">

		<a
			class="ml-4 btn btn-info btn-sm"
			href="{$_SERVER["PHP_SELF"]}">GET 再読み込み</a>
	</p>
	<p class="line"></p>

	<h4 class="text-danger">{$check_message}</h4>

</div>

<iframe id="extend" name="extend" class="iframe-option" src="req/control.php"></iframe>

</body>
</html>
HTML;

print $out_client;


?>


まず、高さを正しく計算させる為に html と body 要素の高さを 100% として明示します。次に基本部分の body 要素の margin を 0 として余白は #head 側で作成します。

そして、calc 関数で IFRAME の高さブラウザに計算させます。(他の小さな数値は縦と横の小さな余白用に使用しています)

view_config.php
<?php
$view_js = "entry.js";

$view_head_height = "100";


?>





posted by lightbox at 2018-07-15 01:11 | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする

2017年12月05日


jQuery プラグイン : Columns と PHP の連携と、ドキュメントには書かれていないカスタマイズ方法

デモページ


jQuery プラグインの Columns は、JSON データを読み込むだけで上のような至れり尽くせりのテーブル要素による一覧表示を可能にします。

問合せテーブルの特徴

1) ページ処理( ページとページ )
2) ページ毎の行数変更
3) テーブル上のデータのリアルタイム検索
4) 列のタイトルをクリックしてソート

※ 特別なオプションを設定しなければ、3) と 4) は全ての列が対象となります

とても簡単な PHP との連携

PHP 側では、JSON で行の配列を返せば良いので、データベースの読み込み処理は、一括で簡単です。列名やデータの表示方法は、JSON のデータで決定されるので、SQL を変更する事によって自由自在に表示を変更できます。
<?php
header( "Content-Type: application/json; Charset=utf-8" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );

require_once("dbsetting.php");

$query = <<<QUERY
-- ***********************************************
-- SQL 開始
-- ***********************************************
select 

SYAIN.社員コード,
SYAIN.氏名,
SYAIN.フリガナ,
SYAIN.所属,
A.名称 as 所属名,
-- SYAIN.性別,
B.名称 as 性別,
SYAIN.給与,
ifnull(SYAIN.手当,'') as 手当,
ifnull(SYAIN.管理者,'') as 管理者,
ifnull(SYAIN2.氏名,'') as 管理者名,
ifnull(DATE_FORMAT(SYAIN.生年月日,'%Y/%m/%d'),'') as 生年月日

from 

社員マスタ SYAIN
left outer join コード名称マスタ A
on SYAIN.所属 = A.コード

left outer join 社員マスタ SYAIN2
on SYAIN.管理者 = SYAIN2.社員コード

left outer join コード名称マスタ B
on SYAIN.性別 = B.コード

where A.区分 = 2 and B.区分 = 1	and SYAIN.削除区分 is NULL
and SYAIN.氏名 like '%{$_GET['cond']}%'

order by SYAIN.社員コード

-- ***********************************************
-- SQL 終了
-- ***********************************************
QUERY;

$result = $connect->query($query); 
$row = $result->fetch_all(MYSQLI_ASSOC);

print json_encode($row);

?>

mysqli_result::fetch_all

ドキュメントにはっきり書かれていないカスタマイズ

ソースコードを読まないと解りませんが、『問合せテーブルの特徴』での4つの処理毎にイベントが用意されています。これらのイベントが発生すると、テーブルの表示が書き換わるのですが、HTML そのものを再構築するので外部からカスタマイズするには無理があります。そこで、以下の4つの定義済みイベントが必要になります。
1) pageHandler
2) sizeHandler
3) searchHandler
4) sortHandler
これらのイベントは、他のオプションプロパティと同じ部分で定義されているので、設定時のプロパティとして無名関数を定義する事によって、外部から処理する事が可能になります。 しかし、この中に書く処理には、デフォルトの処理があるので、外部で定義する場合もその処理は記述しなければなりのません。そして、そのデフォルトの処理は、ソースコードを読まないと具体的に知る事ができません。 ▼ 以下がその処理を含めた、デモ用の初期設定です。
$(function() {

	$.get("syain.php?cond=" , function(data){

		$('#columns').columns({
			data: data, 
			templateFile: 'columns/templates/custom.mst',
			showRows: [10, 20, 50],
			size: 10,
			sortableFields: ['社員コード','氏名'],
			searchableFields: ['所属'],
			pageHandler: function(){
				this.create();
				customTable();
			},
			sortHandler: function() {
				this.page = 1;
				this.create();
				customTable();
			},
			searchHandler: function(event) { 
				if(this.liveSearch) {
					this.create();
				} else {
					if(event.keyCode == '13') {
						this.create();
					}
				}
				customTable();
			},
			sizeHandler: function() {
				this.create();
				customTable();
			}
		
		});

		// プラグイン実装後の1回きりの処理
		customTable();

	});



});


this.create() がテーブルの再構築処理です。ですから、カスタマイズするのは、this.create() の後ろに自分の処理を行う必要があります。( this.create() の前に行う処理の場合は、オプションや内部データを直接変更する処理になると思います )

ここで行った『あとから CSS で右よせにしてカンマ編集』

テーブルなので、jQuery の find を使う事によって結構単純に目的の列の情報を変更する事ができます。以下の customTable 関数では、TH 部分と TD 部分を個別に設定しています
function customTable() {

		// 給与と手当
		$("table").find("th").eq(6).css("text-align", "right");
		$("table").find("th").eq(7).css("text-align", "right");

		$("table").find("tr").each( function(){
			// 給与と手当
			$(this).find("td").eq(6).css("text-align", "right");
			$(this).find("td").eq(7).css("text-align", "right");

			var kyuyo = $(this).find("td").eq(6).text();
			kyuyo = parseInt(kyuyo,10);
			// カンマ編集
			kyuyo = kyuyo.toLocaleString();
			$(this).find("td").eq(6).text(kyuyo);

			var teate = $(this).find("td").eq(7).text();
			if ( teate != "" ) {
				teate = parseInt(teate,10);
				// カンマ編集
				teate = teate.toLocaleString();
			}
			$(this).find("td").eq(7).text(teate);

		} );
}



説明不十分なテンプレート使用方法

デフォルトのテンプレートは、ソースコードに埋め込まれてしまっています。ですから、テンプレートをカスタマイズするには、templateFile プロパティを使用する必要があります。外部ファイルに用意されたテンプレートファイルは、以下の二つです。

custom.mst
default.mst

ソースに埋め込まれているものが、default.mst のようなので、custom.mst を使ってみると、どうやらバグのようで、カスタマイズされたフィールド( ページジャンプ ) が、Plugin オプションを使わないと動作しないようですが、用意されている gotopage.js を使ってもちょっと動かないようです。

そもそも、Plugin に関する説明が全くありませんが、使うとすると内部から呼び出されるイベントとして動作します。但し、テーブル再構築後にしか呼ばれないようなので、利用範囲が限定されます。

Plugin 内のイベントは二つしか無く、init と create で、init は最初に一度だけ処理されます。create を使って、狙った要素にイベントを作成する事ができると思いますが、通常のイベントオプションを使ったほうが汎用性があるように思います。

ただ、サンプルとして付加されている、ajaxpaging.js は、プラグイン内で イベントオプション を使用しており、『必要な時に必要だけデータを取得して表示』するという処理を実現しているように見えます。

テンプレートと画像の扱い

ページ処理用の画像が、テンプレートに直接パスが埋め込まれているので、実行中のページの中に images フォルダが必要である事になっています。images の場所が違う場合は、テンプレート内を直接変更する必要があります。

サーチ用の画像は CSS 内で使用されているので、CSS があるフォルダからの相対パスが正しければ表示されます

ドキュメント内の誤記

size のデフォルトが 10 と書かれていますが、実際は 5 です

oddRowClass のデフォルトが 'ui-table-rows-even' となっていますが、完全な誤りです。実際は(あたりまえですが)、ui-table-rows-odd になります。

even と odd は、偶数・奇数です。行の背景色を交互に変える為に一般的に使用される手法です

デモで使用しているテーブルの仕様

▼ 社員マスタ
列名 型名 最大桁 NULL 主キー
1 社員コード varchar 4 N 1
2 氏名 varchar 50    
3 フリガナ varchar 50    
4 所属 varchar 4    
5 性別 int      
6 作成日 datetime      
7 更新日 datetime      
8 給与 int      
9 手当 int      
10 管理者 varchar 4    
11 生年月日 date      
12 削除区分 varchar 1    

▼ コード名称マスタ
列名 型名 最大桁 NULL 主キー
1 区分 int   N 1
2 コード varchar 10 N 2
3 名称 varchar 50    
4 数値1 int      
5 数値2 int      
6 作成日 datetime      
7 更新日 datetime      

関連する記事

イラストAC 用 : 前日ダウンロード数を一覧表示する為のブックマークレット : jQuery プラグイン使用

イラストACの管理画面に、イラスト毎の前日ダウンロード項目が追加されたので、前日にダウンロードされたイラストのみをテーブルで表示するブックマークレットを作成しました。

jQuery Columns を使って、Picasa API より アルバム一覧を表示する




posted by lightbox at 2017-12-05 20:24 | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする

2016年11月22日


1会話・IFRAME(TCPDF)テンプレート : jQuery + Bootstrap(css) + mmenu + Firebase + TCPDF + PHP

デモページ




▼ このプラグインを使用して、ヘッダ部分で条件入力して PDF をその下の IFRAME へ表示するテンプレートです。
かつての FRAME のように画面下部に張り付く IFRAME を実装する jQuery プラグイン

全体の表示部分のテンプレート部分は、jQuery + Bootstrap(css) + mmenu で構成されており、独自の仕様ではありますが、見ればだいたい解るようには作成してあります。

アプリケーション部分

データ部分 : Firebase
PDF部分 : TCPDF
処理部分 : PHP

となっており、Firebase は PHP から直接読み込む必要があるので、Firebase Database REST API を使用しています。

TCPDF は文字列印字部分をユーザ関数化して、昔ながらの印刷用アルゴリズムで出力しています。

TCPDF 関数部分 : print.php
<?php
define ('K_PATH_FONTS', "tcpdf/");
require_once('tcpdf/tcpdf.php');

// ************************************************
//   P or PORTRAIT(縦:既定)
//   L or LANDSCAPE(横))
// ---------------------------
//   pt: ポイント
//   mm: mm(既定)
//   cm: cm
//   in: インチ
// ---------------------------
//   用紙サイズ
// ---------------------------
// boolean $unicode = true
// ---------------------------
// String $encoding = 'UTF-8'
// ---------------------------
// boolean $diskcache = false
// ---------------------------
// PDF/A モード
// ---------------------------
// 
// 全てデフォルトなので $pdf = new TCPDF("L") でもOK
// ************************************************
$pdf = new TCPDF("L");
/*
$pdf = new TCPDF(
	"L",
	"mm",
	"A4",
	true,
	"UTF-8",
	false,
	false
);
*/

// ************************************************
// 設定
// ************************************************
$pdf->setFontSubsetting(false);
$pdf->setPrintHeader(false);
$pdf->setPrintFooter(false);
$pdf->SetAutoPageBreak(false);


// ************************************************
// デバッグ用ログ
// ************************************************
function log_out( $text ) {

	// クリア
	if ( $text == null ) {
		file_put_contents("log.txt","");
		return;
	}

	// 書き込み
	file_put_contents("log.txt", $text . "\n", FILE_APPEND );

}

// ************************************************
//  テキスト印字
// $p は L で左揃え、R で右揃え
// $w : 矩形領域の幅(1だと最低幅) : 右揃えに必要
// $h : 矩形領域の高さ
// http://tcpdf.penlabo.net/method/c/Cell.html
// ************************************************
function user_text( $pdf, $x, $y, $text, $w=1, $h=0, $p="L" ) {

	text( $pdf, $x, $y, $text, $w, $h, $p );

	return $y;

}

// ************************************************
// 位置指定印字
// ※ 改行コードで自動改行
// ※ ページあふれで自動改ページ
// ※ 内部印字位置は保存( 元に戻す )
// ************************************************
function text( $pdf, $x=0, $y=0, $txt='', $w=1, $h=0, $p="L" ) {

	$a = $pdf->GetX();
	$b = $pdf->GetY();

	$hm = $pdf->getPageHeight( );
	$dm = $pdf->getPageDimensions();
	$tm = $dm['tm'];
	$bm = $dm['bm'];

	$txt = str_replace( "\r","", $txt );
	$data = explode("\n", $txt );
	if ( count( $data ) > 1 ) {
		for( $i = 0; $i < count($data); $i++ ) {
			if ( $i == 0 ) {
				$pdf->SetXY( $x, $y );
			}
			else {
				$y += $pdf->getLastH();
				if ( $y >= ( $hm - $tm - $bm ) ) {
					$pdf->AddPage();
					$y = $tm;
				}
				$pdf->SetXY( $x, $y );
			}
			$pdf->Cell($w, $h, $data[$i], 0, 0, $p);
		}
	}
	else {
		$pdf->SetXY( $x, $y );
		$pdf->Cell($w, $h, $txt, 0, 0, $p);
	}
	$y += $pdf->getLastH();

	$pdf->SetXY($a,$b);

}


?>

フォントには、メイリオを使用しています。以下を参照して下さい
TCPDF で非埋め込み型として『メイリオ』を使う手順

フォントファイルは、define ('K_PATH_FONTS', "tcpdf/"); で指定した場所です。
※ MSゴシックとMS明朝も同梱しています。

印刷用アルゴリズム部分
<?php
// ************************************************
// セッションとキャッシュなし
// ************************************************
session_cache_limiter('nocache');
session_start();

// ************************************************
// 印字関数
// ************************************************
require_once("print.php");

log_out(null);
$rh		= 8;	// 行間の距離
$hh		= 40;	// ヘッダーの下の次の印字位置
$rmax	= 15;	// ページ内の最大明細行数
// ************************************************
// フォント
// 第二引数は フォント・スタイル(空文字で標準)
// http://tcpdf.penlabo.net/method/s/SetFont.html
// ************************************************
$pdf->SetFont('meiryo001', '', 14);

$pdf->AddPage();

// ************************************************
// データベース
// ※ パスの先にデータが無い事は考慮していない
// ************************************************
$url = "https://freebase-654b7.firebaseio.com/class.json";
$file = @file_get_contents($url);
if ( $file !== false ) {
	// 連想配列形式で返す
	$result = json_decode( $file, true );

	if ( $result == null ) {
		// テキストのサイズ変更
		$pdf->SetFont('meiryo001', '', 20);
		// テキストの色
		$pdf->SetTextColor(255, 0, 0);
		user_text( $pdf, 10, 10, 'データが存在しません' );
		$pdf->Output("test_output.pdf", "I");
		exit();
	}

}

$url = "https://freebase-654b7.firebaseio.com/refdata/syozoku.json";
$file = @file_get_contents($url);
if ( $file !== false ) {
	$syozoku = json_decode( $file, true );

	// log_out(print_r($syozoku,true));

	if ( $syozoku == null ) {
		$syozoku = json_decode( '{"0001":"営業部第一","0002":"技術開発","0003":"人事部"}', true );
	}
}

// ************************************************
// 印刷用変数
// ************************************************
$counter = 0;	// ページ用カウンタ
$lcount = 0;	// 行数カウンタ
$sum = 0;		// ページ毎合計
$sumall = 0;	// 総合計

// 最初のヘッダーを出力して現在位置(y)を取得
$cur_position = print_header( $pdf );

// ************************************************
// 処理ループ
// ************************************************
foreach( $result as  $key => $obj ) {

	if ( $_GET['fld1'] != '' ) {
		if ( mb_strpos($obj["name"],$_GET['fld1'],0,"utf-8") === false ) {
			continue;
		}
	}

	$lcount++;
	if ( $lcount > $rmax ) {
		$counter++;
		$lcount = 0;
		user_text( $pdf, 108, $cur_position, "ページ計" );
		user_text( $pdf, 138, $cur_position, number_format($sum), 20, 0, "R" );
		$sum = 0;

		// 新しいページ
		$pdf->AddPage();
		$cur_position = print_header( $pdf );
	}

	user_text( $pdf, 10, $cur_position, $obj["code"] );
	user_text( $pdf, 28, $cur_position, $obj["name"] );
	user_text( $pdf, 51, $cur_position, $obj["furi"] );
	user_text( $pdf, 95, $cur_position, $syozoku[$obj["syozoku"]] );
	if ( $obj["sex"] == "0" ) {
		$pdf->Image("man.png", 125+3.2, $cur_position, 5, 5);
	}
	else {
		$pdf->Image("lady.png", 125+3.2, $cur_position, 5, 5);
	}
	user_text( $pdf, 138, $cur_position, number_format($obj["kyuyo"]), 20, 0, "R" );
	$sum += $obj["kyuyo"];
	$sumall += $obj["kyuyo"];

	// 手当ては文字列として設計されているので数値化
	user_text( $pdf, 163, $cur_position, number_format($obj["teate"]+0), 20, 0, "R" );
	user_text( $pdf, 183, $cur_position, $obj["birthday"] );

	$cur_position += $rh;

}

// ************************************************
// 最大行数が、最後の2行が入るように想定されて
// いるので、以下は無条件に出力する
// ************************************************

user_text( $pdf, 108, $cur_position, "ページ計" );
user_text( $pdf, 138, $cur_position, number_format($sum), 20, 0, "R" );

// 次の行
$cur_position += $rh;
user_text( $pdf, 108, $cur_position, "総合計" );
user_text( $pdf, 138, $cur_position, number_format($sumall), 20, 0, "R" );


// ブラウザへ PDF を出力します
$pdf->Output("test_output.pdf", "I");

// デバッグ用
file_put_contents( "../log/global.txt", print_r($GLOBALS, true) );
//file_put_contents( "../log/global.txt", "[_GET]\n".print_r($_GET, true)."\n"."[_POST]\n".print_r($_POST, true)."\n"."[_COOKIE]\n".print_r($_COOKIE, true)."\n"."[_SESSION]\n".print_r($_SESSION, true) );

// ***********************************************
// ヘッダ印字
// ***********************************************
function print_header( $pdf ) {

	global $counter;

	$page_info = $pdf->getPageDimensions();
	$cur_position = $page_info['tm'];	// トップマージン

	user_text( $pdf, 125, $cur_position, "社員一覧表" );
	user_text( $pdf, 224, $cur_position, "ページ :" );
	user_text( $pdf, 250, $cur_position, number_format($counter+1), 5, 0, "R" );

	// 2行
	$cur_position += $GLOBALS['rh'] * 2;
	user_text( $pdf, 10, $cur_position, "コード" );
	user_text( $pdf, 28, $cur_position, "名前" );

	user_text( $pdf, 51, $cur_position, "フリガナ" );
	user_text( $pdf, 95, $cur_position, "所属" );
	user_text( $pdf, 125, $cur_position, "性別" );

	user_text( $pdf, 138, $cur_position, "給与", 20, 0, "R" );
	user_text( $pdf, 163, $cur_position, "手当", 20, 0, "R" );
	user_text( $pdf, 183, $cur_position, "生年月日" );

	$cur_position += $GLOBALS['rh'];

	// 直線のスタイル
	$pdf->SetLineStyle(
		array(
			'width' => 0.4,
			'cap' => 'round',
			'join' => 'round',
			'dash' => 0,
			'color' => array(0xFF,0xC0,0xCB)	// pink
		)
	);
	// 直線
	$pdf->Line(
		$page_info['lm'],	// 左マージン
		$cur_position+1.5,
		$page_info['wk']-$page_info['lm']-$page_info['rm'],	// ページ幅 - 左右マージン
		$cur_position+1.5);
	
	return $GLOBALS['hh'];

}
?>

いろいろなページを構成する定数を元に、ヘッダと明細部分を分けてコントロールするオーソドックスなものです。改ページは、次に印字すべき位置があらかじめ決めた行数を超えた時に処理され、次のページの先頭には必ずヘッダ部分が出力されます。

このサンプルでは、合計部分の行数はあらかじめ想定してあるため、ページ内の明細行数は少なめになっていますが、本来は合計部分も改ページコントロールの対象にする事が昔は多かったですが、合計部分が固定位置となるような、専用の用紙であればこちらに近くなるはずです。

▼ Firebase database データ
https://freebase-654b7.firebaseio.com/class.json



posted by lightbox at 2016-11-22 20:24 | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする

2016年02月02日


jquery.ajax-combobox(オートコンプリートとドロップダウンリストを組み合わせたコンボボックス) を使用して、入力可能なコンボックス( しかもリストはページャ付き )

重要

2015/12/1 に検証した結果、解説ページに使用されている jquery.ajax-combobox.js より、GitHub でダウンロードした jquery.ajax-combobox.js のほうが古い事が解りました。古いほうでは、解説ページに書かれている事の半分以上が動作しません。

http://www.usamimi.info/~sutara/ajax-combobox/dist/jquery.ajax-combobox.js をダウンロードする必要があります 
※ UTF-8N です

※ jquery.ajax-combobox.min.js の日付はさらに古いので使え無いものと思われます


最新バージョンに差し替えて、サブ項目のデモを追加しました



ここからは少し前の投稿

デモページ



作者さんの意図では、本来 ajax を使ってサーバー側のデータをリアルタイムに取得する事が目的のようですが、利用するには少し問題が多そうです。サーバー側の解説も無く、クライアント側の解説もそれほど明快なものではありません。

なので、最低限確実に動くサンプルを作成しました。サーバーと連携したい場合は単純に一括で ajax で必要な JSON を取得してから jquery.ajax-combobox に引き渡すといいでしょう。

ダウンロードページ

解説ページ

デモで実行しているコード
	var data = [{"社員コード":"0001","氏名":"浦岡 友也"},{"社員コード":"0002","氏名":"山村 洋代"},{"社員コード":"0003","氏名":"多岡 冬行"},{"社員コード":"0004","氏名":"高田 冬美"},{"社員コード":"0005","氏名":"内高 友之"},{"社員コード":"0006","氏名":"森尾 正也"},{"社員コード":"0007","氏名":"鈴杉 由樹"},{"社員コード":"0008","氏名":"川吉 洋樹"},{"社員コード":"0009","氏名":"村森 友恵"},{"社員コード":"0010","氏名":"杉岡 友一"},{"社員コード":"0011","氏名":"川多 由男"},{"社員コード":"0012","氏名":"杉岡 由樹"},{"社員コード":"0013","氏名":"木川 元男"},{"社員コード":"0014","氏名":"川木 春一"},{"社員コード":"0015","氏名":"中多 克也"},{"社員コード":"0016","氏名":"森村 正恵"},{"社員コード":"0017","氏名":"尾田 雅也"},{"社員コード":"0018","氏名":"松中 輝行"},{"社員コード":"0019","氏名":"野丸 由一"},{"社員コード":"0020","氏名":"松野 友之"},{"社員コード":"0021","氏名":"吉村 春一"},{"社員コード":"0022","氏名":"丸吉 春代"},{"社員コード":"0023","氏名":"松本 洋也"},{"社員コード":"0024","氏名":"尾木 輝男"},{"社員コード":"0025","氏名":"鈴川 春美"},{"社員コード":"0026","氏名":"原中 元美"},{"社員コード":"0027","氏名":"浦村 春一"},{"社員コード":"0028","氏名":"森木 和之"},{"社員コード":"0029","氏名":"多田 友行"},{"社員コード":"0030","氏名":"浦川 冬代"},{"社員コード":"0031","氏名":"岡中 冬之"},{"社員コード":"0032","氏名":"野尾 春男"},{"社員コード":"0033","氏名":"田杉 洋也"},{"社員コード":"0034","氏名":"村高 洋代"},{"社員コード":"0035","氏名":"本原 正也"},{"社員コード":"0036","氏名":"浦多 冬代"},{"社員コード":"0037","氏名":"鈴丸 輝之"},{"社員コード":"0038","氏名":"松高 洋一"},{"社員コード":"0039","氏名":"高松 雅之"},{"社員コード":"0040","氏名":"安村 克恵"},{"社員コード":"0041","氏名":"丸森 雅美"},{"社員コード":"0042","氏名":"中原 冬男"},{"社員コード":"0043","氏名":"原松 春也"},{"社員コード":"0044","氏名":"村松 冬子"},{"社員コード":"0045","氏名":"村松 和子"},{"社員コード":"0046","氏名":"尾内 正樹"},{"社員コード":"0047","氏名":"多松 正樹"},{"社員コード":"0048","氏名":"浦杉 由美"},{"社員コード":"0049","氏名":"原田 春代"},{"社員コード":"0050","氏名":"松丸 正恵"}];

	$('#combo1').css({ "width": "350px" })
	.ajaxComboBox(
		data,
		{
			per_page: 20,
			lang: 'ja',
			button_img: 'ajaxcombobox/dist/btn.png',
			primary_key: '社員コード',
			field: '氏名',
			order_by: [
				'社員コード'
			]
		}
	);
最初に幅を 350px に設定しているのは、これでしか横幅を指定できなかったからです。解説内に幅を狭くするような記述がありますが、コンボボックスそのものでは無いようです。

入力部分は自由に入力が出来、自動的に検索されます。無かった値で送信した場合は、INPUT の name 属性に従って普通に値が送られます。既に存在する値を選んだ場合は、name属性_primary_key にキー部分もセットされます。

入力した値で検索されますが、スペースで区切ると AND 検索になります。オプションで OR 検索に変更する事も可能です

order_by プロパティでは、複数項目が指定可能で、DESC 文字列を使用できます( これについては、解説ページに記述されています )
order_by: [
	'社員コード DESC'
]
キーアクション 入力部分とボタン部分でリストが開いて無い時に下矢印キーを使うとリストが開き、開いている時は、ESC や TAB で閉じます また、開いている時には左右の矢印キーで1ページづつ移動でき、SHIFT+矢印キー で、先頭・最後に移動可能です。 関連する記事 jquery.ajax-combobox で JSON をデータに使う場合、複数項目を検索対象にする為の簡単な改造
posted by lightbox at 2016-02-02 16:15 | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする

jquery.ajax-combobox で JSON をデータに使う場合、複数項目を検索対象にする為の簡単な改造

このプラグインはとても便利です。先週、実際のシステムに実装しましたが、コードと名前と両方で検索したいという要望に合わせて改造しました。

デモページ


オリジナルの説明ではできるような事が書かれていますが、それば付属のデーターベースアクセスを行う PHP を使う必要があるようで、JSON データをクライアントのデータとして持たせて使う場合には動作しませんでした。

▼ jquery.ajax-combobox 利用時の概要

jquery.ajax-combobox(オートコンプリートとドロップダウンリストを組み合わせたコンボボックス) を使用して、入力可能なコンボックス( しかもリストはページャ付き )

このプラグインは、何故か GitHub のコードが古い為、そこからダウンロードしたものは殆どうまく動作せず、解説ページ内で使用している以下の URL からダウンロードする必要があります。

http://www.usamimi.info/~sutara/ajax-combobox/dist/jquery.ajax-combobox.js

さらに、内部に直接日本語が書かれている為、UTF-8 以外のクライアント環境で使用する場合は、SCRIPT 要素に charset 属性を記述する必要があります( charset="utf-8" )

改造場所

1445 行あたりに、『連想配列に対して検索する』とあります。ここの以下の条件が検索している場所です
if (self.option.source[i][self.option.field].match(arr_reg[j])) {
self.option.field は、オプションで指定した field の内容を検索している事を示します。ですから、if の中の条件をコピーして || で繋げて、片方を固定で好きなフィールド名に変更すると正しく動作します

▼ こんな感じです
if (self.option.source[i][self.option.field].match(arr_reg[j])||self.option.source[i]["検索したいフィールド名"].match(arr_reg[j])) {





posted by lightbox at 2016-02-02 16:14 | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする

2015年12月14日


FileSaver.js と canvas-toBlob.js を使って、canvas で表示されているイメージを保存する

デモページ


FileSaver.js を使って Canvas の保存を行うには、canvas-toBlob.js を読み込んで toBlob メソッドを canvas に対して実行する必要があります。( デモページでは、iframe 側に canvas があるので、iframe 側で canvas-toBlob.js を読み込みます )

デモページでは、canvas は iframe 内にあるので、jQuery を使って $( $("#birds").get(0).contentWindow.document.body ).find("canvas").get(0).toBlob という参照になっています。
※ birds は iframe の id です

保存コード
	$("#getpng").on( "click", function(){
		$( $("#birds").get(0).contentWindow.document.body ).find("canvas").get(0).toBlob(function(blob) {
			saveAs(
				blob
				, "three_fly.png"
			);
		}, "image/png");
	} );


関連する記事

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



タグ:javascript jquery
posted by lightbox at 2015-12-14 09:00 | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする
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 ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり