kintoneでテーブルの行をドラッグ＆ドロップで並び替える(パート1)

2025.04.28 2025.05.14

チュン

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

テーブル内の行の順序を並べ替えて整理したいことはよくあります。行の並び順は、単なる形式的な問題ではなく、ユーザーがデータを管理や処理する際に影響します。
よくあるケースとして、ユーザーは重要な行を上に優先表示したり、あるいは単に既存にあるドキュメントと一致するように順序を変更したりします。
ただ、kintone のテーブルでは、行の追加または削除のみが可能で、Excel で操作するような行の移動方法はありません。
ユーザーが希望する順序で強引に並べ替えようとすると、行を一旦削除して再入力する必要があります。このため、入力作業中に混乱やミスが発生しやすくなります。

この記事では、JavaScript を使用して、Excel のようにテーブル内で行をドラッグ＆ドロップする方法を説明します。

準備アプリ
前回の記事で作成した「注文管理」アプリを再利用します。
参考; kintoneテーブルのExcelのようにヘッダーを固定したい！

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

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

(() => {
   // 変数 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.create.show', 'app.record.edit.show'
  ], (event) => {
    let tableHTML = $(`.subtable-${ELEMENT_FIELD_ID['注文一覧']}`);    
    // jQuery UIのsortable機能を適用（ドラッグ＆ドロップ可能にする）
    tableHTML.sortable({
      items: "tr",          // 各テーブル行を対象に
      cursor: "move",       // カーソルを移動アイコンに
      axis: "y",            // 縦方向のみ移動可能
      // ドラッグ開始時の処理
      start: function(event, ui) {
        // 選択行にスタイル適用（視覚的にわかりやすくする）
        ui.item.css({
          "background-color": "#fff9c4",
          "box-shadow": "0 4px 10px rgba(0, 0, 0, 0.2)"
        });
      },

      // ドラッグ終了時の処理
      stop: function(event, ui) {
        // スタイルをリセット
        ui.item.css({
          "background-color": "",
          "box-shadow": ""
        });
      }
    });
    return event;
  });
})();

結果