前回の以下のページのでは「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>
これを実行させると以下の様な表示になります。
PR
コメント