一覧表示、更新機能の実装

業務アプリではほぼほぼ必須の一覧表示、登録・更新機能を実装していきます。表示だけならともかく、一覧登録・更新を0から実装するのは現実的ではないため、Handsontableというライブラリを用いました。

前回から間が空いてしまいましたが裏では項目名の日本語化なども行っていました。しかし内容的にはhttps://qiita.com/shi-ma-da/items/7e5c3d75c9a9f51abdd5 の記事がよくまとまっており、こちらを参照して作業しただけです。私の場合はフォーム用のモデルを作って開発しているので、locals/models/ja.ymlは下記のようになります。

ja:
    activemodel:
        models:
            form_app_initializes: 初期化フォーム
        attributes:
                form_app_initializes:
                    user_name: ユーザ名
                    email: メールアドレス
:

日本語化も終わったので次~ということで、一覧表示、登録機能部分を作っていきます。

検討したライブラリ

テーブル表示、登録するライブラリはいくつもあり、どれにしようか迷いました。今回作るアプリは「工数を入力するアプリ」ですので、Excelライクに、”コピー&ペースト”でデータ入力できることを必須にしました。いうまでもなく、始業時間(例えば9:00や9:30)はもちろん、定時帰りをしていれば18:00などの決まった値が多くなります。1日分を入力したら1か月分を簡単に入れられるようにと思っています。もう一つは「無料版」があることです。数百円程度であれば購入も検討しますが、この手のライブラリは数万円にのぼるため基本「Pro」や「製品版」しかないものは検討外です。

試したライブラリはHandsontableとpqgridです。どちらもコピー&ペーストでの入力が簡単にできそうだと「デモ」で分かったためです。一度はpqgridというライブラリで行こうと考えましたが、後にやめにしました。

pqgridの見送り理由

pqgrid(param query)もよいライブラリなのだとは思いますが、見送った理由は下記です。

  • スクロールがある状態での選択
  • APIの使い勝手
  • 名前のややこしさ(笑)

スクロールがある状態の選択

https://paramquery.com/pro/demos24/fluid_window

上記が公式の無料版バージョンのデモです。スクロールが出ていますが、下側から上側に向かって選択する操作をすると、選択せずスクロールしてしまう操作感です。同様にスクロールして下側まで行き、上から下に向かって選択しても同じです。個人的にはこれ気になります。スマホでスワイプしているわけではないので…。(もちろん、サイズを簡単に最小化したり、最大化したりpqgridの”イイネ”な点もあります)

APIの使い勝手

これは個人の趣味ではあると思いますが、API仕様が肌に合わないことも理由の一つです。次に示すものはおそらくもっとも使うであろうAPIの「行データ取得」です。参考:https://paramquery.com/pro/api24#method-getRow

/get 3rd row on current page.
var $tr = $( ".selector" ).pqGrid( "getRow", {rowIndxPage: 2} );

あぁもうめんどくさいなぁ(笑)

何度も何度もこのようなAPIをコールしていると気が狂いそうです。getRow(2)のように呼びたいのです。

名前のややこしさ(笑)

これはいちゃもんですが、この手のライブラリで超有名な[jqgrid]と1文字違いです。jqgridばかりが検索に引っ掛かります。もしかしてjqgridではないのですgoogle先生。

Handsontableを使って作っていく

最終的にHandsontableを使って作っていくことに決めたので、次回以降は一覧登録機能を持つ最初のページを作るまでを書こうと思います。Handsontableの無料版の最終バージョン 6.2.2 です。