本記事では、サンプルアプリをもとに、テーブルの行の更新について解説します。
テーブルの構造と行の追加方法や削除方法については、次の記事を参照してください。
サンプルアプリ：テーブル操作
固定リンクがコピーされました
デモ環境で実際に動作を確認できます。
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
41
42
43
44
|
/*
* テーブル操作（行更新）のサンプルコード
* 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 updateSpace = kintone.app.record.getSpaceElement('updateSpace');
const updateButton = document.createElement('button');
updateButton.innerHTML = '更新';
updateButton.onclick = updateRow;
updateSpace.appendChild(updateButton);
return e;
});
// 行更新関数
const updateRow = () => {
const record = kintone.app.record.get().record;
const updateText = record.更新_テキスト.value;
const updateCheckBox = record.更新_チェックボックス.value;
const targetRowNo = record.更新_行番号.value;
record.テーブル.value.forEach((row) => {
if (row.value.行番号.value === targetRowNo) {
row.value.テキスト.value = updateText;
row.value.チェックボックス.value = updateCheckBox;
}
});
resetRowNo(record);
kintone.app.record.set({record: record});
};
// 行番号更新関数
const resetRowNo = (record) => {
record.テーブル.value.forEach((row, i) => {
row.value.行番号.value = i + 1;
});
};
})();
|
JavaScriptカスタマイズ全体の構成
固定リンクがコピーされました
このJavaScriptカスタマイズは、「テーブルの行更新」部分と「スペースフィールドにボタンを設置する」部分に分かれます。
今回は「テーブルの行更新」について解説しますので、「スペースフィールドにボタンを設置する」方法は次の記事を参考にしてください。
レコード詳細画面にボタンを配置してみよう
テーブルの行を更新する処理
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
// 行更新関数
const updateRow = () => {
const record = kintone.app.record.get().record;
const updateText = record.更新_テキスト.value;
const updateCheckBox = record.更新_チェックボックス.value;
const targetRowNo = record.更新_行番号.value;
record.テーブル.value.forEach((row) => {
if (row.value.行番号.value === targetRowNo) {
row.value.テキスト.value = updateText;
row.value.チェックボックス.value = updateCheckBox;
}
});
resetRowNo(record);
kintone.app.record.set({record: record});
};
|
テーブルの行番号を更新する処理
38
39
40
41
42
43
|
// 行番号更新関数
const resetRowNo = (record) => {
record.テーブル.value.forEach((row, i) => {
row.value.行番号.value = i + 1;
});
};
|
以下に、それぞれの部分ごとに解説をします。
行を更新する場合は、大まかに分けて「更新したい行を探す」「行の値を書き換える」の2つの処理が必要です。
「更新したい行を探す」方法はいくつかありますが、今回はループして該当の行の場合は書き換えるという処理にしています。
record取得と追加する行にセットするための値を代入する
24
25
26
27
|
const record = kintone.app.record.get().record;
const updateText = record.更新_テキスト.value;
const updateCheckBox = record.更新_チェックボックス.value;
const targetRowNo = record.更新_行番号.value;
|
forEach()を使ってループし、「更新_行番号」と同じ行を更新する
28
29
30
31
32
33
|
record.テーブル.value.forEach((row) => {
if (row.value.行番号.value === targetRowNo) {
row.value.テキスト.value = updateText;
row.value.チェックボックス.value = updateCheckBox;
}
});
|
ここまでの変更内容をrecordに反映させる
35
|
kintone.app.record.set({record: record});
|
今回のサンプルアプリでは追加/更新/削除どの関数を使っても毎回最後に行番号をリセットしています。
行番号リセット処理を参考にしてください。
