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/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" /> <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", "role":"1", "parent":0, "img":"img/nophoto.jpg", "department":1, "extension":"3120", }, { "id":2, "name":"Antonio", "role":"2", "parent":1, "img":"img/nophoto.jpg", "department":2, "extension":"3121", }, { "id":3, "name":"Manoel", "role":"3", "parent":1, "img":"img/nophoto.jpg", "department":2, "extension":"3123", }, { "id":4, "name":"Pedro", "role":"4", "parent":3, "img":"img/nophoto.jpg", "department":2, "extension":"3124", }, { "id":5, "name":"Carlos", "role":"4", "parent":3, "img":"img/nophoto.jpg", "department":3, "extension":"3125", }, { "id":6, "name":"Marcos", "role":"5", "parent":2, "img":"img/nophoto.jpg", "department":3, "extension":"3126", }, { "id":7, "name":"Ana", "role":"6", "parent":2, "img":"img/nophoto.jpg", "department":3, "extension":"3127", }, { "id":8, "name":"Nicolly", "role":"7", "parent":2, "img":"img/nophoto.jpg", "department":4, "extension":"3128", }, { "id":9, "name":"Paulo", "role":"5", "parent":7, "img":"img/nophoto.jpg", "department":4, "extension":"3129", }, { "id":10, "name":"Iris", "role":"5", "parent":7, "img":"img/nophoto.jpg", "department":4, "extension":"3130", } ] // Set the JSS spreadsheet license jspreadsheet.setLicense('NTkwYmQ3YjJjZWQ4MTYxNjM1YTBkMDExNjExZmI3Nzc4NTJkOWRhYWRmY2E3NTc0OWQxYmE3M2QxY2MwZDI4ODI2OGE3ZjgwYWRiZjc4MzcyZDU3MmNiMDBmZDdjNTk2ZTc4ZjE4Y2Y1ZGExMGU1ZWM1NTczYTE4Nzk2ZjQwMTcsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOalV3TVRJM05pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'); // 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>