Custom column type
Jspreadsheet is a powerful grid that gives developers a lot of flexibility. The following example shows how to integrate a third-party clock plugin as a custom column. From version 8, the editor is created once, and it is the same during the entire lifecycle of the application.A custom column based on the clockpicker plugin by weareoutman.
Source code
<html> <script src="https://jspreadsheet.com/v8/jspreadsheet.js"></script> <script src="https://jsuites.net/v5/jsuites.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v8/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" /> <link rel="stylesheet" type="text/css" href="http://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="http://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.js"></script> <div id="custom"></div> <script> var clockEditor = function() { // Create the editor once to persist the whole lifecycle of the spreadsheet var editor = document.createElement('input'); editor.classList.add('jss_object'); editor.type = 'text'; editor.style.width = '100%'; // Close event var closeEvent = null; // Create instance of the clock picker $(editor).clockpicker({ afterDone: function() { closeEvent(); }}); // JSS editor var methods = {}; methods.createCell = function(cell, value, x, y, instance, options) { cell.innerHTML = value; } methods.updateCell = function(cell, value, x, y, instance, options) { if (cell) { cell.innerHTML = value; } } methods.openEditor = function(cell, value, x, y, instance, options) { // Append the clock picker to the input container instance.parent.input.appendChild(editor); // Make sure input container is not editable instance.parent.input.setAttribute('contentEditable', false); // Set the current value editor.value = value; // Focus to open the clock picker editor.focus(); // Make sure JSS object class is set to keep the focus on the spreadsheet if (! document.querySelector('.clockpicker-popover').classList.contains('jss_object')) { document.querySelector('.clockpicker-popover').classList.add('jss_object'); } // Update close event closeEvent = function() { instance.closeEditor(cell, true); } } methods.closeEditor = function(cell, save, x, y, instance, options) { if (save) { cell.innerHTML = editor.value; } else { cell.innerHTML = ''; } // Return value return cell.innerHTML; } return methods; }(); // Set the JSS spreadsheet license jspreadsheet.setLicense('MzExOWYxMDQ4NjQ5NmE0N2U5OTZiMzEzM2JlNWVkYWI2MDk4ZGQ0ZmJhMTg4YTUwZWZjMzkwYzcxNDIyNjJkM2YzYjBiNjBmNmYyYzcxYzU1NzUwYTRkMzhkOTFiMTg2YWY5MDk1YzFjZTBhODA1MjM2YzZhOWIxOGMzZTQ5M2EsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOalE1T1RRNE9Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'); // Create the spreadsheet jspreadsheet(document.getElementById('custom'), { worksheets: [{ data: [ ['PHP', '14:00'], ['Javascript', '16:30'], ], columns: [ { type: 'text', title: 'Course Title', width: '300px' }, { type: clockEditor, title: 'Time', width: '200px' }, ] }] }); </script> </html>