HandsonTableの編集の続き
以前にHandsonTableの編集でPopupを表示して・・・とやりましたが死角がありました
その1
Popup表示後のタブキー押下で制御がHandsonTableに戻ってしまい、裏でセル選択が移動します
対策としてキー入力禁止メソッドを作成しておきます
合わせてカレントセル保存復元メソッドも追加します
全景載せておきます
/Src/ht.ts
/// <reference path="../scripts/typings/jquery/jquery.d.ts" /> /// <reference path="../scripts/typings/jquerymobile/jquerymobile.d.ts" /> /// <reference path="../scripts/typings/handsontable/handsontable.d.ts"/> // 改変済 /* * Handsontable Helper */ namespace Ht { "use strict"; export namespace CurrentCell { let curRow = -1; let curCol = -1; export function save(ht: Handsontable, row: number, col: number) { curRow = -1; curCol = -1; if (row < 0) { curRow = getCurrentRow(ht); } if (col < 0) { curCol = getCurrentCol(ht); } } export function restor(ht: Handsontable, row: number, col: number) { let isRestor = false; if (curRow >= 0) { row = curRow; isRestor = true; } if (curCol >= 0) { col = curCol; isRestor = true; } if (isRestor) { curRow = -1; curCol = -1; ht.selectCell(row, col); } } } /* * キー入力禁止 */ export function setDisableKey(event: any) { // 漢字系 if ([28, 29, 241, 242, 243, 244].indexOf(event.keyCode) >= 0) { event.isImmediatePropagationEnabled = false; event.isImmediatePropagationStopped = function () { return true; }; } // ポップアップ表示中 // サブウィンドウ表示中 if (Popup.isActive() || SubWindow.isVisible()) { event.isImmediatePropagationEnabled = false; event.isImmediatePropagationStopped = function () { return true; }; } } /* * 親コンテナ取得 */ export function getContainerParent(ht: Handsontable): JQuery { return $(ht.container).parent("div"); } /* * 垂直スクロール位置取得 */ export function getVScrollPos(ht: Handsontable): number { return $(ht.container).children(".wtHolder").scrollTop(); } /* * 垂直スクロール位置設定 */ export function setVScrollPos(ht: Handsontable, value: number) { $(ht.container).children(".wtHolder").scrollTop(value); } /* * 水平スクロール位置取得 */ export function getHScrollPos(ht: Handsontable): number { return $(ht.container).children(".wtHolder").scrollLeft(); } /* * 水平スクロール位置設定 */ export function setHScrollPos(ht: Handsontable, value: number) { $(ht.container).children(".wtHolder").scrollLeft(value); } /* * 現在行列位置取得 */ export function getCurrentRowColPos(ht: Handsontable): number[] { let row = -1; let col = -1; if (ht) { let sel = ht.getSelected(); if (sel && sel.length > 0) { row = sel[0][0]; col = sel[0][1]; } } let vpos = getVScrollPos(ht); let hpos = getHScrollPos(ht); return [row, col, vpos, hpos]; } /* * 現在行列位置設定 */ export function setCurrentRowColPos(ht: Handsontable, pos: number[]) { if (!pos || !ht.countRows() || !ht.countCols()) { return; } let row = pos[0]; if (!row) { row = 0; } else { row = Math.max(row, 0); row = Math.min(row, ht.countRows() - 1); } let col = pos[1]; if (!col) { col = 0; } else { col = Math.max(col, 0); col = Math.min(col, ht.countCols() - 1); } let vpos = pos[2]; if (!vpos) { vpos = 0; } let hpos = pos[3]; if (!hpos) { hpos = 0; } ht.selectCell(row, col); setVScrollPos(ht, vpos); setHScrollPos(ht, hpos); } /* * 現在行取得 */ export function getCurrentRow(ht: Handsontable): number { let row = -1; if (ht) { let sel = ht.getSelected(); if (sel && sel.length > 0) { row = sel[0][0]; } } return row; } /* * 現在列取得 */ export function getCurrentCol(ht: Handsontable): number { let col = -1; if (ht) { let sel = ht.getSelected(); if (sel && sel.length > 0) { col = sel[0][1]; } } return col; } /* * 現在列取得 */ export function getCurrentProp(ht: Handsontable): string { let prop = ""; if (ht) { let sel = ht.getSelected(); if (sel && sel.length > 0) { prop = <string>ht.colToProp(sel[0][1]); } } return prop; } /* * 全面表示 */ export function setFullSize(ht: Handsontable) { if (ht) { let sz = cm.getPageContentSize(); ht.updateSettings({ width: sz[0] , height: sz[1] }, false); getContainerParent(ht).width(sz[0]).height(sz[1]); ht.render(); } } /* * 表示位置へスクロール */ export function setRowScroll(ht: Handsontable, row?: number): boolean { if (typeof row === "undefined") { row = getCurrentRow(ht); } let col = getCurrentCol(ht); // ビュー内に無ければスクロール { let first = ht.view.wt.wtScroll.getFirstVisibleRow(); if (row < first) { return ht.scrollViewportTo(row, col); } } { let last = ht.view.wt.wtScroll.getLastVisibleRow(); if (row > last) { return ht.scrollViewportTo(row, col, true); } } return false; } export function setColScroll(ht: Handsontable, col?: number): boolean { if (typeof col === "undefined") { col = getCurrentCol(ht); } let row = getCurrentRow(ht); // ビュー内に無ければスクロール { let first = ht.view.wt.wtScroll.getFirstVisibleColumn(); if (col < first) { return ht.scrollViewportTo(row, col); } } { let last = ht.view.wt.wtScroll.getLastVisibleColumn(); if (col > last) { return ht.scrollViewportTo(row, col, true); } } return false; } /* * 選択と表示位置へスクロール */ export function setRowSelectAndScroll(ht: Handsontable, row: number): boolean { let col = getCurrentCol(ht); if (ht.selectCell(row, col) === true) { return setRowScroll(ht, row); } else { return false; } } export function setColSelectAndScroll(ht: Handsontable, col: number): boolean { let row = getCurrentRow(ht); if (ht.selectCell(row, col) === true) { return setColScroll(ht, col); } else { return false; } } /* * データ初期化 */ export function initData(ht: Handsontable) { ht.loadData([]); ht.updateSettings({ maxRows: 0 }, false); } /* * カラムヘッダタイトル取得 */ export function getColumnTitle(ht: Handsontable, col: number | string): string { let colidx = 0; if (typeof col === "string") { colidx = ht.propToCol(<string>col); } else { colidx = col; } let hd = ht.getColHeader(colidx); return $(hd).text(); } }
HandsonTable作成時オプションの対象イベントで呼び出します
/Src/table.ts
/* * テーブル */ namespace HTable { /* * 作成 */ export function build() { _ht = new Handsontable($("#list_table")[0], { data: null , columns: getColumns() // 列設定 , colHeaders: getColHerders // 列見出し , rowHeaders: true // 行見出し , rowHeaderWidth: 30 // 行見出し幅 , manualColumnResize: true // 列幅変更 , multiSelect: false // 複数選択 , stretchH: "none" // 水平ストレッチ , autoColumnSize: false // 自動サイズ調整 , wordWrap: false // セル内折り返し , outsideClickDeselects: false // 選択を維持 , disableVisualSelection: "area" // 範囲選択不可 , selectionMode: "single" // 選択モード , startRows: 0 // データ無時の行数 , trimWhitespace: false // 前後の空白トリム , currentRowClassName: "current-row" // 選択列にクラス名付加 , rowHeights: function (row: number) { // 行高さ return 50; } , enterMoves: { row: 0, col: 0 } // Enterキー移動先 , autoWrapCol: false // 列移動ループ , autoWrapRow: false // 行移動ループ , fillHandle: false // 選択範囲を埋める , beforeOnCellMouseDown(event: Event, coords: any) { if (_ht) { Ht.CurrentCell.save(_ht, coords.row, coords.col); } } , afterSelection(row: number, col: number) { if (_ht) { Ht.CurrentCell.restor(_ht, row, col); } } , beforeKeyDown(event: any) { Ht.setDisableKey(event); // 無効なキー入力設定 } }); .setFullSize(_ht); // 全面表示 } .... }
漢字系潰しは他所にあったものをパクッてきました
その2
Android上でPopupの表示を維持できませんでした
出た瞬間に閉じられます
タイマー使って回避します
let CustomEditor = Handsontable.editors.TextEditor.prototype.extend(); { CustomEditor.prototype.beginEditing = function () { // 編集開始前 .... let td = this.TD; // ポップアップ表示 setTimeout(function () { Popup.open(dlg, { // dlgがPopup positionTo: td , focusSelector: ipt , onOpend: function () { ipt.NumberSpin({ digits: 0, slider: true }); // iptがPopup上のinput } }); }, 0); .... }; }