×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
前回の以下のページのでは「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>
これを実行させると以下の様な表示になります。
PR
コメント