Data Grid scripting and customizations
Customize the data grid tables behavior via JavaScript events.
<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" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<div id="spreasheet"></div>
<script>
let data2 = [
['BR', 'Cheese', 1, 3.99],
['CA', 'Apples', 0, 1.00],
['US', 'Carrots', 1, 0.90],
['GB', 'Oranges', 0, 1.20],
['CH', 'Chocolats', 1, 0.40],
['AR', 'Apples', 1, 1.10],
['AR', 'Bananas', 1, 0.30],
['BR', 'Oranges', 1, 0.95],
['BR', 'Pears', 1, 0.90],
['', '', '', '=ROUND(SUM(D1:D8), 2)'],
];
let table2 = jspreadsheet(document.getElementById('spreasheet'), {
data:data2,
columnSorting:false,
columns: [
{
type: 'autocomplete',
title: 'Country',
width: '250',
url:'/jspreadsheet/countries'
},
{
type: 'autocomplete',
title:'Food',
width:'150',
source: ['Apples','Bananas','Carrots','Oranges','Cheese','Kiwi','Chocolats','Pears']
},
{
type: 'checkbox',
title:'Stock',
width:'100'
},
{
type: 'number',
title:'Price',
width:'100'
},
],
updateTable:function(instance, cell, col, row, val, label) {
// Number formating
if (col == 3) {
// Get text
txt = cell.innerText;
// Format text
txt = numeral(txt).format('0,0.00');
// Update cell value
cell.innerHTML = '$ ' + txt;
}
// Total row
if (row == 9) {
if (col < 3) {
cell.innerHTML = '';
}
if (col == 2) {
cell.innerHTML = 'Total';
cell.style.fontWeight = 'bold';
}
cell.className = '';
cell.style.backgroundColor = '#f46e42';
cell.style.color = '#ffffff';
}
},
license: 'YTU0YmIxM2RkOTY1M2Y2MmVkZTk3ZjY3NGM1ZmFjNWNkNzU4MjhiZGFjZjI0N2FmODI3NTE1YzgwNGNmY2M2YzA5YjhmYWUyNmViNGRiYzY3N2Q4MTAyYTQwYjllZGNmM2U4MmZmMjQxOWM1MmFlYWQzZjIxYWIxNzBhMGI4YjgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeU16TXlORGcxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==',
});
</script>
<style>
.jexcel tbody tr:nth-child(even) {
background-color: #EEE9F1 !important;
}
</style>
</html>