kintoneテーブルのExcelのようにヘッダーを固定したい！

チュン

こんにちは！ 私の名前はチュンです。
株式会社メディアフュージョンでkintone関連製品の開発を担当しているベトナム出身のエンジニアです。
kintoneに興味のある方、kintoneを使っている方に私の蓄積した経験を共有したいと思います。

見積書、注文書、タイムシートなど、多数の行数の表でデータ入力を行う場合、列ヘッダーが隠れてデータの追跡が困難になることがあります。
数量、単価、金額など、同じデータ型のフィールドが近くに配置されていると、列ヘッダーが隠れて、混乱が生じやすくなります。
これにより、確認作業に時間がかかるだけでなく、データ入力ミスが増加し、業務に直接的な影響を与える可能性があります。

この記事では、JavaScriptを使用してExcelで先頭行を固定するようにテーブルの列ヘッダーを固定する方法を説明します。

準備アプリ
次のデータフィールドを含む「注文管理」アプリケーションを作成します。

JavaScriptプログラム
※「JSEdit for kintone」プラグインを使用して、ソースコードを編集します。JSEdit for kintone の画面から jQuery ライブラリを追加し、インストールすることで、HTML 要素のコーディングがより簡単になります。

プログラムの処理流れ
1. テーブル「注文一覧」のHTML要素を見つけます。 kintoneのすべての画面でHTML要素を取得する方法については、私の以前の記事を参考してください。
参考; kintoneの新規・編集レコード画面のフィールドをカスタマイズする裏技

2. JQueryを使用して、テーブル「注文一覧」のHTML要素を固定divタグでラップし、CSSを使用してdivタグ内で垂直スクロールを可能にします。

3. CSSを使用して、テーブル「注文一覧」のヘッダーを固定します。

(() => {
  // 変数 ELEMENT_FIELD_ID をフィールドコードとIDのマッピングとして作成します。
  let FORM_DATA = cybozu.data.page['FORM_DATA'];
  let ELEMENT_FIELD_ID = {};
  let fieldList = FORM_DATA.schema.table.fieldList;
  for (let fieldId of Object.keys(fieldList)) {
    ELEMENT_FIELD_ID[fieldList[fieldId].var] = fieldId;
  }
  for (const subTableId of Object.keys(FORM_DATA.schema.subTable)) {
    ELEMENT_FIELD_ID[FORM_DATA.schema.subTable[subTableId].var] = subTableId;
  }
  // ヘッダーの固定は、レコードの詳細画面、新規作成画面、および編集画面で適用されます。
  kintone.events.on([
    'app.record.detail.show',
    'app.record.create.show',
    'app.record.edit.show'
  ], (event) => {
    
    // 「注文一覧」テーブルのHTML要素を取得します。
    let tableHTML = $(`.subtable-${ELEMENT_FIELD_ID['注文一覧']}`);
    
    // テーブルを囲むための<div>要素を作成し、スクロール用のスタイルを適用します。
    let warpTableHTML = $(`<div>`).css({
      "max-height": "500px",  // 最大高さを500pxに制限します。
      "overflow-x": "hidden", // 横スクロールを無効化します。
      "overflow-y": "scroll"  // 縦スクロールを有効化します。
    });
    
    // 作成した<div>でテーブルをラップ囲みます。
    tableHTML.wrap(warpTableHTML);
    
    // テーブルのヘッダー部分（<thead>）を取得し、スクロール時に固定表示するようにします。
    let headerHtml = tableHTML.find('thead');
    headerHtml.css({
      "position": "sticky", // スクロールしても固定されるようにします。
      "top": "0px",         // 一番上に固定します。
      "z-index": "1"        // 他の要素より前面に表示します。
    });

    return event;
  });
})();

結果

記事を読んでいただきありがとうございます。
次の記事では、ドラッグ＆ドロップで表の行の位置を変更する方法をご説明します。お楽しみにお待ちください!