JavaScriptで一覧を列固定しようと試みてみたのですが、
以下のスレッドのていくさんと同じ事象が発生しています。
https://developer.cybozu.io/hc/ja/community/posts/360051790871-%E4%B8%80%E8%A6%A7%E7%94%BB%E9%9D%A2%E3%81%A7%E3%81%AE%E5%88%97%E5%9B%BA%E5%AE%9A%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6
①一覧画面の行を固定する。
→右側の編集削除機能が使えなくなる。
②文系男さんの指摘通り、一行コメントアウトする。
→タイトル部分の行が、横スクロールに追従できなくなる。
(function() {
'use strict';
kintone.events.on('app.record.index.show', function() {
var table = document.querySelector('.recordlist-gaia'); // 一覧の要素取得
table.setAttribute("_fixedhead", "rows:1; cols:3"); // rows:固定する行数, cols:固定する列数
//table.innerHTML = table.innerHTML.replace('<thead>', '<tr>').replace('</thead>', '</tr>'); // theadをtrに書き換え
FixedMidashi.create();
});
}());
他の類似スレッドも確認したのですが解決策がでているスレッドが見当たりませんでした。ご支援頂けると大変助かります。
どうやらtheadの要素がなくなると動作しなくなるみたいですね。知らなかったです。
以下のようにtheadを非表示にしてコピーしたtr要素を埋め込むと動作しましたが、編集に入ると高さや幅がフィールドによってずれるのであまり綺麗ではありませんね。
(() => {
'use strict';
kintone.events.on('app.record.index.show', function() {
var table = document.querySelector('.recordlist-gaia');
table.setAttribute("_fixedhead", "rows:1; cols:3");
let thead = document.querySelector('thead');
let theadHTML = table.innerHTML.match(/(?<=<thead>).*?(?=<\/thead>)/)?.[0];
let trHTML = theadHTML.replace('<thead>', '<tr>').replace('</thead>', '</tr>');
thead.insertAdjacentHTML('afterend', trHTML);
thead.style.display = 'none';
FixedMidashi.create();
});
})();
以前回答したスレッド で同じような質問があったので、そちらから一部流用して回答します。以下の方法であれば編集時も保存後も同じように表示しますが、編集→キャンセルのみイベントがないので若干表示が崩れます。
(() => {
'use strict';
kintone.events.on([
'app.record.index.show',
'app.record.index.edit.show',
'app.record.index.edit.submit.success'
], (event) => {
setTimeout(() => {
if (!document.getElementById('view-list-data-gaia').children.length) return;
let th1 = document.getElementsByClassName('recordlist-header-cell-gaia')[0];
let th2 = document.getElementsByClassName('recordlist-header-cell-gaia')[1];
let th3 = document.getElementsByClassName('recordlist-header-cell-gaia')[2];
th1.style.left = '1px';
th2.style.left = `${th1.clientWidth + 2}px`;
th3.style.left = `${th1.clientWidth + th2.clientWidth + 3}px`;
Array.from(document.getElementsByClassName('recordlist-row-gaia')).forEach((row) => {
row.children[0].style.left = '1px';
row.children[1].style.left = `${th1.clientWidth + 2}px`;
row.children[2].style.left = `${th1.clientWidth + th2.clientWidth + 3}px`;
});
}, 0);
return event;
});
})();
#view-list-data-gaia .recordlist-gaia > thead > th{
position: sticky;
top: 48px;
background-color: #FFF;
}
#view-list-data-gaia .recordlist-gaia > thead > th:nth-child(-n+3) {
z-index: 2;
}
#view-list-data-gaia .recordlist-gaia > tbody > tr > td:nth-child(-n+3) {
position: sticky;
z-index: 1;
}
#view-list-data-gaia .recordlist-gaia > tbody > tr:nth-child(2n) > td:nth-child(-n+3) {
background-color: #FFF;
}
#view-list-data-gaia .recordlist-gaia > tbody > tr:nth-child(2n+1) > td:nth-child(-n+3) {
background-color: #F5F5F5;
}
**mls-hashimoto**さん
お世話になっております。年末年始のお忙しい中、ご確認して頂きありがとうございます。両方試させて頂きました。後者の方は編集→キャンセルのみイベントがないとのことでしたが当方の環境では正常に一覧編集画面からキャンセルが正常に実行されていることが確認できました。まずはこちらで検討を進めます。非常に助かりました、ありがとうございます。
system
(system)
クローズされました:
4
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。