何を実現したいのかを書きましょう
一覧画面上で各レコードごとに最後の列に用意されている既存の編集ボタンと同じ処理をレコードの最初の列にaとimgを用いて実現したいです。
一応既存の編集ボタンと同じく以下処理を実行できること。
①編集ボタンを押下したら、一行だけ編集モードに変わる。
②別レコードの編集ボタンは消える。
③保存ボタンを押下したら、保存され再度作成した編集ボタンと既存の編集ボタンが表示される。
発生した問題やエラーメッセージを具体的に書きましょう
現状、エラーは出ていません。
また、上記やりたいことの①と②は実現できましたが、③だけ、保存はされますが、編集を行ったレコードのみ作成した編集ボタンが表示されません。
原因として処理は問題ないようですが、キントーンのstatic内のJavascriptで消されてるようです。
（htmlからもaタグやimgタグが消されてしまうのです。）
これを回避することはできるのでしょうか。
実行したコードをコピー＆ペーストしましょう
コードペタ張りですみません。。。
(function() {
'use strict';
// 編集ボタンを非表示にする関数
const hideAllEditButtons = (table) => {
const editButtons = table.querySelectorAll('.recordlist-edit-gaia, .new_edit_button');
editButtons.forEach(button => {
button.classList.add('hidden'); // 'hidden'クラスで非表示にします
});
};
// 編集ボタンを再表示する関数
const restoreEditButtons = (table, rowIndex) => {
const editButtons = table.querySelectorAll('.recordlist-edit-gaia, .new_edit_button');
editButtons.forEach(button => {
button.classList.remove('hidden'); // 'hidden'クラスを解除して再表示
});
};
// 保存・キャンセルボタンのイベントリスナー追加
const addSaveCancelListeners = (table) => {
const saveButtons = document.querySelectorAll('.recordlist-save-gaia, .recordlist-save-button-gaia');
const cancelButtons = document.querySelectorAll('.recordlist-cancel-gaia, .recordlist-cancel-button-gaia');
saveButtons.forEach((button) => {
if (!button.dataset.listenerAdded) {
button.addEventListener('click', () => {
console.log('保存ボタンが押されました');
setTimeout(() => {
restoreEditButtons(table);
}, 500);
});
button.dataset.listenerAdded = true;
}
});
cancelButtons.forEach(button => {
if (!button.dataset.listenerAdded) {
button.addEventListener('click', () => {
console.log('キャンセルボタンが押されました');
restoreEditButtons(table);
initialize();
});
button.dataset.listenerAdded = true;
}
});
};
// 新しいボタンを行に追加
const addNewButtonToRow = (columns, rowIndex, table) => {
if (!columns[0].querySelector('.new_edit_button')) {
if (columns.length > 1 || columns[0].tagName !== 'TD') {
const newButton = document.createElement('a');
newButton.classList.add('new_edit_button');
newButton.style.cssText = 'display: inline-block; width: 35px; height: 35px; background: transparent; border: 0; margin: 0; padding: 0;';
const newButtonImg = document.createElement('img');
newButtonImg.src = `https://static.cybozu.com/contents/k/image/argo/component/recordlist/record-edit.png`;
newButtonImg.alt = 'Edit';
newButtonImg.style.cssText = 'width: 20px; height: 20px;';
newButton.appendChild(newButtonImg);
newButton.addEventListener('click', () => {
console.log('追加された編集ボタンが押されました');
hideAllEditButtons(table);
const existingEditButtons = table.querySelectorAll('.recordlist-edit-gaia');
if (existingEditButtons[rowIndex]) {
existingEditButtons[rowIndex].click();
addSaveCancelListeners(table);
}
});
columns[0].appendChild(newButton);
}
}
};
// 既存の編集ボタンにリスナーを追加
const addListenersToExistingEditButtons = (table) => {
const editButtons = table.querySelectorAll('.recordlist-edit-gaia');
editButtons.forEach((button, rowIndex) => {
if (!button.dataset.listenerAdded) {
button.addEventListener('click', () => {
console.log('既存の編集ボタンが押されました');
hideAllEditButtons(table);
addSaveCancelListeners(table);
});
button.dataset.listenerAdded = true;
}
});
};
// テーブルのボタンを更新
const updateTableButtons = (table) => {
const rows = table.querySelectorAll('tr');
rows.forEach((row, rowIndex) => {
const columns = row.querySelectorAll('td');
if (columns.length > 0) {
columns[0].style.width = '76px';
addNewButtonToRow(columns, rowIndex, table);
}
});
const headers = table.querySelectorAll('th');
if (headers.length > 0) {
headers[0].style.width = '76px';
}
addListenersToExistingEditButtons(table);
};
// 初期化関数
const initialize = () => {
const table = document.querySelector('.recordlist-gaia');
if (table) {
table.querySelectorAll('.new_edit_button').forEach(button => button.remove());
updateTableButtons(table);
} else {
console.warn('テーブルが見つかりません');
}
};
// リストビューの更新を監視して、再描画後に初期化処理を行う
kintone.events.on('app.record.index.show', (event) => {
initialize(); // 初期化処理
return event;
});
})();
皆様お手数をおかけしますが何か情報や修正箇所など、ご教授いただけますと幸いです。
