close
Documentation
Editors
Jspreadsheet editors will enhance the user experience and transform any application into a powerful data management tool. There are several native editors and the developer can create or integrate plugins to create new custom data editors. The current native editors are:text, numeric, hidden, dropdown, checkbox, radio, calendar, image, color, email, url, progressbar, rating, autonumber, HTML, percent and notes.
Custom editor
A custom editor requires the implementation of five different methods, as described in the table below:Method | Description |
---|---|
createCell | When a new cell is created.createCell(cell: Object, value: Any, x: Number, y: Number, instance: Object, options: Object) : void |
updateCell | When the cell value changes.updateCell(cell: Object, value: Any, x: Number, y: Number, instance: Object, options: Object) : void |
openEditor | When the user starts editing a cell.openEditor(cell: Object, value: Any, x: Number, y: Number, instance: Object, options: Object) : void |
closeEditor | When the user finalizes the edit of a cell.closeEditor(cell: Object, confirmChanges: Boolean, x: Number, y: Number, instance: Object, options: Object) : void |
destroyCell | When a cell is destroyed.destroyCell(cell: Object, x: Number, y: Number, instance: Object) : void |
get | Transform the raw data into processed data. It will show text instead of an id in the type dropdown, for example.get(options: Object, value: Any) : processedValue |
Custom editor
The following example implements a simple custom data editor.var percent = function() { var methods = {}; methods.updateCell = function(cell, value, x, y, instance) { value = Number(value) || 0; if (cell) { cell.innerText = value + '%'; } return value / 100; } methods.createCell = methods.updateCell; methods.openEditor = function(cell, value, x, y, instance) { instance.parent.input.onblur = function() { instance.closeEditor(cell, true); } if (value) { instance.parent.input.innerText = (Number(value)) * 100; } jSuites.focus(instance.parent.input); } methods.closeEditor = function(cell, save, x, y, instance) { if (save) { var value = Number(instance.parent.input.innerText); } else { var value = ''; } return value; } methods.get = function(options, val) { return (val * 100) + '%'; } return methods; }();More source code examples can be found at https://github.com/jspreadsheet/editors
Using a custom editor
Considering the percent editor above, thecolumn.type
defines a native or custom editor, as follows:var data = [ ['PHP', '1'], ['Javascript', '0.4'], ]; // Set your JSS license key (The following key only works for one day) jspreadsheet.setLicense('NjU3Y2Y5ZmFiZGNmMzU1ZThlYzI1ODMyNzU1YjA2M2I4MjU1YWIxNTJkNzI3MzhjNGE5NjYwMTUxYWMzMzkxMGI3ZmIxNGJjOGQ1MjY0M2U1YzU1ZjMzOTk2NGExMDQzNzBmNGIwZTYxZDk0MTgyOTQ2MzdkOGY0YTdkYjRkNTksZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTJNREk0TlRrME55d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0='); // Create a new spreadsheet jspreadsheet(document.getElementById('spreadsheet'), { data: data, columns: [ { type: 'text', title: 'Course Title', width: '300px' }, { type: percent, title: 'Percent', width: '200px' }, ] });
A custom editor using react
You can create a custom editor using react. A working exampleEditors on the cell level Pro
Using the Pro distribution, it is possible to overwrite the column configuration at a cell level using the propertycells
as shown below:<html> <script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v9/jspreadsheet.css" type="text/css" /> <script src="https://jsuites.net/v4/jsuites.js"></script> <link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" /> <div id="spreadsheet"></div> <script> // Set your JSS license key (The following key only works for one day) jspreadsheet.setLicense('NjU3Y2Y5ZmFiZGNmMzU1ZThlYzI1ODMyNzU1YjA2M2I4MjU1YWIxNTJkNzI3MzhjNGE5NjYwMTUxYWMzMzkxMGI3ZmIxNGJjOGQ1MjY0M2U1YzU1ZjMzOTk2NGExMDQzNzBmNGIwZTYxZDk0MTgyOTQ2MzdkOGY0YTdkYjRkNTksZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTJNREk0TlRrME55d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0='); // Create a new spreadsheet jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [{ minDimensions: [5,5], cells: { A1: { type:percent } } }] }); </script> </html>
Examples
Basic example using multiple different editors.<html> <script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v9/jspreadsheet.css" type="text/css" /> <script src="https://jsuites.net/v4/jsuites.js"></script> <link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" /> <div id="spreadsheet"></div> <script> // Set your JSS license key (The following key only works for one day) jspreadsheet.setLicense('NjU3Y2Y5ZmFiZGNmMzU1ZThlYzI1ODMyNzU1YjA2M2I4MjU1YWIxNTJkNzI3MzhjNGE5NjYwMTUxYWMzMzkxMGI3ZmIxNGJjOGQ1MjY0M2U1YzU1ZjMzOTk2NGExMDQzNzBmNGIwZTYxZDk0MTgyOTQ2MzdkOGY0YTdkYjRkNTksZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTJNREk0TlRrME55d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0='); // Create the spreadsheet jspreadsheet(document.getElementById('spreadsheet'), { data: [ ['Jazz', 'Honda', '2019-02-12', '/templates/v9/img/nophoto.jpg', true, 2000.00, '#777700'], ['Civic', 'Honda', '2018-07-11', '/templates/v9/img/nophoto.jpg', true, 4000.01, '#007777'], ], filters: true, columns: [ { type:'text', title:'Car', width:120 }, { type: 'dropdown', title:'Make', width:180, source:[ "Alfa Romeo", "Audi", "Bmw", "Chevrolet", "Chrystler", "Dodge", "Ferrari", "Fiat", "Ford", "Honda", "Hyundai", "Jaguar", "Jeep", "Kia", "Mazda", "Mercedez-Benz", "Mitsubish", "Nissan", "Peugeot", "Porsche", "Subaru", "Suzuki", "Toyota", "Volkswagen" ] }, { type: 'calendar', title:'Available', width:120, options:{ format:'DD/MM/YYYY' } }, { type: 'image', title:'Photo', width:120 }, { type: 'checkbox', title:'Stock', width:80 }, { type: 'text', title:'Price', mask:'$ #.##0,00', width:100, decimal:',', disabledMaskOnEdition: true }, { type: 'color', width:100, render:'square', }, ] }); </script> </html>
Inline spreadsheet action button
<html> <script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v9/jspreadsheet.css" type="text/css" /> <script src="https://jsuites.net/v4/jsuites.js"></script> <link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" /> <div id="spreadsheet"></div> <script> var action = function() { var methods = {}; methods.createCell = function(cell, value, x, y, instance, options) { var input = document.createElement('i'); input.className = 'material-icons'; input.style.cursor = 'pointer'; input.style.fontSize = '22px'; input.innerHTML = "search"; input.onclick = function() { var id = instance.getRowId(y); // Do some action alert(id); } cell.appendChild(input); } return methods; }(); // Set your JSS license key (The following key only works for one day) jspreadsheet.setLicense('NjU3Y2Y5ZmFiZGNmMzU1ZThlYzI1ODMyNzU1YjA2M2I4MjU1YWIxNTJkNzI3MzhjNGE5NjYwMTUxYWMzMzkxMGI3ZmIxNGJjOGQ1MjY0M2U1YzU1ZjMzOTk2NGExMDQzNzBmNGIwZTYxZDk0MTgyOTQ2MzdkOGY0YTdkYjRkNTksZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTJNREk0TlRrME55d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0='); // Create a new spreadsheet jspreadsheet(document.getElementById('spreadsheet'), { data: [ { id:'1', data:['Google', '5', ''] }, { id:'2', data:['Bind', '4', ''] }, { id:'3', data:['Yahoo', '1', ''] }, { id:'4', data:['Duckduckgo', '5', ''] }, ], columns: [ { type: 'text', width:'400px' }, { type: 'rating', width:'100px' }, { type: action, width:'100px', readOnly: true }, ], }); </script> </html>