Excel風一覧(handsontable)のリサイズ

WEBでExcel風の一覧を再現するHandsontable の表示サイズ(縦横)は、レスポンシブデザインに対応していません。(*)APIから変更することはできますが、それだけではユーザがサイズ変更できません。ユーザがある程度サイズをコントロールできるよう、コンテキストメニューから変更できるようにします。

完成系

下記のような表をサンプルに考えます。この表を確認したり、入力したりする際、表全体の大きさを変更できるようにします。この例では横30、縦100ピクセル大きくしています。

コンテキストメニューへの独自実装

コンテキストメニューを独自に実装は、下記インターフェイスで行えます。nameはコンテキストメニュー上のメニュー文字列、処理はcallbackに実装します。

hot.updateSettings({
  data: data,
  width: 820,
  height: 400,
  (省略)
  contextMenu: {
    items: {
      "resize_increase": {
        name: function() { return "拡大" },
        callback: function() {
          //ここにリサイズを実装
        }
      },
      "resize_decrease": {
        name: function() { return "縮小" },
        callback: function() {
          //ここにリサイズを実装
        }
      }
    }
  },
  (省略)
});

簡単な共通化

何カ所かHandsontableを使った表があるので、共通化しました。

hot.updateSettings({
  data: data,
  width: 820,
  height: 400,
  (省略)
  contextMenu: concreateContextMenuResize(hot, 30, 100);
  (省略)
});
function concreateContextMenuResize(hot, w, h) {
    return {
        "resize_increase": {
            name: function() { return "拡大" },
            callback: function() {
                var f = handsontableSizeIncrease(hot, w, h)
                f();
            }
        },
        "resize_decrease": {
            name: function() { return "縮小" },
            callback: function() {
                var f = handsontableSizeIncrease(hot, -w, -h)
                f();
            }
        }
    };
}

function handsontableResize(hot, w, h) {
    return function() {
        hot.updateSettings({
            width: w,
            height: h
        });
    }
}

function handsontableSizeIncrease(hot, width, height) {
    return function() {
        var settings = hot.getSettings();
        var afterW = settings.width + width;
        var afterH = settings.height + height;
        f = handsontableResize(hot, afterW, afterH);
        f();
    }
}

* https://forum.handsontable.com/t/responsive-hansontable/1943

転職体験記(1回目)

個人の体験になりますが、私は3回転職をしました。今回はその1回目の体験記を書きたいと思います。3回のうちいずれも『リクルートエージェント』のお世話になりましたが、ここでは、①なぜ転職を思い立ったのか、②リクルートのサービスをどのように用いたか、③転職をしてどのようになったかの3点を中心に、体験記として残しておきます。

続きを読む →

handsontableを使った一覧表示

Excel風グリッドライブラリのhandsontableを使って一覧表示をできるようにします。rails tutorialでも一覧表示はできましたが、handsontableを使うと後々一括登録もできるようになります。また、一覧表示にしても並べ替え(行も列も)ができるようになります。

続きを読む →