close
Advanced Examples
Project management spreadsheet
A simple online task management spreadsheet.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> <script> // Set the JSS spreadsheet license jspreadsheet.setLicense('YjM0MGEwZTJmNTI3NGI0MDk2MWNlMDk5ZWEyYmRmZDA2YmMyY2E4NTY5NzQ0NzVmNTQ3NzViMGRhY2ExNzMwOThkMWNjNTYwYmNkOWEyZTQ2YmVlOWM2NTg5NGYxNjc0OTVmMjcxYjgwNGNmMmJiMzI2YzNlYjVjNjFkN2VlYmMsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTNOVGs1TmprMU1pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0='); // Create the spreadsheet var spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [{ data: [ [ '=B1', '2', 'New products section', '2019-02-12', '80' ], [ '=B2', '2', 'API integration', '2019-03-01', '100' ], [ '=B3', '4', 'Deck', '2018-11-10', '30' ], [ '=B4', '2', 'Prototype', '2019-01-12', '0' ], ], columns: [ { type: 'text', width: '60px', title: 'Photo', readOnly: true }, { type: 'dropdown', width: '140px', title: 'Name', source: [{ id: '2', name: 'Jorge' }, { id: '4', name: 'Paul' }] }, { type: 'text', width: '200px', title: 'Task' }, { type: 'calendar', width: '100px', title: 'When' }, { type: 'progressbar', width: '200px', title: '%' }, ], }], updateTable: function(instance, cell, col, row, val, label, cellName) { if (col == 0) { var n = instance.options.data[row][col+1]; if (n) { var tmp = '<img src="/templates/v8/img/' + n + '.jpg" class="users-small" />'; } else { var tmp = '<img src="/templates/v8/img/nophoto.jpg" class="users-small" />'; } // Only update when the content is different if (cell.innerHTML != tmp) { cell.innerHTML = tmp; } } }, }); </script> </html>