지난번에는 테이블의 값을 변경하는 기사를 썼지만,
이번에는 쉽게 할 수있는 테이블의 오름차순 정렬 기능을 만들고 싶습니다.
오름차순과 내림차순으로 정렬하는 것을 "정렬"이라고 말하기 때문에,
"소트"라는 단어를 사용하여 설명하고 싶습니다 💪
※오름차순은 1,2,3,・・・와 같은 작은 순서, 내림차순은 100,99,98,・・・와 같은 큰 순서의 배열입니다

앱 준비

앱 필드


필드 종류
필드 이름
필드 코드


공간

spbtn

테이블
명부
명부


테이블의 필드


필드 종류
필드 이름
필드 코드


수치
행 번호
행 번호

문자열(1행)
이름
이름

그 외 취향에・・・

자바스크립트 쓰기

편집 화면의 이벤트로 합니다.
버튼을 붙여, 버튼을 클릭하면 「행 번호」순으로 정렬하는 기능으로 합니다.

해설은 나중에 설명합니다.

//編集画面開いたときは'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를 사용하면 테이블 행을 원하는대로 순서대로 정렬하고 싶을 때 사용할 수 있습니다! ?

테이블의 행은 "배열"로 취급할 수 있습니다.
이쪽의 방법들도 사용할 수 있으므로, 꼭 연구해 봐 주세요＾0＾
참고 : JavaScript 참조: Array