close
Examples
Read-only
The example below defines a spreadsheet column or a single cell as read-only.Source code
<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> <p><input type="button" value="Disabled B2" onclick="toggle(this)"></p> <script> var toggle = function(b) { if (worksheets[0].isReadOnly('B2')) { worksheets[0].setReadOnly('B2', false); b.value = 'Disable B2'; } else { worksheets[0].setReadOnly('B2', true); b.value = 'Enable B2'; } } // Set the JSS spreadsheet license jspreadsheet.setLicense('MmVlOTE4Y2EzOTE0OWE5ZTAwZTQyZTM0ZjVjOGQwNDNhZTU2ZTJmNGVkNzkzODA2YmM2N2M1ZDI4YTVjMGZkYjA1MDc4ODQ0ODY0NWY4YzQ2M2NjODY4ZjcxODk4ZTQ0ZTM4YmIzODM3MmQ0MDIzM2Y4MWY5ZDYxZmZiMzk3NzEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTNOakF3TWpJeE5Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0='); // Create a new spreadsheet var worksheets = jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [{ data: [ ['Mazda', 2001, 2000, 1], ['Pegeout', 2010, 5000, 1], ['Honda Fit', 2009, 3000, 1], ['Honda CRV', 2010, 6000, 0], ], columns: [ { type: 'text', title:'Description', width:'200px', readOnly:true, }, { type: 'text', title:'Year', width:'200px' }, { type: 'text', title:'Price', width:'100px', mask:'#.##', }, { type: 'checkbox', title:'Automatic', width:'100px' }, ], }], updateTable: function(worksheet, cell, x, y, source, value, label) { if (x == 2 && y == 2) { cell.classList.add('readonly'); } } }); </script> </html>