本記事では、サンプルアプリをもとに、テーブルの行の削除について解説します。
テーブルの構造と行の追加方法や更新方法については、次の記事を参照してください。
サンプルアプリ:テーブル操作
固定リンクがコピーされました
デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/313/
ログイン情報は
cybozu developer networkデモ環境で確認してください。
このアプリの仕様については
kintoneにおけるテーブル操作の基本(テーブルの構造・行の追加) | デモ環境で解説しています。
行を削除するサンプルコード
固定リンクがコピーされました
本記事では
デモアプリのサンプルコードから、テーブルの行を削除するサンプルコードを抜き出して紹介します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
/*
* テーブル操作(行削除)のサンプルコード
* Copyright (c) 2024 Cybozu
*
* Licensed under the MIT License
* https://opensource.org/license/mit/
*/
(() => {
'use strict';
kintone.events.on(['app.record.create.show', 'app.record.edit.show'], (e) => {
// 削除ボタンを設置
const deleteSpace = kintone.app.record.getSpaceElement('deleteSpace');
const deleteButton = document.createElement('button');
deleteButton.innerHTML = '削除';
deleteButton.onclick = deleteRow;
deleteSpace.appendChild(deleteButton);
return e;
});
// 行削除関数
const deleteRow = () => {
const record = kintone.app.record.get().record;
const targetRowNo = record.削除_行番号.value;
record.テーブル.value.forEach((row, i) => {
if (row.value.行番号.value === targetRowNo) {
record.テーブル.value.splice(i, 1);
}
});
resetRowNo(record);
kintone.app.record.set({record: record});
};
// 行番号更新関数
const resetRowNo = (record) => {
record.テーブル.value.forEach((row, i) => {
row.value.行番号.value = i + 1;
});
};
})();
|
JavaScriptカスタマイズ全体の構成
固定リンクがコピーされました
このJavaScriptカスタマイズは、「テーブルの行削除」部分と「スペースフィールドにボタンを設置する」部分に分かれます。
今回は「テーブルの行削除」について解説しますので、「スペースフィールドにボタンを設置する」方法は次の記事を参考にしてください。
レコード詳細画面にボタンを配置してみよう
テーブルの行を削除する処理
21
22
23
24
25
26
27
28
29
30
31
32
|
// 行削除関数
const deleteRow = () => {
const record = kintone.app.record.get().record;
const targetRowNo = record.削除_行番号.value;
record.テーブル.value.forEach((row, i) => {
if (row.value.行番号.value === targetRowNo) {
record.テーブル.value.splice(i, 1);
}
});
resetRowNo(record);
kintone.app.record.set({record: record});
};
|
テーブルの行番号を更新する処理
34
35
36
37
38
39
|
// 行番号更新関数
const resetRowNo = (record) => {
record.テーブル.value.forEach((row, i) => {
row.value.行番号.value = i + 1;
});
};
|
以下に、それぞれの部分ごとに解説をします。
JavaScriptの配列操作によって配列を一部削除する必要があります。
配列の一部要素を削除するには、splice()
を使います。
テーブルの行を削除するためのコード(例)
splice()
には2つの引数が必要です。
- 1つ目の引数: 何番目の配列なのか。
- 2つ目の引数: 何個消すのか。
2つ目の行を1行削除するには、次のとおりになります。
1
|
record.receipts.splice(1, 1);
|
行削除のイメージ
サンプルアプリのコードの行削除部分の解説
forEach()
でループさせて判定処理を行い、対象の行をsplice()
で削除する流れになっています。
record取得と削除する行番号取得
23
24
|
const record = kintone.app.record.get().record;
const targetRowNo = record.削除_行番号.value;
|
forEach()
を使ってループし、「削除_行番号」と同じ行をsplice()
で削除する
25
26
27
28
29
|
record.テーブル.value.forEach((row, i) => {
if (row.value.行番号.value === targetRowNo) {
record.テーブル.value.splice(i, 1);
}
});
|
行番号を更新する関数
ここまでの変更内容をrecordに反映させる
31
|
kintone.app.record.set({record: record});
|
今回のサンプルアプリでは追加/更新/削除どの関数を使っても毎回最後に行番号をリセットしています。
行番号リセット処理を参考にしてください。
テーブルを一括削除したい場合
固定リンクがコピーされました
テーブルは配列でできていますので、配列の中身を空にすれば一括で削除できます。
1
|
record.テーブル.value = [];
|