Data Persistence
With the persistence directive, each change in the data will be sent to a remote URL.
<html>
<script src="https://jspreadsheet.com/v7/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v7/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<div id="spreadsheet"></div>
<script>
let mySpreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
url:'/jspreadsheet/books.json',
columns: [
{
type: 'autonumber',
width: '50px',
title: 'Code',
name: 'id',
readOnly: true,
primaryKey: true
},
{
type: 'text',
width: '80px',
title:'Image',
name:'thumbnailUrl'
},
{
type: 'text',
width: '200px',
title:'Title',
name:'title'
},
{
type: 'text',
width: '55px',
title:'Pages',
name:'pageCount'
},
{
type: 'calendar',
width: '90px',
title:'Published',
name: 'publishedDate'
},
{
type: 'text',
width: '200px',
title:'Author',
name:'authors'
},
{
type: 'dropdown',
width: '180px',
title:'Categories',
name:'categories',
source:['Internet','Web Development', 'Java', 'Mobile', 'Open Source'],
multiple:true
},
],
allowComments:true,
persistance: '/jspreadsheet/save',
updateTable: function(instance, cell, col, row, val, label, cellName) {
if (col == 1) {
if (! val) {
cell.innerHTML = '<img src="https://images-na.ssl-images-amazon.com/images/I/21%2Bwfxx2lyL._SX319_BO1,204,203,200_.jpg" style="width:60px;">';
} else {
cell.innerHTML = '<img src="' + val + '" style="width:60px;">';
}
}
cell.style.overflow = 'hidden';
},
onevent:function() {
console.log(arguments);
},
license: 'MjllODVjYWM1ZjZlMDlkN2Q5Y2M5OGIzOTE5ZWZkZmU3NmNjZWZkYTU4YzJhZmYzNDJmNDlmMjM3ODJjNjFiMGI0Yzc3OGU2ZDcxYTU1NDgwYTk5NDVjMTJhYjlkMTE3ZWE5MjYwNzIxM2I2NjE2MTcwOWFiNThmYTc4ZmJhYmIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeE5UWTFOalF5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==',
});
</script>
</html>