【kintone】テーブルの行を並び替える（ソートする）

11968 ワード
JavaScript kintone JavaScript テキストリンク

前回は、テーブルの値を変更する記事を書きましたが、
今回は簡単にできるテーブルの昇順並び替え機能を作ってみたいと思います。
昇順や降順に並び替えることを「ソート」と言いますので、
「ソート」という言葉を使って説明したいと思います💪
※昇順は1,2,3,・・・のような小さい順、降順は100,99,98,・・・のような大きい順の並び方です

アプリの準備

アプリのフィールド

フィールド種類 フィールド名 フィールドコード
スペース spbtn
テーブル 名簿 名簿

テーブルのフィールド

フィールド種類 フィールド名 フィールドコード
数値 行番号 行番号
文字列(1行) 名前 名前
その他お好みで・・・

JavaScriptを書く

編集画面のイベントにします。
ボタンをつけて、ボタンをクリックすると「行番号」順に並べ替える機能とします。

解説は後述します。

//編集画面開いたときは'app.record.edit.show'
kintone.events.on(['app.record.edit.show'], event => {
    //ボタンを置きたいスペースフィールドの情報を取ってくる
    const sp = kintone.app.record.getSpaceElement('spbtn');

    //ボタンを作る
    const btn = document.createElement('button');
    //ボタンに表示したいテキスト
    btn.textContent='ボタン';

    //スペースフィールドにボタンを追加する
    sp.appendChild(btn);

    //ボタンをクリックしたときの動作
    btn.onclick=()=>{
        const obj = kintone.app.record.get();
        // 行番号順にソートする（行番号昇順に並び替える）
        obj.record.名簿.value.sort((a, b) => {
            //aの方の行番号が小さい時、a が先にくるようにする
            if (Number(a.value.行番号.value) < Number(b.value.行番号.value)) return -1;
            //aの方の行番号が大きい時、b が先にくるようにする
            if (Number(a.value.行番号.value) > Number(b.value.行番号.value)) return 1;
            return 0;
        });

        kintone.app.record.set(obj);
    }

    return event;

});

ボタンをつける

ボタンを追加する方法についてはこちらをご覧ください
→【kintone】アプリの「スペース」フィールドにボタンを設置する

サブテーブルを並び替える

「行番号」を元にソート（並び替える）機能です。

// 行番号昇順にソートする（行番号の小さい順に並び替える）
obj.record.名簿.value.sort((a, b) => {
    //aの方の行番号が小さい時、a が先にくるようにする
    if (Number(a.value.行番号.value) < Number(b.value.行番号.value)) return -1;
    //aの方の行番号が大きい時、b が先にくるようにする
    if (Number(a.value.行番号.value) > Number(b.value.行番号.value)) return 1;
    return 0;
});

obj.record.名簿.value は名簿テーブルの行が格納されている配列です。
※obj.record.名簿.value[0] で1行目です。

配列をなにかのキーを元にソートする時は sort() メソッドを使います。

詳しくはこちらの「解説」のところに使い方が分かりやすく書かれています。
Array.prototype.sort()

※Number()は文字列を数値に変換する関数です。

ちなみに、降順ソートしたい場合はこのように書き換えます。

    //aの方の行番号が大きい時、a が先にくるようにする
    if (Number(a.value.行番号.value) > Number(b.value.行番号.value)) return -1;
    //aの方の行番号が小さい時、b が先にくるようにする
    if (Number(a.value.行番号.value) < Number(b.value.行番号.value)) return 1;

return 負の数; のときは a, b という順番になり、
return 正の数; のときは b, a という順番になります。

動かしてみる

実際に動かしてみるとこのようになります。
※年齢フィールドを追加してみました。

まとめ

今回のTipsを使うと、テーブルの行を思い通りの順番に並べ替えたい時に使えるかも！？

テーブルの行は「配列」として扱うことができます。
こちらのメソッドたちも使えますので、是非研究してみてくださいね＾０＾
参考：JavaScriptリファレンス：Array