お世話になります。
テーブルに明細行を追加する際に、明細行の内容をコピーした状態でデフォルト表示するような+ボタンをつけたいのですが、どのように実装したらよいのでしょうか？
ご教授願います。
古川 さん
サブテーブルの行追加は、レコード更新におけるテーブル操作のテクニック が参考になると思います。
大まかに、下記のような処理になると思います。DOM操作になりますので、kintone 仕様変更で動作不可になるリスクがあります。
追加・編集画面表示と行追加イベントにおいて、DOM操作で対象テーブルの各行に行コピーボタンを追加
行コピーボタンボタンクリック時に、
・kintone.app.record.get 最新レコード情報を取得
・該当行の行データを行IDと添付ファイル以外を複製して、サブテーブルデータの該当行の後ろに追加
・kintone.app.record.set レコード情報を画面に反映
ちょっと面白そうなので、試作してみました。
上記処理のように kintone.app.record.set で行追加を行うと、サブテーブルにルックアップがあると、画面行位置と不整合になるようです。
ということで、行コピーボタンクリック時は、基本機能の行追加を行ってから、複写処理を行うようにしました。
対象アプリに合わせて、フィールドコード、複写項目をカスタマイズすると動作すると思います。
※ onClick 二重登録を解消するためコードを変更しました
jQuery.noConflict();
(function($) {
"use strict";
var copyRowNo = -1;
var events = [
"app.record.edit.show","app.record.create.show",
"app.record.edit.change.Table","app.record.create.change.Table",
];
kintone.events.on(events, function(event) {
var record = event.record;
$('button.remove-row-image-gaia').each(function(index, element) {
if ($(element).parent().find('button.xp-copy-row-image-gaia').length === 0) {
$('<button type="button" class="xp-copy-row-image-gaia" title="行を複写する"></button>').insertAfter(element);
$(element).parent().on('click', 'button.xp-copy-row-image-gaia', function() {
if (copyRowNo === -1) {
var tr_idx = $(this).parents('tr')[0].rowIndex - 1;
copyRowNo = tr_idx;
$(this).parent().find('button.add-row-image-gaia')[0].click();
}
});
}
});
if (copyRowNo >= 0 && event.changes && event.changes.row) {
var copyFrom = record['Table'].value[copyRowNo].value;
var copyTo = event.changes.row.value;
copyTo['ルックアップ'].value = copyFrom['ルックアップ'].value;
copyTo['ルックアップ'].lookup = !!copyFrom['ルックアップ'].value;
copyTo['数量'].value = copyFrom['数量'].value;
}
copyRowNo = -1;
return event;
});
})(jQuery);
CSS
.xp-copy-row-image-gaia {
margin-left: 12px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHoSURBVDhPjZTNLwNBGMa3LULXEpJGVIJEiIOjIyFcOLpw1msTN/E/OBLX+h8cHdBwcvCROLhIHNTGR9CyVR+rnuft7NrV2fBLns7M++48825nZmPGH0zmLlJoeqDCXmbgToIRaM1gMIZmCRqBkowpytAZtAbjA4kECJnBpAXNBrtQnLEIqtAulIXpq0SAbwajJjRb0LAE/sc5NOcZBldfh4Zlzf+LC/NNBKkMVU2g2YTi8pBiesBMTvS3JjuaE+ZjxXX2Ll+cnQvHfy0hZnzhdxHV5RtqESMLhf6jlfFU58ygZakhMcf7THM0XXpe3b9/UDHCeZyf9wy4az4LI+3WLyOf2cE2ax55NfSQ+XG8Yhfa4PYbM0NWq+pq0eST9GFl3bXxD73tjdzZSPr0+W6a2bX+D+X3L1d1tTj6vB3HLtygw5Ptc1goh3fsF4dXdfkyfbwN4BXxyR09FYsVV1sd45vHT0U19JD5nhkPHs+LUCh9fC5v2zcn9muoAo4ZZ16FCOfJwQ1epxyaqeChJem2hkTKTCRuHde1S5/11caMHbxihl2vMsKDx7sW4hoGp/bbu96oyuc5T/DN1GWd40pQVWqOFvP4asT8S06YqkPdVa4Y9T3bgEleIgG0ZkFg7H1pbW6/BLUYxjcfebsabDK/BQAAAABJRU5ErkJggg==) center center no-repeat;
border: 1px solid transparent;
display: inline-block;
width: 24px;
height: 24px;
}
rex0220さん
いつもありがとうございます。
試してみます！
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。