HandsonTableの編集にも手を出しておくの2

HandsonTableで一覧表示→詳細入力というパターンを作ってみます

まずはページを移動するメソッドを追加します
/Src/cm.ts

namespace cm {
    /*
     * オフライン判定
     */
    function isOffline(): boolean {
        if (window.navigator.onLine === false) {
            $.mobile.loading("hide");
            alert("Network OffLine...");
            isBusy(false);
            return true;
        }
        return false;
    }

    /*
      * ページ移動
      */
    export function changePage(id: string, hash?: boolean) {
        // オフライン
        if (isOffline() === true) {
            return;
        }
        if (!hash) {
            hash = false;
        }
        $.mobile.pageContainer.pagecontainer("change", "#" + id, { changeHash: hash });
    }

    export function reloadPage(hash?: boolean) {
        // オフライン
        if (isOffline() === true) {
            return;
        }
        if (!hash) {
            hash = false;
        }
        $.mobile.pageContainer.pagecontainer("change", "#" + getActivePageId(), { changeHash: hash, reload: true });
    }
}

ページ移動時はオフライン判定するようにします
オフライン時はページ移動は抑止します
ハッシュ無しが基本です

/Views/table/Index.vbhtmlに詳細入力としてPage2を作成します
中身は面倒なので空で

  <div data-role="page" id="page2">
    <div data-role="header" data-position="fixed" data-fullscreen="false" data-tap-toggle="false">
      <h1>明細</h1>
    </div>
    <div role="main" class="ui-content">

    </div>
    <div data-role="footer" data-position="fixed" data-fullscreen="false" data-tap-toggle="false">
      <div class="ui-toolbar" id="page2_toolbar1">
        <div class="ui-right-panel">
          <a href="#" class="ui-btn ui-btn-active" cmd="apply">OK</a>
          <a href="#" class="ui-btn" cmd="cancel">キャンセル</a>
        </div>
      </div>
    </div>
  </div>

明細ページから戻ってきたとき用に表示前に初期化、表示後にスクロール位置復元するようにします
/Src/table.ts

    namespace Page1 {

        ....

        let _pos: number[] = [];					// 現在位置

	/*
	 * ページ表示前
	 */
        $(document).on("pagecontainerbeforeshow", function (event: Event, ui: any) {
            if (cm.getToPageId(ui) !== "page1") {
                return;
            }

            if (_ht) {
                Ht.initData(_ht);
                _ht.render();
            }
        });
	/*
	 * ページ表示
	 */
        $(document).on("pagecontainershow", function (event: Event, ui: any) {
            if (cm.getToPageId(ui) !== "page1") {
                return;
            }

            // テーブル設定
            if (!_ht) {
                HTable.build();
            }

            // データ読込
            {
                let dts = App.duildTableData();
                _ht.loadData(dts);
                _ht.updateSettings({ maxRows: dts.length }, false);	// データ数設定
                Ht.setFullSize(_ht);
            }
            Ht.setCurrentRowColPos(_ht, _pos);	// 位置復元
            _ht.render();			// 再描画
            mq.update();
            $(window).resize();
        });

        ....

    }

Popup表示等の処理の無い項目を編集っしようとすると明細ページへ移動するようにします
カラムは全てreadOnly: false, editor: CustomEditorとします

/Src/table.ts

/*
 * エディタ
 */
let CustomEditor = Handsontable.editors.TextEditor.prototype.extend();
{
    CustomEditor.prototype.prepare = function () {
        Handsontable.editors.TextEditor.prototype.prepare.apply(this, arguments);

        switch (this.prop) {
	    case "data_name":	// 名称編集
		this.TEXTAREA.maxLength = 20; // 最大20文字
		break;
	}
    };

    CustomEditor.prototype.beginEditing = function () {		// 編集開始前
        switch (this.prop) {

            ....

            default:
                // ページ移動
                _pos = Ht.getCurrentRowColPos(_ht);
                cm.changePage("page2", false);
        }
    };
}

switchに引っかからないカラムは全て位置を取得してページ移動とします
おまけで文字数制限

明細ページは戻ってくるだけです
/Src/table.ts

    namespace Page2 {

        $(document).on("pagecontainershow", function (event: Event, ui: any) {
            if (cm.getToPageId(ui) !== "page2") {
                return;
            }
        });

        $(document).on("click", "#page2_toolbar1 .ui-btn", function (event: Event) {
            let cmd = $(this).attr("cmd");
            switch (cmd) {
                case "apply":
                    cm.changePage("page1", false);
                    break;

                case "cancel":
                    cm.changePage("page1", false);
                    break;
            }
        });
    }