44key さま
改善1:テーブルのヘッダーを非表示にする方法(コード)
改善2:テーブルの左から2列のフィールドを編集不可にする方法(コード)
以下のような形になりますが、この場合(プラスマイナスのボタン以外でのサブテーブル行数変更=サブテーブルのchangeイベントを起こせない場合)のフィールドの編集不可設定については
current.table.value.push({
value: {
'n_2': {
value: `2-${i+1}`,
type: 'SINGLE_LINE_TEXT',
disabled: true
},
この部分で設定できます。その上でedit.showで各行に編集不可の処理をする必要があります(下のコードに記載してあります)。
サブテーブルのヘッダーを非表示にすることは簡単ですが、サブテーブル内のフィールドは幅(width)を持たずヘッダーの幅に依存しているため、そのままヘッダーを非表示にするとフィールドが潰れるようです。以下で他のフィールドと同じような見た目にできます。
また、detail.showだとレコードを表示→サブテーブルの値を順次描画といった動作をするため、detail.showイベントでそのままサブテーブルのDOMにアクセスできず、描画完了を待つ処理が必要になります(ここではasync/awaitを使うとreturn eventせず描画処理自体が止まるのでthenで繋ぐ必要があります)。
(() => {
'use strict';
let subTable = {
class: 'subtable-xxxxxxx', // サブテーブルに振られている番号
fieldCode: '' // サブテーブルのフィールドコード
};
let disabledField = ''; // サブテーブル内の無効化するフィールド
let trDrawWait = (record, fieldCode, className) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
let body = document.getElementsByClassName(className)[0].firstChild.nextSibling?.childNodes;
if (record[fieldCode].value.length === body.length && body[0].children?.length) {
resolve();
} else {
resolve(trDrawWait(record, fieldCode, className));
}
}, 100);
});
};
// サブテーブルのヘッダー削除
kintone.events.on([
'app.record.detail.show', 'app.record.create.show', 'app.record.edit.show'
], (event) => {
let record = event.record;
let head = document.getElementsByClassName(subTable.class)[0].firstChild.firstChild;
let widths = [...head.children].map((th) => th.style.width);
if (event.type.match(/detail/)) {
trDrawWait(record, subTable.fieldCode, subTable.class).then(() => {
let rows = [...document.getElementsByClassName(subTable.class)[0].firstChild.nextSibling.children];
rows.forEach((tr) => {
tr.classList.add('row-gaia');
let columns = [...tr.children];
widths.forEach((width, index) => {
columns[index].firstChild.style.width = width;
columns[index].firstChild.style.marginBottom = '12px';
});
});
head.style.display = 'none';
});
} else {
let row = document.getElementsByClassName(subTable.class)[0].firstChild.nextSibling.firstChild;
let columns = [...row.children];
widths.forEach((width, index) => {
columns[index].style.width = width;
});
head.style.display = 'none';
}
return event;
});
// サブテーブル内のフィールドを無効化(編集開始時とボタンによる行の増減時)
kintone.events.on([
'app.record.create.show', 'app.record.edit.show',
`app.record.create.change.${subTable.fieldCode}`, `app.record.edit.change.${subTable.fieldCode}`
], (event) => {
let record = event.record;
record[subTable.fieldCode].value.forEach((row) => {
row.value[disabledField].disabled = true;
});
return event;
});
})();
(追記)cssを忘れていました。プラスマイナスのボタン非表示は投稿されたコードだと全てのサブテーブルに反映されるため、特定のサブテーブルのみである場合は以下のようになります(cssの方が軽くなるかと思います)。
.subtable-xxxxxxx td{
border: none;
}
.subtable-xxxxxxx .subtable-operation-gaia {
display: none;
}