概要
カラムに読取専用設定を適用せずに親テーブル(Aテーブル)から値を取得し、子テーブル(Bテーブル)のカラムに表示するが、その値を編集不可にし、保存時にはクリアする方法。
※ 読取専用にすると、スクリプトで他テーブルから取得した値をカラムに持たせることができなくなる。今回はスクリプトで他テーブルから取得した値をカラムに持たせたいが手入力は受け付けないための方法を考察する。
スクリプト(Pleasanter用)
$p.events.on_editor_load = function () {
getParentData();
$p.getControl('NumB').attr('disabled', true); // 完全に入力不可
}
// 貸出明細テーブル (B) の「分類A」の値が変更されたら呼び出す
$(document).on('change', '#' + $p.getControl('ClassA')[0].id, function () {
getParentData();
});
getParentData = function() {
let classAValue = $p.getControl('ClassA').val(); // 貸出明細の「分類A」
if (classAValue) {
console.log("取得するレコードID:", classAValue); // 確認ログ
$p.apiGet({
'id': classAValue,
'done': function (data) {
console.log("APIレスポンス:", data); // 確認ログ
if (data.Response && data.Response.Data && data.Response.Data.length > 0) {
let numBValue = data.Response.Data[0].NumHash?.NumB || data.Response.Data[0]?.NumB;
console.log("取得した数値B:", numBValue); // 確認ログ
$p.set($p.getControl('NumB'), numBValue);
} else {
console.warn("レスポンスデータが空");
$p.set($p.getControl('NumB'), "データなし");
}
},
'fail': function (data) {
console.error("APIリクエスト失敗:", data);
}
});
} else {
console.log("分類Aが未設定のため、数値Bをクリア");
$p.set($p.getControl('NumB'), '');
}
};
// **保存時に NumB をクリア**
$p.events.before_send = function () {
console.log("更新時に NumB をクリア");
$p.set($p.getControl('NumB'), null);
};
スタイル(CSS)
#Results_NumB {
pointer-events: none; /* クリックや入力を無効化 */
background-color: #e9ecef; /* 無効化風の背景色 */
}
カラム設定
- 数値Bカラム(NumB): Null許容 にする
ポイント
- 親テーブル(Aテーブル)から値を取得
- 取得した値を子テーブル(Bテーブル)の
NumBにセット NumBを編集不可にする(CSS + disabled 属性)- 保存時に
NumBの値をクリアする(before_send イベント)
動作確認済みの環境
- Pleasanter
- JavaScript (jQuery ベース)