close
Examples
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/v4/jsuites.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v8/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v4/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('Y2FmMzA4ZTAyZmJkZTM5YWQzNjllYTU0MjU1MjRjYTIyZjczZDdmMWVmYjZlYmI3YTJmM2IzZWEzNDQ3MTYzNDBhYzkxYjE4MWRkMDEzODdjZDU0YzdmMDk1NTI5MzUwMzZjNmMwZTJlNmZhNzEzZGE3ZGE1YmE1OTcwMjdiNjgsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTNOakF3TkRJM05Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0='); // 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>