Tabulator: form.rowSelection – PlusMagi's Blog By Pitt Phunsanit

ตัว 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 ทับ

ป้ายกำกับ:checkbox, Form, List, Selected, Tabulator, ฟอร์ม, ลิสต์, เลือก