前回の続きから、選択中のセルを矢印キーで移動しようと思ったら
セルの相対位置がわかるアドレスがないといけないなーと思いまして
まさにエクセルの様なセルアドレスを振ってみようじゃないかと考えました。
HTMLのTableセルにアドレスを振る。
まず、editable-tableクラスを持つtableタグのセルのindexで何行目・何列目を取得します。
|
1 2 3 |
var row = $('.editable-table').find('tr').index(tr); var col = $(tr).find('td').index(this); var idx = editable_table.BuildAddress(row, col); |
ほんで、このrowとcolを使ってセルアドレスを作ってみる訳ですね。
|
1 2 3 4 5 6 7 8 9 10 11 |
BuildAddress: function (row, col) { var adrs = ""; var col_idx = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']; limit = col_idx.length; digit = col; do{ adrs = (adrs.length)?col_idx[digit%limit-1] + adrs: col_idx[digit % limit]; digit = Math.floor(digit / limit); }while (digit > 0); return adrs + row; }, |
エクセル風にしようとするとアルファベットのカラム識別しが若干アレですが、
関数とか使えるようにしたら、きっと見やすくなるはず、、、と思って我慢して書きました。
ほんで、生成したアドレスと行番号・列番号は連想配列にして補完しておくっと。
この時にセルの属性にもアドレスを割り振っておいてー
セルの中身（value）と表示内容(html)を別々で管理して、あとで関数の機能で使い分けようという寸法な訳だ。
|
1 2 |
$(this).attr("data-address", idx); editable_table_val[idx] = { value: $td.html(), row: row, col: col }; |
アドレスと行番号・列番号のマップが手に入ったから、
相対位置でセル移動できる関数を用意する。
|
1 2 3 4 5 6 7 8 9 |
Offset: function (row, col) { var adrs = $('.selected').attr("data-address"); var cell = editable_table_val[adrs]; var nextAdrs = editable_table.BuildAddress(cell.row+row, cell.col+col); if (editable_table_val[nextAdrs]){ editable_table.ClearSelectionCells(); $("td[data-address='" + nextAdrs + "']").toggleClass("selected", true); } }, |
現在のアクティブセルのアドレスから行番号・列番号でオフセットして移動先アドレスを作って
そのアドレスがあれば、そこに選択セルを移動するっと。。。
ほんで、矢印キーのキーイベントにこのOffsetをセットしてみると。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
$(document).keydown(function(e){ var cursor = function() { return ($("#edit_target").length) ? false : ($(".selected").length) ? true : false; } switch (e.keyCode) { case 27: // Esc キー var adrs = $("#edit_target").attr("data-address"); if (adrs == undefined) { return } $("#edit_target").remove(); $("td[data-address='" + adrs + "']").toggleClass("editing", false); editable_table.Recalculation(); break; case 37: // left キー if (cursor()) { editable_table.Offset(0,-1) } break; case 38: // up キー if (cursor()) { editable_table.Offset(-1,0) } break; case 39: // right キー if (cursor()) { editable_table.Offset(0,1) } break; case 40: // down キー if (cursor()) { editable_table.Offset(1,0) } break; } }); |
うん。なんとなく選択したセルが矢印キーで移動できるようになりました。
今回生成したセルのアドレスを駆使して関数の実装とかやりたい訳なんですが、
怖いのは、セル指定の循環参照で起こる無限ループですかね。
エクセルでよくポップアップ見る、「循環参照の検出」について次回は考えてみることにします。
今日の成果の全体像
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
$(function (){ editable_table.Initalize(); }); var editable_table_val = {}; var editable_table = { Initalize: function () { $('.editable-table').find('td').each(function(){ var $td = $(this); var tr = $(this).parent(); var row = $('.editable-table').find('tr').index(tr); var col = $(tr).find('td').index(this); var idx = editable_table.BuildAddress(row, col); $(this).attr("data-address", idx); editable_table_val[idx] = { value: $td.html(), row: row, col: col }; $td.click(function () { var $this = $(this); if ($this.hasClass("selected")) { $this.trigger("dblclick"); } else { editable_table.ClearSelectionCells(); $this.toggleClass("selected", true); } }); $td.dblclick(function () { var $this = $(this); if ($this.hasClass("editing")) { return } if ($this.attr("lock") != undefined) { editable_table.CellLock(this); return } var adrs = $this.attr("data-address"); var cell_val = editable_table_val[adrs].value; editable_table.ClearSelectionCells(); var input = $("<textarea />").attr("id", "edit_target").attr("data-address", adrs).addClass("cell-edit").text(cell_val); $this.toggleClass("selected",true).html("").append(input); $this.addClass("editing"); $("#edit_target").focus().blur(function (){ var adrs = $(this).attr("data-address"); var edit_val = $(this).text().toString(); var rollback = editable_table_val[adrs].value; editable_table_val[adrs].value = edit_val; $(this).remove(); $("td[data-address='" + adrs + "']").toggleClass("editing", false); editable_table.Recalculation(); }); }); }); $(document).keydown(function(e){ var cursor = function() { return ($("#edit_target").length) ? false : ($(".selected").length) ? true : false; } switch (e.keyCode) { case 27: // Esc キー var adrs = $("#edit_target").attr("data-address"); if (adrs == undefined) { return } $("#edit_target").remove(); $("td[data-address='" + adrs + "']").toggleClass("editing", false); editable_table.Recalculation(); break; case 37: // left キー if (cursor()) { editable_table.Offset(0,-1) } break; case 38: // up キー if (cursor()) { editable_table.Offset(-1,0) } break; case 39: // right キー if (cursor()) { editable_table.Offset(0,1) } break; case 40: // down キー if (cursor()) { editable_table.Offset(1,0) } break; } }); }, BuildAddress: function (row, col) { var adrs = ""; var col_idx = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']; limit = col_idx.length; digit = col; do{ adrs = (adrs.length)?col_idx[digit%limit-1] + adrs: col_idx[digit % limit]; digit = Math.floor(digit / limit); }while (digit > 0); return adrs + row; }, ClearSelectionCells: function () { $('.editable-table').find('td').each(function(){ $(this).toggleClass("selected", false); }); }, Offset: function (row, col) { var adrs = $('.selected').attr("data-address"); var cell = editable_table_val[adrs]; var nextAdrs = editable_table.BuildAddress(cell.row+row, cell.col+col); if (editable_table_val[nextAdrs]){ editable_table.ClearSelectionCells(); $("td[data-address='" + nextAdrs + "']").toggleClass("selected", true); } }, Recalculation: function() { for (idx in editable_table_val) { $("td[data-address='" + idx + "']").html(editable_table_val[idx].value); } }, CellLock: function(cell) { var msg = "このセルは変更できません。"; var $tooltip = $("<span />").addClass("tooltip").append($("<span />").addClass("tooltip__body").text(msg)); $('body').append($tooltip); var $cell = $(cell); var cell_offset = $cell.offset(); var cell_size = { width: $cell.outerWidth(), height: $cell.outerHeight() }; var tip_size = { width: $tooltip.outerWidth(), height: $tooltip.outerHeight() }; $tooltip.css({ top: cell_offset.top - tip_size.height, left: cell_offset.left + cell_size.width / 2 - tip_size.width / 2}); $cell.mouseout(function (){ $('.tooltip').fadeOut(2000, function() {$(this).remove(); })}); } } |