Tag Archive form

Byphunsanit

Tabulator: form.rowSelection

ตัว UI ที่ใช้กันบ่อย ๆ คือ table list ในฟอร์มที่จะมี checkbox ให้ selected เลือกข้อมูลในแถวที่ต้องการ จะแถวเดียว หรือหลายเรคคอร์ด select all, deselect all เขียนกับ Tabulator ได้เหมือนกัน แล้วเอาที่เลือกไว้ไปใช้ต่อ
Tabulator/form.rowSelection.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabulator: form.rowSelection</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/6.3.1/css/tabulator.min.css" rel="stylesheet" />
</head>

<body>
    <form id="formA" method="post">
        <label>Date From: <input name="date_from" type="date"></label>
        <label>Date To: <input name="date_to" type="date"></label>
        <div id="tabulator-table"></div>
        <button type="submit">Submit</button>
    </form>
    <button type="button" id="show-local-storage">View Local Storage</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/6.3.1/js/tabulator.min.js"></script>

    <script src="../assets/javascript.form.helper.js"></script>

    <script src="assets/Tabulator.helper.form.rowSelection.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const form = document.querySelector('#formA');

            // Tabulator row selection name
            const tableRowSelectName = 'items';

            // tabulator table instance
            const table = new Tabulator("#tabulator-table", {
                ajaxURL: "../assets/ISO-4217.json",
                ajaxConfig: "GET",
                selectable: true,
                columns: [
                    {
                        cellClick: (e, cell) => cell.getRow().toggleSelect(),
                        formatter: "rowSelection",
                        headerClick: (e, column) => {
                            const tableInstance = column.getTable();
                            const allRows = tableInstance.getRows();
                            const allSelected = allRows.every(row => row.isSelected());
                            if (allSelected) {
                                allRows.forEach(row => row.deselect());
                            } else {
                                allRows.forEach(row => row.select());
                            }
                        },
                        headerSort: false,
                        hozAlign: "center",
                        titleFormatter: "rowSelection",
                        width: 80
                    },
                    { field: "code", title: "Code", width: 80 },
                    { field: "currency", title: "Currency" },
                    { field: "digits", title: "Digits", width: 80 },
                    { field: "numeric", title: "Numeric", width: 80 },
                    { field: "locations", title: "Locations" }
                ],
                layout: "fitColumns",
                pagination: true,
                paginationMode: "local",
                paginationSize: 10,
            });

            // tabulator event listeners for saving form data
            table.on("cellEdited", () => {
                TabulatorCacheDataToLocalStorage(form, table, tableRowSelectName);
            });

            table.on("pageLoaded", () => {
                // When the page loads, we get the up-to-date selected data
                TabulatorCacheDataToLocalStorage(form, table, tableRowSelectName);
            });

            table.on("rowAdded", () => {
                TabulatorCacheDataToLocalStorage(form, table, tableRowSelectName);
            });

            table.on("rowSelectionChanged", () => {
                TabulatorCacheDataToLocalStorage(form, table, tableRowSelectName);
            });

            // form event for input changes
            form.addEventListener('input', () => {
                TabulatorCacheDataToLocalStorage(form, table, tableRowSelectName);
            });

            // form event form submission
            form.addEventListener('submit', event => {
                event.preventDefault();
                TabulatorCacheDataToLocalStorage(form, table, tableRowSelectName);
            });

            // for debugging
            document.getElementById('show-local-storage').addEventListener('click', () => {
                const savedData = localStorage.getItem('forms');
                if (savedData) {
                    alert('form_data\n' + savedData);
                } else {
                    alert('No form_data found in localStorage');
                }
            });
        });
    </script>
</body>

</html>

และทำตัว helper ที่ใช้ซ้ำ ๆ ไว้ที่
Tabulator/assets/Tabulator.helper.form.rowSelection.js

// function to cache form data to localStorage
function TabulatorCacheDataToLocalStorage(form, table, tableRowSelectName) {
    const currentLocalStorage = JSON.parse(localStorage.getItem('forms') || '{}');
    const formData = new FormData(form);
    const collectedData = formDataCollected(form);
    const dynamicKeys = [];

    // Get the definitive list of selected items from Tabulator
    const selectedTabulatorItems = table.getSelectedData().map(row => row.code);

    // Set the Tabulator items directly. Do not merge.
    collectedData[tableRowSelectName] = selectedTabulatorItems;
    if (!dynamicKeys.includes(tableRowSelectName)) {
        dynamicKeys.push(tableRowSelectName);
    }

    // Update the dynamic key list
    collectedData['_inputDynamic'] = dynamicKeys;

    // Merge the collected data into localStorage
    for (const [key, value] of Object.entries(collectedData)) {
        // For dynamic arrays, check if the key is 'items'.
        if (Array.isArray(value) && key === tableRowSelectName) {
            currentLocalStorage[key] = value; // Replace the old array with the new one
        } else if (Array.isArray(value)) {
            // Merge other dynamic arrays
            currentLocalStorage[key] = mergeArraysUnique(currentLocalStorage[key], value);
        } else {
            currentLocalStorage[key] = value;
        }
    }

    // Clean up dynamic arrays that are no longer in the form
    const previouslyDynamicKeys = currentLocalStorage['_inputDynamic'] || [];
    for (const key of previouslyDynamicKeys) {
        if (!collectedData[key] || (Array.isArray(collectedData[key]) && collectedData[key].length === 0)) {
            delete currentLocalStorage[key];
        }
    }
    currentLocalStorage['_inputDynamic'] = dynamicKeys;

    localStorage.setItem('forms', JSON.stringify(currentLocalStorage));
    console.log('Form data cached:', currentLocalStorage);
}

สาเหตุที่ data จะต้องถูกเก็บไว้ใน Local storage เพราะเวลาที่เปลี่ยน pagination ตัว input จะหายไป โดน render ทับ