msawady’s learning memo

ただのJavaエンジニアが、学んだことをログっていくところ

【Javascript】table カスタマイズ: クリックによるチェック、右クリックメニュー追加

今回はフロントエンドしか触ってません

  • Scala、Play Framework の勉強のためのTodo管理アプリですが、サーバー処理をコールするフロントエンドもちゃんと書きたくなりました。
  • べた書きjQueryです。業務では先人が綺麗にラップしたフレームワークがあり、加えてTypeScriptを利用していることもあり、Javascriptをゴリゴリ書くことはほぼ無いので、楽しかったです。
  • テーブル周りの機能を追加しました
    • チェックボックス追加。列をクリックした時にもチェックが入るようにする
    • Context.js を利用して右クリックメニューを追加
    • 右クリックメニューに、「チェックされている列のIDを取得する」処理をbind

ソース

jQueryを利用する

  • build.sbtに依存関係を追加
libraryDependencies += "org.webjars" % "jquery" % "3.2.1"
  • htmlのheadタグの中でインポート
    @Html(webJarsUtil.script("jquery.min.js"))

列をクリックした時にもチェックが入るようにする

こちらのページを参考にしました。

// チェックボックスをクリックしたらチェックが入る
    $('input[type="checkbox"]').click(function() {
        var c= $(this)
        if(c.prop('checked'))
            c.prop('checked', '');
        else
            c.prop('checked', 'checked');
    });

    // テーブルの列をクリックしてもチェックが入る
    $('table tr').click(function() {
      var c = $(this).children('td').children('input[type=checkbox]');
        if(c.prop('checked'))
            c.prop('checked', '');
        else
            c.prop('checked', 'checked');
    });

Context.js を利用して右クリックメニューを追加

右クリックメニューに、「チェックされている列のIDを取得する」処理をbind

Context.jsを利用しました。

Bootstrap用のcssが有ったのですが、standalone用のcssの方が断然キレイだったので、standalone用を使っています。

とりあえずnpmなどのパッケージ管理は使わず、手で置いた .css/.jsをhtmlから読み込みます。もう少し依存ライブラリが増えたら考える。。。

  • html の headタグの中でインポート
    <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/context.standalone.css")">
    <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/todo.css")">
    <script src="@routes.Assets.versioned("javascripts/context.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("javascripts/todo.js")" type="text/javascript"></script>
     
    context.init({preventDoubleContext: false});

    // 右クリックメニュー
    context.attach("#todo_body", [
        {header: 'Status'},
        {text: 'mark as UNDONE', action: function(e){
            console.log(getSelectedIds())
        }},
        {text: 'mark as DOING', action: function(e){
            console.log(getSelectedIds())
        }},
        {text: 'mark as DONE', action: function(e){
            console.log(getSelectedIds())
        }}
    ])

    // チェックの入っている列のIDを取得する
    function getSelectedIds() {
        var ids = [];
        var rows = $('input[type=checkbox]:checked').parents("tr")
        $.each(rows, function(){
            ids.push($(this).children('td[class=id]').text());
        });
        return ids;
    }
  • context.attachで右クリックメニューを編集できます。text, action などを指定した options を渡すことでメニューを追加できます。
  • getSelectedIds()は無知を痛感しながら、このページこのページを参考にしながら頑張りました。
  • $.eachのthisがループしているelementなんですね。。。

結果

  • 右クリックメニュー f:id:msawady:20170814000350p:plain
  • 実行 f:id:msawady:20170814001311p:plain

感想と、次にやること

  • jQueryをちゃんと書いたのがほぼ初めてだったんですが、新鮮な楽しさがありました。
  • 小規模なアプリならともかく、大きくなってくると辛そうですね。。。
  • 次回はサーバーにReqを投げてステータスの更新が出来るようにしたいと思います。
    • そろそろデータベースにも繋げたい。。。