いまこういったテーブルを作成していますが、フィールドＢとＣをまとめて項目Ａ、フィールドＤとＥをまとめて項目Ｂとして見られるようにスペースとラベルを利用して表示しています。
横にどんどん長くしていくと、項目Ａの開始位置が左右にずれてしまいうまく表示できません。
そこで、
のようにヘッダーを2段にできないのでしょうか？
ご教示いただけますようお願いいたします。
田川 俊弥 様
こんにちは。
サブテーブルのヘッダーを2段にしてイメージのように実装できるのか？
というところで、取り急ぎ完成イメージ確認用です。
(function() {
'use strict';
kintone.events.on('app.record.detail.show', function(event) {
let el = kintone.app.record.getFieldElement('subTableFieldCode'); // 対象のサブテーブルのフィールドコードを入れる
let newEl = document.createElement('thead');
newEl.innerHTML = '<tr><th bgcolor="#3498db" colspan="3"></th><th bgcolor="orange" colspan="2"><font color="white">項目A</font></th><th bgcolor="purple" colspan="2"><font color="white">項目B</font></th></tr>';
el.insertBefore(newEl, el.firstChild);
});
})();
対象サブテーブルのフィールドコードを入力して確認をしてみて下さい。
新屋育男様
ありがとうございます。うまく表示することができました。
テーブルの行を作成して、それを今のHTMLにはさみこむというところまでは理解できました。
これで表示はうまくいくのですが、このevents.onを[‘app.record.detail.show’,‘app.record.edit.show’, ‘app.record.create.show’]に変更してみても、編集や追加の画面では出ないことがわかりました。
私も調べてみようと思いますが、何かヒントあればまたお願いしたいです。
ご教示いただけますようお願いいたします。
DevToolsなどを利用してHTML要素を見てはいるのですが、編集時と表示時のテーブルヘッダーの違いがなく、こうなってくると何がいけないのかまだまだ勉強不足でわからなくなっています。
田川 俊弥 様
こんにちは。
kintone.app.record.getFieldElement() こちらのAPIですが、使えない画面では null が返るようです。
レコード詳細情報取得 – cybozu developer network
現状としては、作成・編集画面では el の値に null が入っていると思われます。
そうすると非推奨ですが直接 class 等を指定して対応することになるかと思われます。
田川様のアプリ構成などがわからないため、ヒントだけお伝えします。
if(!el) el = document.querySelector('.subtable-gaia');
上記を最初のコードの5行目に追加をして確認をしてみて下さい。
※ let el = kintone.app.record.getFieldElement(‘subTableFieldCode’); の直下に挿入
そうすると、作成・編集画面ではおそらく最初表示されるサブテーブルにコードが適用されると思います。
それ以降のサブテーブルである場合は、『document.querySelectorAll』などを使って調整をお願いいたします。
新屋様
ありがとうございます。
コードを追加してみましたが、編集や追加の画面では何も変化しなくなりました。
対象となるサブテーブルは2つ目なのですが、1つ目のサブテーブルの編集、追加の画面でも変化はありません。
コードは以下の通り書きました。
(function() {
‘use strict’;
kintone.events.on([‘app.record.detail.show’,‘app.record.edit.show’, ‘app.record.create.show’], function(event) {
let el = kintone.app.record.getFieldElement(‘負荷計画テーブル’); // 対象のサブテーブルのフィールドコードを入れる
if(!el) el = document.querySelector(‘.subtable-gaia’);
let newEl = document.createElement(‘thead’);
newEl.innerHTML = ‘<tr><th bgcolor=“#3498db” colspan=“2”></th><th bgcolor=“orange” colspan=“2”><font color=“white”>社内担当</font></th></tr>’;
el.insertBefore(newEl, el.firstChild);
});
})();
2つ目のテーブルをDevToolsでみるとこうなっています。
ご教示いただいたsubtable-gaiaも存在しているので問題ないように見えますが。
もし何かわかりましたらご教示ください。
何分初めてなので、一つ一つ試してはエラーで遅々として進んでいません。
宜しくお願いいたします。
田川 俊弥 様
最初の内容から変更されているのでなんともですが、田川様の修正後のご提示頂いたコードを検証しましたが特に問題はございませんでした。
今回のコードは、テーブル直下に thead を新たに追加するように記述しております。
ですので、table の class=‘subtable-gaia’ の要素を利用しております。
気になる記述があるので少し質問させて頂ければと思います。
＞コードを追加してみましたが、編集や追加の画面では何も変化しなくなりました。
以前は変化されていたということでしょうか？
＞対象となるサブテーブルは2つ目なのですが、1つ目のサブテーブルの編集、追加の画面でも変化はありません。
こちら＜1つ目のサブテーブルの編集、追加の画面でも．．．＞とありますが、エラーなどは出ていますでしょうか？
また、変数 el の値は null となっておりますでしょうか？
ご確認を宜しくお願い致します。
新屋育男様
お世話になっております。当方の環境がおかしくなってきたのかと考え、再度テストでサブテーブルを２つ作成したアプリに記述してみたところ、一覧画面では指定の（サブテーブルのフィールドコードを入れた）場所に表示され、編集画面では最初の(一番目の）サブテーブルの場所に表示されました。
もう一度テスト環境に投入して実践してみます。
何かとお手数をおかけして申し訳ありません。
ありがとうございます。
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。