Persistence
Jspreadsheet is a frontend tool with methods, events, and other features to help with backend data persistence. This section covers the following topics:
- Posting data to a remote server;
- Dealing with record IDs synchronization and sequences;
- Backend persistence in PHP example;
- Using plugins for data persistence.
Features
Internal row id
JSS provides a property that enables you to attach a unique ID to your rows, aiding in synchronizing data with an external database. This property helps to identify the record to update with each AJAX call.
Sequence
Jspreadsheet implements an internal sequence for each worksheet that automatically increments and assigns a value to a row when no record ID is defined. That enables the user to programmatically set and retrieve IDs for a given row, providing greater flexibility in managing the data in the worksheet.
Documentation
Methods
Method |
Description |
getNextSequence |
Get the next sequence number.
getNextSequence() : void |
getRowId |
Get the row ID from a row number given.
getRowId(rowNumber: Number) : void |
setRowId |
Set the row ID from a row number given.
setRowId(rowNumber: Number, rowId: Number) : void |
getRowById |
Get the data from a row, or the row object by id.
getRowById(rowNumber: Number, element: Boolean) : any |
save |
Internal method to post a request to the server. The callback is executed when the backend returns a JSON
save(url: String, data: Any, token: String, callback: Function) : void |
Events
Events provide the most effective means of customizing the persistence behavior in the JSS data grid. They can be utilized to intercept, modify, or prevent user actions.
Event |
Description |
onbeforesave |
Executed before a server update request.
onbeforesave(spreadsheet: Object, worksheet: Object, data: Object) : Object It will return false to cancel the event or the replacement for the original data. Data is the information about the event that requires server persistence. |
onsave |
It will bring information about the server update request.
onsave(spreadsheet: Object, worksheet: Object, data: Object, result, Object) : void |
Settings
Property |
Description |
On the spreadsheet configuration level |
|
server: string |
URL for the server persistence requests. A global URL for all worksheets. |
On the worksheet configuration level |
|
persistence: string |
URL for the server persistence requests. One URL for each worksheet. |
columns.primaryKey: boolean |
The primaryKey defines which column will be considered the ID for the records. |
rows.id: number |
Define the ID for the row |
Examples
Posting data to a remote server
When the persistence
property is set to true, an AJAX request will occur for each update made to the spreadsheet.
<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<div id="spreadsheet"></div>
<script>
jspreadsheet.setLicense('MzVmMGRkZDcyMGJiMmJiZjllNjM5NmZkY2Y0ZDlkZjNkNTc4YWM2NjE4MTcxMDllNjNhMzJkYmYxNGUxMGIwZmQ2YzE2YTE0M2ExN2U0N2JmNzBmZjZhMWE3YWVhZjc4ZTI3YmUwZmI2MWE3ZDY4NmMxNjY2MTNjOWU2NDhmOTEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9USXpNRGt6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
url: '/jspreadsheet/books.json',
columns: [
{
type: 'autonumber',
width: '50px',
title: 'Code',
name: 'id',
readOnly: true,
primaryKey: true
},
{
type: 'image',
width: '80px',
title: 'Image',
name: 'thumbnailUrl',
render: function(cell, val, col, row) {
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;" />';
}
}
},
{
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,
render: 'tag'
},
],
allowComments:true,
search: true,
persistence: '/jspreadsheet/save',
}]
});
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
const license = 'MzVmMGRkZDcyMGJiMmJiZjllNjM5NmZkY2Y0ZDlkZjNkNTc4YWM2NjE4MTcxMDllNjNhMzJkYmYxNGUxMGIwZmQ2YzE2YTE0M2ExN2U0N2JmNzBmZjZhMWE3YWVhZjc4ZTI3YmUwZmI2MWE3ZDY4NmMxNjY2MTNjOWU2NDhmOTEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9USXpNRGt6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default function App() {
const columns = [{
type: 'autonumber',
width: '50px',
title: 'Code',
name: 'id',
readOnly: true,
primaryKey: true
},
{
type: 'image',
width: '80px',
title: 'Image',
name: 'thumbnailUrl',
render: function(cell, val, col, row) {
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;" />';
}
}
},
{ 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, render: 'tag' }
];
return (
<Spreadsheet ref={spreadsheet} license={license}>
<Worksheet
url="/jspreadsheet/books.json"
columns={columns}
search
persistence="/jspreadsheet/save" />
</Spreadsheet>
);
}
<template>
<Spreadsheet ref="spreadsheet" :license="license">
<Worksheet :columns="columns"
url="/jspreadsheet/books.json"
search
persistence="/jspreadsheet/save" />
</Spreadsheet>
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
const license = 'MzVmMGRkZDcyMGJiMmJiZjllNjM5NmZkY2Y0ZDlkZjNkNTc4YWM2NjE4MTcxMDllNjNhMzJkYmYxNGUxMGIwZmQ2YzE2YTE0M2ExN2U0N2JmNzBmZjZhMWE3YWVhZjc4ZTI3YmUwZmI2MWE3ZDY4NmMxNjY2MTNjOWU2NDhmOTEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9USXpNRGt6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default {
components: {
Spreadsheet,
Worksheet,
},
data() {
const columns = [
{
type: 'autonumber',
width: '50px',
title: 'Code',
name: 'id',
readOnly: true,
primaryKey: true
},
{
type: 'image',
width: '80px',
title: 'Image',
name: 'thumbnailUrl',
render: function(cell, val, col, row) {
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;" />';
}
}
},
{ 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, render: 'tag' }
];
return {
columns,
license,
};
}
}
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"
jspreadsheet.setLicense('MzVmMGRkZDcyMGJiMmJiZjllNjM5NmZkY2Y0ZDlkZjNkNTc4YWM2NjE4MTcxMDllNjNhMzJkYmYxNGUxMGIwZmQ2YzE2YTE0M2ExN2U0N2JmNzBmZjZhMWE3YWVhZjc4ZTI3YmUwZmI2MWE3ZDY4NmMxNjY2MTNjOWU2NDhmOTEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9USXpNRGt6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
@Component({
selector: "app-root",
template: `<div #spreadsheet></div>`
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
worksheets: jspreadsheet.worksheetInstance[];
ngAfterViewInit() {
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
url: '/jspreadsheet/books.json',
columns: [
{
type: 'autonumber',
width: '50px',
title: 'Code',
name: 'id',
readOnly: true,
primaryKey: true
},
{
type: 'image',
width: '80px',
title: 'Image',
name: 'thumbnailUrl',
render: function(cell, val, col, row) {
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;" />';
}
}
},
{
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,
render: 'tag'
},
],
allowComments:true,
search: true,
persistence: '/jspreadsheet/save',
});
}
}
Database ID synchronization and sequences
The following example demonstrates several concepts related to record ID synchronization and sequences in Jspreadsheet:
- Loading data with hidden IDs for the user;
- Creating a custom column with an icon to perform actions using the record ID
- Obtaining the record ID from a remote server when a new row is added.
NOTE: the example shows one new line, but you can interact to get more ids if more than one row is added.
|
---|
1 | Google | starstarstarstarstar | search |
2 | Bing | starstarstarstar | search |
3 | Yahoo | star | search |
4 | Duckduckgo | starstarstarstarstar | search |
<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<div id="spreadsheet"></div>
<script>
let action = function() {
let methods = {};
methods.createCell = function(cell, value, x, y, instance, options) {
let input = document.createElement('i');
input.className = 'material-icons';
input.style.cursor = 'pointer';
input.style.fontSize = '22px';
input.innerHTML = "search";
input.onclick = function() {
let id = instance.getRowId(y);
alert(id);
}
cell.appendChild(input);
cell.classList.add('readonly');
}
return methods;
}();
jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
data: [
{ id:1, data:['Google', '5', ''] },
{ id:2, data:['Bing', '4', ''] },
{ id:3, data:['Yahoo', '1', ''] },
{ id:4, data:['Duckduckgo', '5', ''] },
],
columns: [
{ type: 'text', width:'400px' },
{ type: 'rating', width:'100px' },
{ type: action, width:'100px' },
],
persistence: '/jspreadsheet/save',
}],
oninsertrow: function(a,b,c,d,e) {
let rowNumber = e == false ? b + 1 : b;
jSuites.ajax({
url: '/jspreadsheet/id',
method: 'GET',
dataType: 'json',
success: function(result) {
alert('The new row has id: ' + result);
a.setRowId(rowNumber, result);
}
})
}
});
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
import jSuites from "jsuites";
const license = 'MzVmMGRkZDcyMGJiMmJiZjllNjM5NmZkY2Y0ZDlkZjNkNTc4YWM2NjE4MTcxMDllNjNhMzJkYmYxNGUxMGIwZmQ2YzE2YTE0M2ExN2U0N2JmNzBmZjZhMWE3YWVhZjc4ZTI3YmUwZmI2MWE3ZDY4NmMxNjY2MTNjOWU2NDhmOTEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9USXpNRGt6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
const action = function() {
const methods = {};
methods.createCell = function(cell, value, x, y, instance, options) {
let input = document.createElement('i');
input.className = 'material-icons';
input.style.cursor = 'pointer';
input.style.fontSize = '22px';
input.innerHTML = "search";
input.onclick = function() {
let id = instance.getRowId(y);
alert(id);
}
cell.appendChild(input);
cell.classList.add('readonly');
}
return methods;
}();
export default function App() {
const data = [
{ id:1, data:['Google', '5', ''] },
{ id:2, data:['Bing', '4', ''] },
{ id:3, data:['Yahoo', '1', ''] },
{ id:4, data:['Duckduckgo', '5', ''] },
];
const oninsertrow = (a,b,c,d,e) => {
let rowNumber = e == false ? b + 1 : b;
jSuites.ajax({
url: '/jspreadsheet/id',
method: 'GET',
dataType: 'json',
success: function(result) {
alert('The new row has id: ' + result);
a.setRowId(rowNumber, result);
}
})
}
const columns = [
{ type: 'text', width:'400px' },
{ type: 'rating', width:'100px' },
{ type: action, width:'100px' },
];
return (
<Spreadsheet ref={spreadsheet} license={license} oninsertrow={oninsertrow}>
<Worksheet data={data} persistence="/jspreadsheet/save" columns={columns} />
</Spreadsheet>
);
}
<template>
<Spreadsheet ref="spreadsheet" :license="license" :oninsertrow="oninsertrow">
<Worksheet :data="data" :columns="columns" />
</Spreadsheet>
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
import jSuites from "jsuites";
const license = 'MzVmMGRkZDcyMGJiMmJiZjllNjM5NmZkY2Y0ZDlkZjNkNTc4YWM2NjE4MTcxMDllNjNhMzJkYmYxNGUxMGIwZmQ2YzE2YTE0M2ExN2U0N2JmNzBmZjZhMWE3YWVhZjc4ZTI3YmUwZmI2MWE3ZDY4NmMxNjY2MTNjOWU2NDhmOTEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9USXpNRGt6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
const action = function() {
const methods = {};
methods.createCell = function(cell, value, x, y, instance, options) {
let input = document.createElement('i');
input.className = 'material-icons';
input.style.cursor = 'pointer';
input.style.fontSize = '22px';
input.innerHTML = "search";
input.onclick = function() {
let id = instance.getRowId(y);
alert(id);
}
cell.appendChild(input);
cell.classList.add('readonly');
}
return methods;
}();
export default {
components: {
Spreadsheet,
Worksheet,
},
methods {
oninsertrow(a,b,c,d,e) {
let rowNumber = e == false ? b + 1 : b;
jSuites.ajax({
url: '/jspreadsheet/id',
method: 'GET',
dataType: 'json',
success: function(result) {
alert('The new row has id: ' + result);
a.setRowId(rowNumber, result);
}
})
}
},
data() {
const data = [
{ id:1, data:['Google', '5', ''] },
{ id:2, data:['Bing', '4', ''] },
{ id:3, data:['Yahoo', '1', ''] },
{ id:4, data:['Duckduckgo', '5', ''] },
];
const columns = [
{ type: 'text', width:'400px' },
{ type: 'rating', width:'100px' },
{ type: action, width:'100px' },
];
return {
data,
columns,
license,
};
}
}
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"
jspreadsheet.setLicense('MzVmMGRkZDcyMGJiMmJiZjllNjM5NmZkY2Y0ZDlkZjNkNTc4YWM2NjE4MTcxMDllNjNhMzJkYmYxNGUxMGIwZmQ2YzE2YTE0M2ExN2U0N2JmNzBmZjZhMWE3YWVhZjc4ZTI3YmUwZmI2MWE3ZDY4NmMxNjY2MTNjOWU2NDhmOTEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRek9USXpNRGt6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
const action = function() {
let methods = {};
methods.createCell = (cell, value, x, y, instance, options) => {
let input = document.createElement('i');
input.className = 'material-icons';
input.style.cursor = 'pointer';
input.style.fontSize = '22px';
input.innerHTML = "search";
input.onclick = function() {
let id = instance.getRowId(y);
alert(id);
}
cell.appendChild(input);
cell.classList.add('readonly');
}
return methods;
}();
@Component({
selector: "app-root",
template: `<div #spreadsheet></div>`
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
worksheets: jspreadsheet.worksheetInstance[];
ngAfterViewInit() {
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [{
data: [
{ id:1, data:['Google', '5', ''] },
{ id:2, data:['Bing', '4', ''] },
{ id:3, data:['Yahoo', '1', ''] },
{ id:4, data:['Duckduckgo', '5', ''] },
],
columns: [
{ type: 'text', width:'400px' },
{ type: 'rating', width:'100px' },
{ type: action, width:'100px' },
],
persistence: '/jspreadsheet/save',
}],
oninsertrow: (a,b,c,d,e) => {
let rowNumber = e == false ? b + 1 : b;
jSuites.ajax({
url: '/jspreadsheet/id',
method: 'GET',
dataType: 'json',
success: function(result) {
alert('The new row has id: ' + result);
a.setRowId(rowNumber, result);
}
})
}
});
}
}