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

2020/05/21

前回の 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(); // イベント・キャンセル
}

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

100

101

102

103

<!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値
}