【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>

javascript

     
    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なんですね。。。
- 関数型言語の_みたいだなぁと思ったり。