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