セルの値計算・・・と思ったけど脱線してエラー表示

いざっ、セルの値計算！

 

っと思ったんだけど、型変換と型に応じた対応と、いろいろ考えることがあったので頭の中で考えながらエラー表示の部分をブラッシュアップしてみた。

最初に作ったモジュールだと普通にalert使ってエラーって出してた。

if (/^=.*([A-Z]+\d+).*/.test(edit_val)) {
  if (editable_table.LoopCheck(adrs)) {
     alert("循環参照を検出しました。\r\nセルの内容を修正し直して下さい。");
     $(this).focus();
     editable_table_val[adrs] = rollback;
     return
   }
 }

こんなこと都度やってたら、これからセル計算でいろんなエラーでた時にソースが爆発するなーと思ったので、動作をキャンセルして強制的に戻すのではなくエラーをセルに表示してあげることにした。

セル計算する関数（CellCalculation）を別で用意して、その中の１パターンとして循環参照を入れとく。

エラー出す関数（CalculateExeption）もセットで用意しとく。

  CellCalculation: function(adrs) {
    var $div = $("td[data-address='" + adrs + "'] > div:first");
    var val = editable_table_val[adrs].value
    if (/^=.+/.test(val)) {
      var cells = [];
      if (editable_table.RootExists(adrs, cells)) {editable_table.CalculateExeption(adrs, "循環参照")}

      // 本当はここにセル計算する処理を書きたい。
      $div.html(val);
    } else {
      $div.html(val);
    }
  },
  CalculateExeption: function(adrs, err_val) {
    var $span = $("<span />").append(err_val).addClass("calculate-exeption").hide();
    $("td[data-address='" + adrs + "'] > div:first").html(editable_table_val[adrs].value).append($span);
    $span.fadeIn(1000);
  }

エラー表示のスタイルはこんな感じかなー？

セルの右下の方にピンクっぽく出てくる的な。

.editable-table td span.calculate-exeption {
	font-size: 9px;
	position: absolute;
	z-index:9990;
	opacity: 0.7;
	right: 0px; bottom:0px;
	background:hotpink;
	-webkit-border-radius:20%;
　　　　   -moz-border-radius:20%;
            -ms-border-radius:20%;
		border-radius:20%;
}

 

さて、これでセル計算の中で他のエラーに行き当たっても同じフレームでエラー処理できるぞっ。

じっくり計算ロジックについて考えよう。