JavaScript｜VB.NET-TIPS などプログラミングについて

■JavaScript

[2025/01/18] [PR] (No.)
[2020/07/29] JavaScript jQueryで table の操作する方法その５・データ取得その２(明細行内からの取得:find()) (No.221)
[2020/05/25] JavaScript ファイルのダウンロードについて（link, XMLHttpRequest, msSaveBlob） (No.180)
[2020/05/23] JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの編集設定３（editable, onKeyDown, onCopy, onPaste） (No.179)
[2020/05/21] JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの編集設定２（editable, selectType, onCopy, onPaste） (No.177)
[2020/05/20] JavaScript jQueryでモーダルウインドウ風の表示をする方法（css:display, css:z-index, fadeIn, fadeOut） (No.176)

≪ [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] ≫

- 2025/01/18
[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
- CM
- 2020/07/29
JavaScript jQueryで table の操作する方法その５・データ取得その２(明細行内からの取得:find())
データを表形式で表示する為に table タグを用いますが、以下のページでは table の外側からデータを取得する方法を説明しました。

⇒JavaScript jQueryで table の操作する方法その１・データ取得

上記の 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="ＡＡＡＡ" /></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 プログラムに遷移させたりできると思います。
PR
- JavaScript
- 0CM
- 2020/05/25
JavaScript ファイルのダウンロードについて（link, XMLHttpRequest, msSaveBlob）
今回は 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(); }
- JavaScript
- 0CM

2020/05/23

JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの編集設定３（editable, onKeyDown, onCopy, onPaste）

前回の以下のページのでは「ID」と「対象」のカラム上でもコピーができる様になっていましたが、実際このカラムはコピー処理が必要無いためコピー開始時にエラーで処理しない様に変更します。

⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの編集設定２（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>

これを実行させると以下の様な表示になります。

JavaScript
0CM

2020/05/21

JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの編集設定２（editable, selectType, onCopy, onPaste）

前回の w2ui.grid のセルの編集設定の方法では、動作的に行選択の状態でした。今回はセルの選択をエクセルの様にできるのですが、その説明をします。

セルの選択方法を設定するプロパティである selectType を cell に指定します。
selectType のデフォルトは row なので、指定しなければ行選択になります。

前回の以下のページの HTML にこの selectType プロパティを追加します。
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの編集設定（editable）

<!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 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 }
      }
    ],
    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>

これを実行させると以下の様な表示になります。（セル上でクリックすると、エクセルと似た感じでセルが選択されるはずです）

この HTML ではエクセルの様にコピー＆ペーストができるのですが、カラムをずらしたペーストでは問題が生じます。「身長」と「体重」のカラムを2行分コピーし、「生年月日」の上にアクティブセルを移動してペーストした場合はおかしなことになります。

これを防ぐ方法としては、ペーストイベント時にコピー開始カラムが同じ位置かどうかをチェックします。同じカラムで無ければ、イベント処理をキャンセルしてやります。

尚、コピーイベント時にはコピー開始カラム位置を退避しておきます。ペーストイベント時に、このカラム位置が設定してなければコピーイベントを中断します。

■コピー＆ペーストイベント処理

onCopy: 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 }
      }
    ],
    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>

これを実行させると以下の様な表示になります。（このままのプログラムではいろいろ不完全ですので、皆さんで手を入れてみて下さい。）

ranges プロパティについて補足説明

上のプログラムの onCopy イベントの中で this.ranges として w2grid['grid'] の ranges プロパティを参照していますが、この ranges プロパティには選択範囲の情報が入っています。中身は以下の range(範囲) オブジェクトの配列データです。

<range(範囲)オブジェクトの定義>
range = {
    name  : '',      // rangeの名前
    range : [],      // ※rangeを定義する2次元配列
    style : ''       // rangeのスタイルプロパティ
}

<※rangeを定義する2次元配列のオブジェクト定義>
{
    column：n        // カラム位置(n:0 ～ )
    index ：m        // 行位置(m:0 ～ )
    recid ：r        // recid値
}

この range(範囲) オブジェクトの配列データの「0」番目のデータに選択領域の情報が格納されています。
以下の画像は選択されて [Ctrl] + [C] キーを押下した時の ranges プロパティの内容を表示しています。

JavaScript
0CM

- 2020/05/20
JavaScript jQueryでモーダルウインドウ風の表示をする方法（css:display, css:z-index, fadeIn, fadeOut）
画面全体が暗くなり、画面の中央にウインドウが表示されるサイトをよく見かけますが、これを実現してみます。

方法自体は難しくなく、ウインドウとなる領域を div タグで表示し、その div 領域を表示・非表示の処理を行います。（「display」属性を「block」(表示)、または「none」(非表示)に設定します。）

ウインドウの周りに全体的に暗い領域を作るために、上記の div タグをさらにラップする div タグを設けます。
全体の div タグの大きさを画面全体とし、背景色を薄い黒色にします。ウインドウの div タグは大きさを適当に決め背景色を白色にします。

更に HTML 要素の表示重なりを決める z-index をウインドウの div タグの方を、全体の div タグの z-index より大きい値にします。こうするとウインドウの div タグが上に表示されます。
今回のデモ HTML ファイル側のソースを以下に示します。

■ブロック領域を表示・非表示にすることでモーダルウインドウ風

<html> <head> <meta charset="utf-8"> <title>test modal</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> // モーダルウインドウ表示 function displayModal() { $('.modal').css('display', 'block'); } // モーダルウインドウ非表示 function closeModal() { $('.modal').css('display', 'none'); } </script> <style> .modal { display: none; z-index: 1; position: fixed; left: 0; top: 0; height: 100%; width: 100%; overflow: auto; background-color: rgba(0,0,0,0.7); } .modal-window{ z-index: 2; width: 500px; margin: 20% auto; padding: 20px; background-color: white; } </style> </head> <body> <h2>test modal</h2> <button onclick="displayModal();">Display Modal</button> <div class="modal"> <div class="modal-window"> <div class="modal-contents"> <p>これはモーダルウインドウです。</p> <button onclick="closeModal();">Close Modal</button> </div> </div> </div> </body> </html>

上のプログラムで display 属性を設定しているところを fadeIn 、 fadeOut メソッドを使用すればフェードイン、フェードアウト表示ができます。メソッドの説明は以下の通りです。

// フェードイン表示 $('要素').fadeIn([speed], [callback]); // フェードアウト表示 $('要素').fadeOut([speed], [callback]); このメソッドは非表示の要素をフェードイン表示または、表示の要素をフェードアウト表示します。 speed : "slow", "normal", "fast" または時間をミリ秒で指定(デフォルト:"normal") callback: 処理が完了した時の呼び出し関数を指定

関数を以下の様に変更すればできます。

// モーダルウインドウ表示 function displayModal() { $('.modal').fadeIn(); } // モーダルウインドウ非表示 function closeModal() { $('.modal').fadeOut(); }
- JavaScript
- 0CM

VB.NET-TIPS などプログラミングについて

■HTMLタグのみでダウンロード

■HTMLタグをJavaScriptの処理に変更

■JavaScriptのXMLHttpRequestオブジェクトを使った処理に変更

■IE(Internet Explorer), Eageへの対処方法

■onKeydownイベント処理

■コピー＆ペーストイベントを加味した処理

■コピー＆ペーストイベント処理

■コピー＆ペーストイベントを加味した処理

ranges プロパティについて補足説明

■ブロック領域を表示・非表示にすることでモーダルウインドウ風