一覧表で一括更新を可能にする方法

一覧表で、複数レコードのステータスを一括で更新できたら便利だと思いませんか？
標準機能では一つずつ操作する必要がありますが、JavaScriptを活用することで一括操作が可能になります。

本記事では、選択した複数行のステータスを一括で変更できる便利なカスタマイズをご紹介します。

反映イメージ

デモサイトはこちら

上記デモサイトでは、チェックボックスが選択された行のステータスをまとめて更新します。

作業手順1

一括更新用のCSSを設置

一覧表の上部に一括更新パネルを表示させるので、専用のCSSを設置してください。

  <!-- General CSS Files -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

作業手順2

一括更新用のJavaScriptを設置

一括更新パネルの動作を設定するJavaScriptを設置します。

<script>
$(function() {
    // 1. UIの設置
    const batchHtml = `
        <div id="my-batch-panel" style="margin: 10px 0; padding: 10px; background: #f0f0f0; border-radius: 4px; display: flex; align-items: center; gap: 10px; width: 100%; justify-content: center;">
            <input type="button" id="btn-toggle-all" value="全選択 / 解除" class="smp-table-button">
            <span style="margin-left: 20px; font-weight: bold; font-size: 10pt;">選択行のステータスを一括変更:</span>
            <select id="batch-status-select" style="font-size: 10pt;">
                <option value="">-- 選択してください --</option>
                <option value="1">未対応</option>
                <option value="2">確認中</option>
                <option value="3">承認済み</option>
            </select>
            <input type="button" id="btn-apply-batch" value="適用" class="smp-table-button">
        </div>
    `;
    
    // ★ターゲットの判定
    const $target = $('#smp-table-106935').length ? $('#smp-table-106935') : $('.smp-table');
    if ($target.length) {
        $target.before(batchHtml);
    } else {
        $('.mainBody').append(batchHtml);
    }

    // 2. 全選択 / 解除
    $(document).on('click', '#btn-toggle-all', function() {
        const checkboxes = $('.smp-table-check');
        const isAnyUnchecked = checkboxes.filter(':not(:checked)').length > 0;
        checkboxes.each(function() {
            if ($(this).prop('checked') !== isAnyUnchecked) {
                $(this).trigger('click'); 
            }
        });
    });

    // 3. ステータス一括変更
    $(document).on('click', '#btn-apply-batch', function() {
        const selectedValue = $('#batch-status-select').val();
        if (!selectedValue) {
            alert('変更後のステータスを選択してください。');
            return;
        }

        const selectedRows = $('.smp-table-check:checked');
        if (selectedRows.length === 0) {
            alert('対象のデータにチェックを入れてください。');
            return;
        }

        if (confirm(selectedRows.length + ' 件のステータスを一括変更しますか？')) {
            selectedRows.each(function() {
                const row = $(this).closest('tr');
                // name属性に f003577797 が含まれるもの
                const statusSelect = row.find('select[name*="f003577797"]');
                
                if (statusSelect.length) {
                    statusSelect.val(selectedValue);
                    if (window.SpiralTable && SpiralTable.changeBC) {
                        SpiralTable.changeBC(statusSelect[0]);
                    }
                }
            });
            alert('適用しました。「更新」ボタンを押すと保存されます。');
        }
    });
});
</script>

※ 変更が必要な部分
・