表の編集

前回の投稿、

入力フィールドでよく使いそうな jQuery 処理のメモ
http://oboe2uran.hatenablog.com/entry/2016/12/18/113206
と、
右クリックコンテキストメニューの基本サンプル
http://oboe2uran.hatenablog.com/entry/2016/12/11/161826

右クリックコンテキストメニューで追加の tableタグ表は、

右クリックコンテキストメニューの基本サンプルの 行追加、貼付け　の処理に
入力フィールドでよく使いそうな jQuery 処理のメモで用意した関数を使用して

以下のようにして表の編集を書式スタイルに沿った入力に
することができる。しかも行挿入/削除/コピー/貼り付けに対応させる。

thead の th タグに data-type 属性で列のデータ属性を書いといて data-type に従ってセルをクリックした時の
input を各種の形式にするのである。

/******** click → input **************/
var initCell = function(){
   $('#target-table tbody tr').each(function(i, tr){ $(tr).children("td").unbind("click"); });
   $('#target-table tbody tr').each(function(i, tr){
      $(tr).children("td").click(function(){
         var n = parseInt($(tr).children("td").index(this), 10);
         n++;
         var datatype = $('#target-table thead tr th:nth-child(' + n + ')').data("type");
         console.log( datatype );
         $(this).html($("<input>").attr("type","text").attr("style", "margin-left: 1px; margin-right: 1px; width: 99%;").val($(this).html()));
         $(this).children("input").click(function(ev){
            ev.stopPropagation();
         });
         // datatype によって制御
         if (datatype=="code"){
            inputNumberForce($(this).children("input"), { 'numlock': function(){ callTooltip("#target-table tbody tr td input",  "NumLock OFF(消灯) になってます"); } });
         }else if(datatype=="date"){
            $(this).children("input").prop("readonly", "readonly");
            $(this).children("input").prop("style", "width:70px;background-color:#ffffff;");
            $(this).children("input").datepicker({ prevText:"前月", nextText:"翌月",
               changeMonth: true, changeYear: true, yearRange: '-3:+4',
               onSelect: function(datetxt, picker){ $(this).parent().html(datetxt); },
               onClose: function(datetxt, picker){ $(this).parent().html(datetxt); },
            });
         }else if(datatype=="price"){
            inputPrice($(this).children("input"), { 'numlock': function(){ callTooltip("#target-table tbody tr td input",  "NumLock OFF(消灯) になってます"); } });
            $(this).children("input").prop("style", "text-align:right;margin-left: 1px; margin-right: 1px; width: 99%;");
         }else if(datatype=="number"){
            inputInteger($(this).children("input"), { 'numlock': function(){ callTooltip("#target-table tbody tr td input",  "NumLock OFF(消灯) になってます"); } });
         }
         var targetcell = $(this);
         var inputer = $(this).children("input");
         $(inputer).focus(function(){
            $(this).select();
         }).bind("paste",function(){
            return false;
         }).keyup(function(eo){
            if (eo.keyCode==13 || eo.keyCode==9){
               $(this).trigger($.Event("blur"));
            }
         }).keydown(function(eo){
            // 229 で全角を全てcut
            if (eo.keyCode==229) return false;
         }).blur(function(){
            if(datatype != "date"){ // datepicker の場合はdatepicker で処理
               $(targetcell).html($(this).val());
            }
         });
         $(inputer).focus();
      });
   });
};



/******** 選択 ⇒ active ************/
var initListselector = function(){
   // 列数
   var columnLength = $('#target-table thead tr th').length;
   // コピー
   var copyTRhtml = null;
   // tbody contextmenu → 行挿入のみ
   $.contextMenu({
      selector: '#target-table tbody',
      build: function($trigger, e){
         return {
            callback: function(key, options){
               if (key=="add"){
                  $trigger.append("<tr></tr>");
                  for(var i=0;i < columnLength;i++) $trigger.children('tr:last').append("<td></td>");
                  initCell();
               }
            },
            items: {
               "add":{ name:"１行挿入", icon:"add", },
            },
            events: {
               show: function(){
                  console.log("-- contextmenu tbody show ---" );
               },
               hide: function(){
                  console.log("-- contextmenu tbody hide ---" );
               }
            }
         };
      },
   });
   // tr contextmenu → 行挿入/削除/コピー/貼付
   $.contextMenu({
      selector: '#target-table tbody tr',
      build: function($trigger, e){
         // コンテキスト行選択色→ ON
         $trigger.addClass("seleted-context");
         return {
            callback: function(key, options){
               if (key=="add"){
                  // 追加
                  $trigger.before("<tr></tr>");
                  for(var i=0;i < columnLength;i++) $trigger.prev().append("<td></td>");
                  initCell();
               }else if(key=="delete"){
                  // 削除
                  $trigger.remove();
               }else if(key=="copy"){
                  // コピー
                  copyTRhtml = "<tr>";
                  $trigger.children('td').each(function(ix, td){
                     copyTRhtml = copyTRhtml + "<td>" + $(td).html() + "</td>";
                  });
                  copyTRhtml = copyTRhtml + "</tr>";
               }else if(key=="paste"){
                  // 貼付け
                  if (copyTRhtml != null){
                     $trigger.before(copyTRhtml);
                     $trigger.remove();
                     copyTRhtml = null;
                     initCell();
                  }
               }
            },
            items:{
               "add":    { name:"１行挿入", icon:"add",    visible: true, },
               "delete": { name:"削除",     icon:"delete", visible: true, },
               "copy":   { name:"コピー",   icon: "copy",  visible: true, },
               "paste":  { name:"貼付け",   icon: "paste", visible: true, className: copyTRhtml==null ? 'contextmenu-item-disabled' : '' },
            },
            events: {
               show: function(){
                  console.log("-- contextmenu show ---" );
               },
               hide: function(){
                  console.log("-- contextmenu hide ---" );
                  // コンテキスト行選択色→ OFF
                  $trigger.removeClass("seleted-context");
               }
            }
         };
      }
   });
};

$(function(){
   initListselector();
   initCell();
});