Spreadsheet
In the following example, the data variable will be automatically updated when the cell value changes.The following content will be the content of the data variable.
Source code
<html> <script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script> <script src="https://jsuites.net/v5/jsuites.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v9/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" /> <div id="spreadsheet"></div> <textarea id='console'></textarea><br> <input type='button' value='Get the content of the data variable' onclick="document.getElementById('console').value = JSON.stringify(data)"> <script> var data = [ { "id":1, "name":"Jorge", "img":"img/nophoto.jpg", "department":"Marketing", "extension":"3120", }, { "id":2, "name":"Antonio", "img":"img/nophoto.jpg", "department":"Marketing", "extension":"3121", }, { "id":3, "name":"Manoel", "img":"img/nophoto.jpg", "department":"Marketing", "extension":"3123", }, { "id":4, "name":"Pedro", "img":"img/nophoto.jpg", "department":"Marketing", "extension":"3124", }, { "id":5, "name":"Carlos", "img":"img/nophoto.jpg", "department":"Marketing", "extension":"3125", }, ]; // Set your JSS license key (The following key only works for one day) jspreadsheet.setLicense('YjRlMDVkYjJlMDRlZjZhYTQyY2U1YWNiNjQwNWUzNjUyYzcyNTAwZDllMWVkZDBjOTU4YjMyMTAwYzM5NDFlYzM1ZGRjNzY0NDljMzc1YzgyODkwMGU5YWM1M2I0YWRhNDFlYTg2MzFhZDkyM2ZjZTI2ZWEwZmE5MTFkZjg0OTUsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TXpNeU5Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'); // Create the spreadsheet jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [{ data: data, minDimensions: [6, 5], worksheetName: 'Employees', columnDrag: false, columns: [ { title: 'Id', type: 'autonumber', name: 'id', readOnly: true, primaryKey: true, }, { title: 'Name', type: 'text', name: 'name', width: '140px', }, { title: 'Photo', type: 'image', name: 'img', width: '80px', render: 'round', }, { title: 'Role', type: 'record', name: 'role', width: '180px', worksheetId: 'roles', worksheetColumn: 1, }, { title: 'Department', type: 'record', name: 'department', width: '180px', worksheetId: 'departments', }, { title: 'Manager', type: 'record', name: 'parent', width: '100px', worksheetId: 'employees', worksheetColumn: 1, }, { title: 'Extension', name: 'extension', width: '80px' }, ], }] }); </script> </html>