JavaScript初心者のものです。
下記、参照記事を元に、アプリ内に動的ルックアップを複数個配置したいと思っております（最大20個）
■参照記事：自作ルックアップで参照アプリを動的に変更
https://developer.cybozu.io/hc/ja/community/posts/360017928983-%E8%87%AA%E4%BD%9C%E3%83%AB%E3%83%83%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97%E3%81%A7%E5%8F%82%E7%85%A7%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E5%8B%95%E7%9A%84%E3%81%AB%E5%A4%89%E6%9B%B4
■現状行ったこと
対象アプリ内に自作ルックアップ用のフィールドを5個用意し、参照記事のコードを頭からおしりまで5回繰り返して、データの取得はできています。
※コードは繰り返しで長いので1商品のみアップしています。
※フィールドコードは1商品ごとに変更。
■現状の問題点として
上記クリアボタンについてですが、例えばカテゴリ1から2、3・・・順に商品を取得し、
カテゴリ5から4、3・・・順にクリアしていく場合は、下から1行ずつクリアされますが、
カテゴリ1から2、3・・・順に商品を取得し、カテゴリ1のクリアボタンを押した場合は、
全商品がクリアされてしまいます。
クリアボタンを押した行のみ削除したいのですが、どこを修正すればよいか
アドバイスをいただけますでしょうか、宜しくお願いいたします。
JavaScript
(function() {
"use strict";
// コンストラクタ定義
var MyLookUp = (function(fieldSettings){
function MyLookUp(fieldSettings) {
this.fieldSettings = fieldSettings;
}
MyLookUp.prototype = {
createModal: function(){
var _this = this;
this.modal = document.createElement('div');
this.modalTableWrapper = document.createElement('div');//102cus モーダルウィンドウのスクロール対応
this.modalTable = document.createElement('table');
this.modalTbody = document.createElement('tbody');
this.modal.classList.add('lookUpModal');
this.modalTableWrapper.classList.add('lookUpModalTableWrapper');//102cus モーダルウィンドウのスクロール対応
this.modalTable.classList.add('lookUpModalTable');
this.modalTable.innerHTML = (
'<thead><tr>' +
this.fieldSettings.viewFields.reduce(function(columns, viewField){
return columns + '<th>' + viewField + '</th>';
}, '') +
'<th>取得</th>' +
'</tr></thead>'
);
this.modal.addEventListener('click', function(e){
if(e.target === _this.modal){
_this.removeModal();
}
});
this.modalTbody.addEventListener('click', function(e){
if(e.target.classList.contains('modalGetButton')){
_this.copyDatas(_this.records[e.target.getAttribute('data-index')]);
}
});
this.modalTable.appendChild(this.modalTbody);
/*this.modal.appendChild(this.modalTable);*/ //102cus モーダルウィンドウのスクロール対応でコメント
this.modalTableWrapper.appendChild(this.modalTable); //102cus モーダルウィンドウのスクロール対応
this.modal.appendChild(this.modalTableWrapper); //102cus モーダルウィンドウのスクロール対応
document.body.appendChild(this.modal);
return this;
},
showModal: function(){
var _this = this;
this.modalTbody.innerHTML =(
_this.records.reduce(function(rows, record, index){
return (
rows +
'<tr>' +
_this.fieldSettings.viewFields.reduce(function(columns, viewField){
return columns + '<td>' + record[viewField].value + '</td>';
}, '') +
'<td><a class="modalGetButton" data-index="' + index + '">取得</a></td>' +
'</tr>'
)
}, '')
);
this.modal.classList.add('on');
},
removeModal: function(){
this.modal.classList.remove('on');
},
createGetButton: function(){
var _this = this;
this.getButton = document.createElement('a');
this.getButton.innerHTML = '取得';
this.getButton.classList.add('lookUpButton');
this.getButton.addEventListener('click', function(){
var query;
_this.event = kintone.app.record.get();
if(_this.event.record[_this.fieldSettings.copyField.to].value){
query = _this.fieldSettings.copyField.from + '="' + _this.event.record[_this.fieldSettings.copyField.to].value + '"';
if(_this.fieldSettings.query)
query += (' and ' + _this.fieldSettings.query);
}else{
query = _this.fieldSettings.query;
}
kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {
app: _this.fieldSettings.apps[_this.event.record[_this.fieldSettings.appSelectField].value],
query: query + _this.fieldSettings.sort
}).then(function(response){
if(!response.records.length){
alert('データがありません。');
}else if(response.records.length === 1){
_this.copyDatas(response.records[0]);
}else{
_this.records = response.records;
_this.showModal(response.records);
}
});
});
return this;
},
createClearButton: function(){
var _this = this;
this.clearButton = document.createElement('a');
this.clearButton.classList.add('lookUpButton');
this.clearButton.innerHTML = 'クリア';
this.clearButton.addEventListener('click', function(){
_this.clearDatas();
});
return this.clearButton;
},
showButtons: function(){
kintone.app.record.getSpaceElement(this.fieldSettings.buttonSpace).classList.add('lookUpButtonSpace');//102cus 取得ボタンを下部に配置
kintone.app.record.getSpaceElement(this.fieldSettings.buttonSpace).appendChild(this.getButton);
kintone.app.record.getSpaceElement(this.fieldSettings.buttonSpace).appendChild(this.createClearButton());
return this;
},
copyDatas: function(record){
var _this = this;
this.event.record[this.fieldSettings.copyField.to].value = record[this.fieldSettings.copyField.from].value;
this.fieldSettings.otherCopyFields.forEach(function(otherCopyField){
_this.event.record[otherCopyField.to].value = record[otherCopyField.from].value;
});
this.event.record[this.fieldSettings.recordIdField].value = record.型番.value;//102cus 別テーブルと紐づけるフィールド名称キー
kintone.app.record.set(this.event);
this.removeModal();
//alert('参照先からデータが取得されました。');
},
clearDatas: function(record){
var _this = this;
this.event.record[this.fieldSettings.copyField.to].value = null;
this.fieldSettings.otherCopyFields.forEach(function(otherCopyField){
_this.event.record[otherCopyField.to].value = null;
});
this.event.record[this.fieldSettings.recordIdField].value = null;
kintone.app.record.set(this.event);
},
disableOtherCopyFields: function(event){
this.fieldSettings.otherCopyFields.forEach(function(otherCopyField){
event.record[otherCopyField.to].disabled = true;
});
event.record[this.fieldSettings.recordIdField].disabled = true;
//kintone.app.record.setFieldShown(this.fieldSettings.recordIdField, false);
return event;
},
createLink: function(event){
kintone.app.record.getFieldElement(this.fieldSettings.copyField.to).innerHTML = (
'<a href="../' +
this.fieldSettings.apps[event.record[this.fieldSettings.appSelectField].value] +
'/show#record=' +
event.record[this.fieldSettings.recordIdField].value +
'" target="_blank">' +
event.record[this.fieldSettings.copyField.to].value +
'</a>'
);
},
createLinks: function(event){
var _this = this;
event.records.forEach(function(record, index){
kintone.app.getFieldElements(_this.fieldSettings.copyField.to)[index].innerHTML = (
'<div><a href="../' +
_this.fieldSettings.apps[record[_this.fieldSettings.appSelectField].value] +
'/show#record=' +
record[_this.fieldSettings.recordIdField].value +
'" target="_blank">' +
record[_this.fieldSettings.copyField.to].value +
'</a></div>'
);
});
}
}
return MyLookUp;
})();
// ここから要編集(フィールド設定)
var lookUpParams = {
appSelectField: 'カテゴリ11', //関連付けるアプリを決めるフィールド //102cus ラジオボタン＆ドロップボタン可
buttonSpace: 'space11', //ボタン設置用のスペースフィールド //102cus スペースの要素IDを設定
recordIdField: '商品番号11', //参照レコードのレコード番号保存用のフィールド //102cus 数値レコードで配置し商品マスタのレコードを引っ張る
apps: { //関連付けるアプリ
不用品: 28, //関連付けるアプリを決めるフィールドのvalue: アプリID //102cus
家屋片付け: 40,
},
copyField: {
to: '商品番号11', //自作のルックアップフィールド /102 商品番号を呼び出す部分、文字列レコードで構成
from: '型番' //コピー元のフィールド //102cus 商品マスタ側の文字列レコードの型番
},
otherCopyFields: [ //ほかのフィールドのコピー
{to: '文字列コピー', from: '商品名'},
{to: '単価11', from: '価格'},
],
viewFields: ['型番', '商品名', '価格'], //コピー元のレコードの選択時に表示するフィールド
query: ' 更新日時 > "2018-07-27T09:00:00+0900" ', //絞り込み
sort: ' order by レコード番号 asc ' //ソート
};
// ここまで要編集
var lookUP = new MyLookUp(lookUpParams).createGetButton().createModal();
kintone.events.on([
'app.record.index.show'
], function(event){
return lookUP.createLinks(event);
});
kintone.events.on([
'app.record.detail.show'
], function(event){
return lookUP.createLink(event);
});
kintone.events.on([
'app.record.create.show',
'app.record.edit.show'
], function(event){
lookUP.event = event;
return lookUP.showButtons().disableOtherCopyFields(event);
});
})();
//2商品目------------------------------------------------------------------------
//繰り返し・・・
CSS
.lookUpModal{
display: none;
position: fixed;
background: rgba(0,0,0,.3);
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.lookUpModal.on{
display: block;
}
/*.lookUpModalTable{ //102CUS モーダルウィンドウのスクロール対応でコメント*/
.lookUpModalTableWrapper{/*102CUS モーダルウィンドウのスクロール対応*/
position: fixed;
background: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 65vh;/*102CUS 高さを指定しているので中身が超えた分はスクロールできるように*/
overflow-y:scroll;/*102CUS 高さを指定しているので中身が超えた分はスクロールできるように*/
}
.lookUpModalTable th,
.lookUpModalTable td{
border: 1px solid #000;
padding: 10px;
}
.lookUpButton{
padding: 5px;
}
.lookUpButtonSpace{
position: absolute;
bottom: 0;
}