忍者ブログ

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

VB.NETのTIPS(小技集)を中心に、Javascript、PHP その他のプログラミングについて少し役に立つ情報を発信します。いわゆる個人的な忘備録ですが、みなさんのお役に立てれば幸いです。

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

前回の以下のページのでは「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>


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

関連する記事

JavaScript jQuery w2ui.grid を使ったグリッド処理方法の紹介
JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データの取り込み(url)
JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データへ登録(save)
JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データへ登録2(changesデータにレコードを反映し save)
JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの書式設定(render)
JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの編集設定(editable)
JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの編集設定2(editable, selectType, onCopy, onPaste)
JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの編集設定3(editable, onKeyDown, onCopy, onPaste)
JavaScript jQuery w2ui.grid を使ったグリッド処理・カラム名のグループ化(タイトルの2行表示)





PR

コメント

コメントを書く