[2020/08/20] JavaScript jQueryでQRコードを表示する方法 (No.227)
[2020/07/29] JavaScript jQueryで table の操作する方法その5・データ取得その2(明細行内からの取得:find()) (No.221)
[2020/05/25] JavaScript ファイルのダウンロードについて(link, XMLHttpRequest, msSaveBlob) (No.180)
[2020/05/23] JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの編集設定3(editable, onKeyDown, onCopy, onPaste) (No.179)
-
canvas に FileReader オブジェクトを使って、ローカルなコンピューター内にある画像ファイルを読み込むことを説明しました。 今回はこの方法に倣って、作成済みの画像データ表示関数を使って PHP から JSON データで送信されてくる画像ファイルデータを描画する方法について説明します。
処理の手順は以下の通りです- ページロード時イベントで Ajax を使って PHP の画像ダウンロードプログラムの呼出
- Ajax の正常終了時に JSON データから Blob データ生成
- FileReader を生成,画像の描画
- FileReader の readAsDataURL メソッドで Blob データを引数としてコール
- FileReader の onload イベントで canvas への画像表示関数の実行
■Ajaxを使いPHPからの画像データをcanvasに表示
<html> <head> <meta charset="utf-8"> <title>test canvas</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> //Image関数 function drawImage(imageFile) { var canvas = $("#canvas"); var ctx = canvas[0].getContext("2d"); //イメージオブジェクト var img1 = new Image(); //画像ファイル指定でファイル読込開始 img1.src = imageFile; //画像ロード後に画像を描画できる。 img1.onload = function(){ //画像の大きさを設定 width = img1.width; height = img1.height; canvas.attr('width' , width); canvas.attr('height', height); //画像を描画 ctx.drawImage(img1, 0, 0, width, height); } return false; } // Base64とMIMEタイプからBlobオブジェクト作成 function toBlob(base64, mimetype) { var bin = atob(base64.replace(/^.*,/, '')); var arr = new Uint8Array(bin.length); for (var i = 0; i < bin.length; i++) { arr[i] = bin.charCodeAt(i); } // Blobを作成 try{ var blob = new Blob([arr.buffer], { type: mimetype }); }catch (e){ return false; } return blob; } //ページロード時イベント $(function() { var file = null; // 選択されるファイル // データの取得 $.ajax({ type: "POST" , url: "./imagedown.php" , data: "" }).done(function(res){ // ajaxがOK var data = JSON.parse(res); // blobデータ生成 var blob = toBlob(data.img, data.type); //FileReader API var reader = new FileReader(); //ファイルロード終了時イベント宣言 reader.onload = function(e) { //画像表示関数コール drawImage(e.target.result); }; //Blobデータ読込の開始 reader.readAsDataURL(blob); }).fail(function(XMLHttpRequest, textStatus, error) { // 取得エラー alert(error); }).always(function() { // 後処理(処理することが在れば) }); }); </script> </head> <body> <h2>test canvas4</h2> <canvas id="canvas" width="100" height="100" style="border: 1px solid #000000;"></canvas> <br /> </body> </html>
■PHPの画像データダウンロード処理
PHP のプログラムの手順は以下の通りです- file_get_contents 関数でファイルを読込
- 読込データを base64_encode 関数でBASE64にエンコード
- エンコード済みBASE64データと画像タイプを Ajax 用のデータとして準備
- json_encode 関数で Ajax に送信
<?php // ファイル $file_name = './img1.jpg'; //仮に同一フォルダに「img1.jpg」の画像ファイルを置く $type = 'image/jpeg'; // base64エンコード $img = base64_encode(file_get_contents($file_name)); // Ajax応答データ $list = array("img" => $img, "type" => $type); // JSONデータを出力 echo json_encode($list); exit(); ?>
今回は HTML のページ読み込み時のタイミングで Ajax で画像を表示する処理を行いました。
手順としては回りくどい処理になっていますが、この方法を使えば別のタイミング、 例えばあるボタンやリンクをクリックした時に画像を変更する場合には使えるのではと思います。
単にページに画像を表示するだけならば IMG タグで画像を指定すればできます。
以下にBASE64にエンコードしたデータを直接表示する場合を示します。
■PHPで画像データをBASE64にエンコードしたデータを直接表示
<?php //ファイル $file_name = './img1.jpg'; $type = 'image/jpeg'; // base64エンコード $img = base64_encode(file_get_contents($file_name)); ?> <html> <head> <meta charset="utf-8"> <title>test image</title> </head> <body> <h2>test image</h2> <img width="100" src="data:<?php echo $type; ?>;base64,<?php echo $img; ?>" /> <img width="100" src="<?php echo $file_name; ?>" /> </body> </html>
関連する記事
⇒JavaScript jQueryでcanvasを使い図形を描画する方法
⇒JavaScript jQueryでcanvasを使い画像ファイルを表示する方法
⇒JavaScript jQueryでFileReaderを使いcanvasに画像ファイルを表示する方法
PR -
今回は QRコード を画面上に表示する方法について説明します。
QRコード と言えばトヨタ自動車系列の会社である株式会社デンソー(現在はデンソーウェーブ)が開発したマトリックス型の二次元コードです。 このコードの中にはASCII(半角英数)で最大4296文字まで入るため、各種の情報を埋め込むことができます。
デンソーは敢えて普及のため QRコード の特許をオープンし特許権を行使していないため、自由に使用できます。
最近は非常に普及が進み、現在はスマホのカメラアプリにも QRコード の読み取りが標準で装備されていて、いろんなシーンで利用されています。 テレビ画面にもスマホのためのURLが QRコード で表示され、このコードを見ない日が無いぐらいです。
さてこの QRコード をブラウザの画面上に表示する方法について話を戻します。
先ずはプログラムが必要無く HTML の IMG タグに直接指定する方法について説明します。
Google Chart Tools を使うのですが、チャートのタイプとして QRコード を指定し、コードの中身のテキスト文字列を指定するだけで QRコード の画像が表示されます。
■Google Chart Tools を使い QRコード を表示するHTMLファイル
<html> <head> <meta charset="utf-8"> <title>test qr code</title> </head> <body> <img src="https://chart.apis.google.com/chart?cht=qr&chs=250x250&chl=this is test"> </body> </html>
上記の QRコード の部分を実際に表示すると以下の様になります。
Google Chart Tools への URL は「https://chart.apis.google.com/chart?」でその後ろに生成する QRコード の情報を指定します。<パラメータの指定方法> cht=qr : QRコードを指定(必須) chs=<width>x<height>: QRコードのサイズを指定。width,height 共に同じ値(必須) chl=<data> : コードの中身のテキスト文字列(必須) choe=<encoding> : データをQRコードにエンコードする方法。 利用可能な値は次のとおりです。 ・UTF-8 [デフォルト] ・Shift_JIS ・ISO-8859-1 chld=<error_correction_level>|<margin> : error_correction_level : 誤り訂正レベル ・L-[デフォルト]最大7%の誤り訂正 ・M-最大15%の誤り訂正 ・Q-最大25%の誤り訂正 ・H-最大30%の誤り訂正 margin : QRコードの周りの白い幅でピクセル値では無い([デフォルト:4])
このAPIにより返される画像データ形式は「PNG」の様です。「PNG」が表示できないブラウザでは QRコード が表示されませんので注意して下さい。 (現状ではそんなブラウザは無いと思いますが)
なお、このAPIのGoogle の正式ページは以下の通りです。
⇒https://developers.google.com/chart/infographics/docs/qr_codes
このページの先頭には以下の注意書きがあります。Warning: This API is deprecated. Please use the actively maintained Google Charts API instead. See our deprecation policy for details.
「このAPIは非推奨になっています。 代わりにGoogle Charts APIを使用してください。 」とありますので、 いつ使えなくなっても仕方ありません。 現状では「Google Charts API」を見ても QRコード の項目は見当たらないので、代替の方法を考えなければと思います。
と言うことで、以下は QRコード用jQuery ライブラリを使った方法について説明します。
ここでは qrcode.js ライブラリを使用します。
■ qrcode.js ライブラリのダウンロード
qrcode.js ライブラリのダウンロードは以下のページから行えます。
⇒https://github.com/jeromeetienne/jquery-qrcode
ページ右上の「↓Code」ボタンをクリックしてさらに「Download ZIP」をクリックします。
ZIPファイルのダウンロードが始まりますので適当なフォルダを設定してダウンロードさせます。
ZIPファイルを解凍し「jquery.qrcode.min.js」をHTMLから参照できるところにコピーします。 (今回のテストではHTMLファイルと同じフォルダにしました。)
■ qrcode.js ライブラリの使用例
以下に qrcode.js ライブラリの使用例を示します。
HTMLファイルと同じディレクトリに「jquery.qrcode.min.js」を設置しヘッダーで読込みます。
qrcode.js が QRコード を画像展開する「DIVタグ」を宣言します。
javascript ではファイルロード直後に「DIVタグ」に対して QRコード を展開するコードを記述します。<html> <head> <meta charset="utf-8"> <title>test qrcode</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="./jquery.qrcode.min.js"></script> <script type="text/javascript"> $(function(){ $('#qrcode').qrcode({ render: "canvas", width : 150, height: 150, text: "this is test." }); }); </script> </head> <body> <div id="qrcode"></div> </body> </html>
<qrcode のパラメータオブジェクトの指定方法> render : 生成方法の指定「"canvas","table"のみ」(オプションでデフォルト:"canvas") width : QRコードのサイズ幅を指定。 height : QRコードのサイズ高さを指定。 text : コードの中身のテキスト文字列(必須)
上のソースの QRコード の部分をブラウザのウエブ開発などでのぞいてみると、 canvas 指定の場合には「DIVタグ」の中身に以下のHTMLが生成され、画像データが存在します。
<canvas width="150" height="150"></canvas>
また table 指定の場合には「DIVタグ」の中身に以下の様なHTMLが生成され、 「tdタグ」の背景色で黒白のドットを生成している様です。
<table style="width: 150px; height: 150px; border: 0px none; border-collapse: collapse; background-color: rgb(255, 255, 255);"> <tbody> <tr style="height: 6px;"> <td style="width: 6px; background-color: rgb(0, 0, 0);"></td> <td style="width: 6px; background-color: rgb(0, 0, 0);"></td> <td style="width: 6px; background-color: rgb(0, 0, 0);"></td> <td style="width: 6px; background-color: rgb(0, 0, 0);"></td> <td style="width: 6px; background-color: rgb(0, 0, 0);"></td> <td style="width: 6px; background-color: rgb(0, 0, 0);"></td> <td style="width: 6px; background-color: rgb(0, 0, 0);"></td> <td style="width: 6px; background-color: rgb(255, 255, 255);"></td> <td style="width: 6px; background-color: rgb(0, 0, 0);"></td> <td style="width: 6px; background-color: rgb(255, 255, 255);"></td> <td style="width: 6px; background-color: rgb(255, 255, 255);"></td> <td style="width: 6px; background-color: rgb(255, 255, 255);"></td> <td style="width: 6px; background-color: rgb(0, 0, 0);"></td> <td style="width: 6px; background-color: rgb(255, 255, 255);"></td> <td style="width: 6px; background-color: rgb(0, 0, 0);"></td> <td style="width: 6px; background-color: rgb(0, 0, 0);"></td> <td style="width: 6px; background-color: rgb(255, 255, 255);"></td> <td style="width: 6px; background-color: rgb(255, 255, 255);"></td> <td style="width: 6px; background-color: rgb(0, 0, 0);"></td> <td style="width: 6px; background-color: rgb(0, 0, 0);"></td> <td style="width: 6px; background-color: rgb(0, 0, 0);"></td> <td style="width: 6px; background-color: rgb(0, 0, 0);"></td> <td style="width: 6px; background-color: rgb(0, 0, 0);"></td> <td style="width: 6px; background-color: rgb(0, 0, 0);"></td> <td style="width: 6px; background-color: rgb(0, 0, 0);"></td> </tr> <tr style="height: 6px;"> <td style="width: 6px; background-color: rgb(0, 0, 0);"></td> <td style="width: 6px; background-color: rgb(255, 255, 255);"></td> <td style="width: 6px; background-color: rgb(255, 255, 255);"></td> <td style="width: 6px; background-color: rgb(255, 255, 255);"></td> <td style="width: 6px; background-color: rgb(255, 255, 255);"></td> <td style="width: 6px; background-color: rgb(255, 255, 255);"></td> <td style="width: 6px; background-color: rgb(0, 0, 0);"></td> <td style="width: 6px; background-color: rgb(255, 255, 255);"></td> <td style="width: 6px; background-color: rgb(0, 0, 0);"></td> ... 後は割愛
-
データを表形式で表示する為に table タグを用いますが、以下のページでは table の外側からデータを取得する方法を説明しました。
⇒JavaScript jQueryで table の操作する方法その1・データ取得
上記の table に thead tbody のタグを記述して、 tr オブジェクトの何番目かを eq() メソッドの使って該当行の tr オブジェクトを取得し、その内部の td オブジェクトに アクセスし内部のデータを取得ていました。
今回の取得方法は、各 tr の中に取得のアクションを起すボタンを置いて、該当行の中身を取得し表示します。
以下のソースを見て下さい。 tbody の中の tr の各 td にクラスを宣言しています。 さらにメモ欄の td には内部に input タグを設置しさらにクラスを宣言しています。
「class="btnGet"」のボタンクリックイベントの関数の中で parent() メソッドを2回使って tr タグのオブジェクトを取得しています。 tr タグのオブジェクトの find() メソッドを使って td および input タグのオブジェクトを取得します。 取得したオブジェクトの text() および val() メソッドで内部の値を取得します。
尚、find()されたオブジェクトの存在をチェックする為に length プロパティが「0」以外かを判定しています。 find() が返すオブジェクトが存在すれば length プロパティが「1」になるので、 if の判定は true となります。
【今回使用したメソッドの説明】 ・find():指定要素が持つ全ての子要素および孫要素から、指定条件式に合致するものを選択します。 ・text():指定した要素が持つテキストノードを結合したものを返します。 ・val() :要素のvalue属性を返します。
<html> <head> <meta charset="utf-8"> <title>test jQuery get-5</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <table border="1"> <thead> <tr> <th>品名</th> <th>数量</th> <th>単価</th> <th>金額</th> <th>メモ</th> <th>取得</th> </tr> </thead> <tbody> <tr> <td class="Name">りんご</td> <td class="Number">2</td> <td class="Price">100</td> <td class="Amount">200</td> <td><input class="Memo" value="りんごです" /></td> <td><button class="btnGet">取得</button></td> </tr> <tr> <td class="Name">みかん</td> <td class="Number">5</td> <td class="Price">50</td> <td class="Amount">250</td> <td><input class="Memo" value="ああああ" /></td> <td><button class="btnGet">取得</button></td> </tr> <tr> <td class="Name">いちご</td> <td class="Number">3</td> <td class="Price">250</td> <td class="Amount">750</td> <td><input class="Memo" value="AAAA" /></td> <td><button class="btnGet">取得</button></td> </tr> </tbody> </table> <script> $(function () { //<button class="btnGet">のクリックイベントの関数を宣言 $(".btnGet").click(function(){ //クリック行のjqueryオブジェクト取得 var objTr = $(this).parent().parent(); //表示用文字列クリア var strMsg = ""; //のjqueryオブジェクト取得 obj = objTr.find(".Name"); if( obj.length ) { strMsg += "Name:" + obj.text() + "\n"; } //のjqueryオブジェクト取得 obj = objTr.find(".Number"); if( obj.length ) { strMsg += "Number:" + obj.text() + "\n"; } //のjqueryオブジェクト取得 obj = objTr.find(".Price"); if( obj.length ) { strMsg += "Price:" + obj.text() + "\n"; } //のjqueryオブジェクト取得 obj = objTr.find(".Amount"); if( obj.length ) { strMsg += "Amount:" + obj.text() + "\n"; } //のjqueryオブジェクト取得 obj = objTr.find(".Memo"); if( obj.length ) { strMsg += "Memo:" + obj.val() + "\n"; } //明細行の内容表示 alert(strMsg); }); }); </script> </body>
今回の方法は、各明細行に対して個別に行う処理が異なる場合に有効になると思います。
例えば、各明細行の修正画面を別に作成し、その画面に飛ばすためのアクションとしてのボタンや、 個別に削除や更新を行う場合に対応する PHP プログラムに遷移させたりできると思います。
-
今回は JavaScript で行う 「ファイルのダウンロード処理」 について説明したいと思います。
「ファイルのダウンロード処理」 は PDF ファイル や テキストファイル および EXCEL ファイル などをユーザにダウンロードさせたいときに行います。
- HTMLタグのみでダウンロード
- HTMLタグをJavaScriptの処理に変更
- JavaScriptのXMLHttpRequestオブジェクトを使った処理に変更
- IE(Internet Explorer), Eageへの対処方法
■HTMLタグのみでダウンロード
HTMLタグ のみの記述でダウンロードを挿せる方法を説明します。
a タグ (a 要素、アンカータグ) に download 属性が有りますのでそれを記入します。
以下に zipファイル、画像ファイル(.png)、PDFファイル のダウンロードを行う HTML を示します。
(zipファイル は download の指定が無くてもOKな様です)<html> <head> <meta charset="utf-8"> <title>test download</title> </head> <body> <h2>test download</h2> <p> <a href="./test.zip">[test.zip]ファイルをダウンロード</a> <br /> <a href="./test.png" download>[test.png]ファイルをダウンロード</a> <br /> <a href="./test.pdf" download="TEST1.PDF">[test.pdf]ファイルをダウンロード</a> </p> <br /> </body> </html>
download 属性の値にファイル名を設定すると、ダウンロード時にローカルのファイル名がそれになります。
■HTMLタグをJavaScriptの処理に変更
a タグ の処理を JavaScript の処理に置き変えたものが以下の HTML です。
<html> <head> <meta charset="utf-8"> <title>test download</title> <script type="text/javascript"> function doDownload(url, filename) { // a タグ生成 var alink = document.createElement('a'); alink.download = filename; // [download] のファイル名 alink.href = url; // サーバのファイルのURL alink.click(); // クリック実行 return false; } </script> </head> <body> <h2>test download</h2> <p> <button onclick="doDownload('./test.zip', 'test.zip');"> [test.zip]ファイルをダウンロード </button> <br /> <button onclick="doDownload('./test.png', 'test.png');"> [test.png]ファイルをダウンロード </button> <br /> <button onclick="doDownload('./test.pdf', 'TEST1.PDF');"> [test.pdf]ファイルをダウンロード </button> </p> <br /> </body> </html>
■JavaScriptのXMLHttpRequestオブジェクトを使った処理に変更
XMLHttpRequestオブジェクト は JavaScript で HTTP リクエストを行うための組み込みのブラウザオブジェクトです。 名前の先頭に XML と付いていますが XML形式だけでなく各種のデータを扱うことができるため、ファイルのダウンロードに利用できます。
上記の doDownload 関数を以下の様にして行います。function doDownload(url, filename) { // XMLHttpRequestオブジェクト作成 var objXML = new XMLHttpRequest(); objXML.open("GET", url, true); // ダウンロードがblobオブジェクトの指定 objXML.responseType = "blob"; // ダウンロード完了時の処理関数 objXML.onload = function (oEvent) { // blobオブジェクト var objBlob = objXML.response; // blobオブジェクトを指すURLオブジェクト var objURL = window.URL.createObjectURL(objBlob); // リンクを生成し、JavaScriptからクリック var objLink = document.createElement("a"); document.body.appendChild(objLink); objLink.href = objURL; objLink.download = filename; objLink.click(); }; // XMLHttpRequestオブジェクトの通信開始 objXML.send(); }
XML オブジェクトのダウンロード完了時のイベントである onload で受け取った blob データを window.URL.createObjectURL により指定された内容を参照するために使用されるオブジェクトURLが返されるので、 それをリンクタグに設定し仮想的にクリック処理を行います。
ただこの関数は FireFox Chrome は動作しますが IE, Edge では動作しません。
objLink.click(); のところで「アクセスが拒否されました」となって処理ができません。
IE, Edge には navigator.msSaveBlob メソッドを使うと blob データをファイルに登録できる様です。
■IE(Internet Explorer), Eageへの対処方法
以下の関数は、ダウンロード処理時に navigator.msSaveBlob メソッドが存在するかを確認して、 存在する場合にはそのメソッドを使用して処理を行う様に変更しました。
function doDownload(url, filename) { // XMLHttpRequestオブジェクト作成 var objXML = new XMLHttpRequest(); objXML.open("GET", url, true); // ダウンロードがblobオブジェクトの指定 objXML.responseType = "blob"; // ダウンロード完了時の処理関数 objXML.onload = function (oEvent) { // blobオブジェクト var objBlob = objXML.response; if (window.navigator.msSaveBlob) { // IE, Edge window.navigator.msSaveBlob(objBlob, filename); } else { // blobオブジェクトを指すURLオブジェクト var objURL = window.URL.createObjectURL(objBlob); // リンクを生成し、JavaScriptからクリック var objLink = document.createElement("a"); document.body.appendChild(objLink); objLink.href = objURL; objLink.download = filename; objLink.click(); //window.URL.revokeObjectURL(file); } }; // XMLHttpRequestオブジェクトの通信を開始する objXML.send(); }
-
前回の以下のページのでは「ID」と「対象」のカラム上でもコピーができる様になっていましたが、実際このカラムはコピー処理が必要無いため コピー開始時にエラーで処理しない様に変更します。
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの編集設定2(editable, selectType, onCopy, onPaste)
キー入力を制御するために onKeydown イベントを追加します。
尚、ranges プロパティについては「ranges プロパティについて補足説明」を参照して下さい。■onKeydownイベント処理
onKeydown: function(event) { } <引数> ・event:イベント情報が含まれたオブジェクト ・event.text:コピーされたデータがテキストで格納(セル毎は"\t"で、1行が"\n"の区切り記号) onPaste: function(event) { } <引数> ・event:イベント情報が含まれたオブジェクト ・event.column:ペーストするカラム位置 ・event.index :ペーストする行位置 ・event.text :コピーされたデータがテキストで格納(セル毎は"\t"で、1行が"\n"の区切り記号) ※<イベントハンドラの指定> function (event) { // 処理の記述 } <デフォルトの動作をキャンセルする場合> function (event) { event.preventDefault(); // イベント・キャンセル }
■コピー&ペーストイベントを加味した処理
<!DOCTYPE html> <html> <head> <title>w2ui Grid - editable</title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" media="screen" href="./dist/w2ui.min.css" /> <script type="text/javascript" src="./libs/jquery/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="./dist/w2ui.js"></script> </head> <body> <div id="grid" style="width: 600px; height: 240px;"></div> <br> <button class="w2ui-btn" onclick="showChanged()">変更データ表示</button> <script> // コピーカラム位置 var nCopyColumn = -1; // 性別データ var arrSex = [ {id:1, text:"男性"}, {id:2, text:"女性"} ]; $(function () { // id="grid" へのグリッド設定 $('#grid').w2grid({ name: 'grid', selectType: "cell", columns: [ { field: 'recid' , caption: 'ID' , size: '50px' , attr: "align=center", frozen: true }, { field: 'check' , caption: '対象' , size: '60px' , editable: { type:"checkbox" } }, { field: 'name' , caption: '名前' , size: '100px' , editable: { type:"text" } }, { field: 'age' , caption: '年齢' , size: '60px' , editable: { type:"int", min: 10, max: 99 } }, { field: 'sex' , caption: '性別' , size: '100px' , editable: { type:"select", items: arrSex } , render: function (record, index, col_index) { var html = ''; for (var idx in arrSex) { if (arrSex[idx].id == this.getCellValue(index, col_index)) { html = arrSex[idx].text; } } return html; } }, { field: 'birth' , caption: '生年月日', size: '100px' , render: 'date:yyyy/mm/dd', editable: { type:"date", format: "yyyy/mm/dd" } }, { field: "height", caption: "身長" , size: "50px" , render : "float:1", editable: { type:"float", min: 1, max: 999.9 } }, { field: "weight", caption: "体重" , size: "50px" , render : "float:1", editable: { type:"float", min: 1, max: 999.9 } } ], onKeydown: function(event) { // セルでのKeyDownイベント // [Ctrl] + [c] でのコピー処理 if (event.originalEvent.ctrlKey && event.originalEvent.keyCode == 0x43) { var rng = this.ranges[0]; if (rng.range[0].column <= 1) { // 「ID」「対象」の場合 Copy 処理をキャンセル alert("コピー範囲に「ID」「対象」を含むため、コピー処理をキャンセルします。"); return; } // Copy Paste のカラム位置退避 nCopyColumn = rng.range[0].column; return; } // メタキー、Ctrlキー、altキーは処理無し if (event.metaKey || event.ctrlKey || event.altKey){ return; } }, onCopy: function(event) { // コピーイベント var rng = this.ranges[0]; if (nCopyColumn == -1) { nCopyColumn = rng.range[0].column; //Copy Paste のカラム位置退避 } // 性別カラムの補正 var strRow = "" + event.text; strRow = strRow.replace(/男性/g, "1"); strRow = strRow.replace(/女性/g, "2"); event.text = strRow; }, onPaste: function(event) { // ペーストイベント if (nCopyColumn == -1) { alert("コピーが行われていません。"); // ペースト処理をキャンセル event.preventDefault(); return; } if (nCopyColumn != event.column) { alert("コピー&ペーストは同じカラム位置で行って下さい。"); // ペースト処理をキャンセル event.preventDefault(); return; } //Copy Paste のカラム位置クリア nCopyColumn = -1; }, records: [ { recid:1, check:true , name:"田中太郎", age:"35", sex:"1", birth:"1985/03/01", height:"170.1", weight:"48.5" }, { recid:2, check:true , name:"田中花子", age:"30", sex:"2", birth:"1990/03/12", height:"160.0", weight:"45.0" }, { recid:3, check:true , name:"山田一郎", age:"20", sex:"1", birth:"2000/03/13", height:"165.1", weight:"58.5" }, { recid:4, check:false, name:"山田二郎", age:"18", sex:"1", birth:"2002/03/24", height:"172.5", weight:"68.2" }, { recid:5, check:true , name:"山田良子", age:"25", sex:"2", birth:"1995/03/25", height:"158.0", weight:"47.0" }, { recid:6, check:false, name:"山本桃子", age:"40", sex:"2", birth:"1980/03/26", height:"162.2", weight:"49.5" }, { recid:7, check:true , name:"山本次郎", age:"44", sex:"1", birth:"1976/03/27", height:"168.5", weight:"62.1" }, { recid:8, check:true , name:"阿部博" , age:"48", sex:"1", birth:"1972/03/28", height:"180.4", weight:"75.2" } ] }); }); function showChanged() { console.log(w2ui['grid'].getChanges()); w2alert('コンソールに変更データを表示しました'); } </script> </body> </html>
これを実行させると以下の様な表示になります。