first
This commit is contained in:
@@ -0,0 +1,60 @@
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
setTimeout(function(){
|
||||
var hot, container = document.getElementById("borders");
|
||||
hot = Handsontable(container, {
|
||||
data: Handsontable.helper.createSpreadsheetData(70, 20),
|
||||
rowHeaders: !0,
|
||||
fixedColumnsLeft: 2,
|
||||
fixedRowsTop: 2,
|
||||
colHeaders: !0,
|
||||
customBorders: [{
|
||||
range: {
|
||||
from: {
|
||||
row: 1,
|
||||
col: 1
|
||||
},
|
||||
to: {
|
||||
row: 3,
|
||||
col: 4
|
||||
}
|
||||
},
|
||||
top: {
|
||||
width: 2,
|
||||
color: "#5292F7"
|
||||
},
|
||||
left: {
|
||||
width: 2,
|
||||
color: "orange"
|
||||
},
|
||||
bottom: {
|
||||
width: 2,
|
||||
color: "red"
|
||||
},
|
||||
right: {
|
||||
width: 2,
|
||||
color: "magenta"
|
||||
}
|
||||
}, {
|
||||
row: 2,
|
||||
col: 2,
|
||||
left: {
|
||||
width: 2,
|
||||
color: "red"
|
||||
},
|
||||
right: {
|
||||
width: 1,
|
||||
color: "green"
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
||||
|
||||
var hotMobilesTablets, containerMobilesTablets = document.getElementById("mobilesTablets");
|
||||
hotMobilesTablets = new Handsontable(containerMobilesTablets, {
|
||||
data: Handsontable.helper.createSpreadsheetData(100, 100),
|
||||
rowHeaders: !0,
|
||||
colHeaders: !0,
|
||||
})
|
||||
}, 800);
|
||||
}
|
||||
);
|
||||
@@ -0,0 +1,284 @@
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
setTimeout(function() {
|
||||
|
||||
function getReadOnlyData() {
|
||||
return [{
|
||||
car: "Nissan",
|
||||
year: 2012,
|
||||
chassis: "black",
|
||||
bumper: "black"
|
||||
}, {
|
||||
car: "Nissan",
|
||||
year: 2013,
|
||||
chassis: "blue",
|
||||
bumper: "blue"
|
||||
}, {
|
||||
car: "Chrysler",
|
||||
year: 2014,
|
||||
chassis: "yellow",
|
||||
bumper: "black"
|
||||
}, {
|
||||
car: "Volvo",
|
||||
year: 2015,
|
||||
chassis: "white",
|
||||
bumper: "gray"
|
||||
}]
|
||||
}
|
||||
|
||||
function getDisableData() {
|
||||
return [{
|
||||
car: "Nissan",
|
||||
year: 2012,
|
||||
chassis: "black",
|
||||
bumper: "black"
|
||||
}, {
|
||||
car: "Nissan",
|
||||
year: 2013,
|
||||
chassis: "blue",
|
||||
bumper: "blue"
|
||||
}, {
|
||||
car: "Chrysler",
|
||||
year: 2014,
|
||||
chassis: "yellow",
|
||||
bumper: "black"
|
||||
}, {
|
||||
car: "Volvo",
|
||||
year: 2015,
|
||||
chassis: "white",
|
||||
bumper: "gray"
|
||||
}]
|
||||
}
|
||||
var settings1, ipValidatorRegexp, emailValidator, people = [{
|
||||
id: 1,
|
||||
name: {
|
||||
first: "Joe",
|
||||
last: "Fabiano"
|
||||
},
|
||||
ip: "0.0.0.1",
|
||||
email: "Joe.Fabiano@ex.com"
|
||||
}, {
|
||||
id: 2,
|
||||
name: {
|
||||
first: "Fred",
|
||||
last: "Wecler"
|
||||
},
|
||||
ip: "0.0.0.1",
|
||||
email: "Fred.Wecler@ex.com"
|
||||
}, {
|
||||
id: 3,
|
||||
name: {
|
||||
first: "Steve",
|
||||
last: "Wilson"
|
||||
},
|
||||
ip: "0.0.0.1",
|
||||
email: "Steve.Wilson@ex.com"
|
||||
}, {
|
||||
id: 4,
|
||||
name: {
|
||||
first: "Maria",
|
||||
last: "Fernandez"
|
||||
},
|
||||
ip: "0.0.0.1",
|
||||
email: "M.Fernandez@ex.com"
|
||||
}, {
|
||||
id: 5,
|
||||
name: {
|
||||
first: "Pierre",
|
||||
last: "Barbault"
|
||||
},
|
||||
ip: "0.0.0.1",
|
||||
email: "Pierre.Barbault@ex.com"
|
||||
}, {
|
||||
id: 6,
|
||||
name: {
|
||||
first: "Nancy",
|
||||
last: "Moore"
|
||||
},
|
||||
ip: "0.0.0.1",
|
||||
email: "Nancy.Moore@ex.com"
|
||||
}, {
|
||||
id: 7,
|
||||
name: {
|
||||
first: "Barbara",
|
||||
last: "MacDonald"
|
||||
},
|
||||
ip: "0.0.0.1",
|
||||
email: "B.MacDonald@ex.com"
|
||||
}, {
|
||||
id: 8,
|
||||
name: {
|
||||
first: "Wilma",
|
||||
last: "Williams"
|
||||
},
|
||||
ip: "0.0.0.1",
|
||||
email: "Wilma.Williams@ex.com"
|
||||
}, {
|
||||
id: 9,
|
||||
name: {
|
||||
first: "Sasha",
|
||||
last: "Silver"
|
||||
},
|
||||
ip: "0.0.0.1",
|
||||
email: "Sasha.Silver@ex.com"
|
||||
}, {
|
||||
id: 10,
|
||||
name: {
|
||||
first: "Don",
|
||||
last: "Pérignon"
|
||||
},
|
||||
ip: "0.0.0.1",
|
||||
email: "Don.Pérignon@ex.com"
|
||||
}, {
|
||||
id: 11,
|
||||
name: {
|
||||
first: "Aaron",
|
||||
last: "Kinley"
|
||||
},
|
||||
ip: "0.0.0.1",
|
||||
email: "Aaron.Kinley@ex.com"
|
||||
}];
|
||||
example1 = document.getElementById("validation"),
|
||||
example1console = document.getElementById("example1console");
|
||||
ipValidatorRegexp = /^(?:\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b|null)$/, emailValidator = function(value, callback) {
|
||||
setTimeout(function() {
|
||||
callback(/.+@.+/.test(value) ? !0 : !1)
|
||||
}, 1e3)
|
||||
}, settings1 = {
|
||||
data: people,
|
||||
beforeChange: function(changes, source) {
|
||||
for (var i = changes.length - 1; i >= 0; i--)
|
||||
if ("foo" === changes[i][3]) changes.splice(i, 1);
|
||||
else {
|
||||
if ("nuke" === changes[i][3]) return !1;
|
||||
"name.first" !== changes[i][1] && "name.last" !== changes[i][1] || !changes[i][3].charAt(0) || (changes[i][3] = changes[i][3].charAt(0).toUpperCase() + changes[i][3].slice(1))
|
||||
}
|
||||
},
|
||||
afterChange: function(changes, source) {
|
||||
"loadData" !== source && (example1console.innerText = JSON.stringify(changes))
|
||||
},
|
||||
colHeaders: ["ID", "First name", "Last name", "IP", "E-mail"],
|
||||
columns: [{
|
||||
data: "id",
|
||||
type: "numeric"
|
||||
}, {
|
||||
data: "name.first"
|
||||
}, {
|
||||
data: "name.last"
|
||||
}, {
|
||||
data: "ip",
|
||||
validator: ipValidatorRegexp,
|
||||
allowInvalid: !0
|
||||
}, {
|
||||
data: "email",
|
||||
validator: emailValidator,
|
||||
allowInvalid: !1
|
||||
}]
|
||||
};
|
||||
var hot1, hot = new Handsontable(example1, settings1),
|
||||
data = [
|
||||
["", "Kia", "Nissan", "Toyota", "Honda"],
|
||||
["2012", 10, 11, 12, 13],
|
||||
["2013", 20, 11, 14, 13],
|
||||
["2014", 30, 15, 12, 13],
|
||||
["2015", "", "", "", ""],
|
||||
["2016", "", "", "", ""]
|
||||
],
|
||||
container = document.getElementById("drag");
|
||||
hot1 = new Handsontable(container, {
|
||||
rowHeaders: !0,
|
||||
colHeaders: !0,
|
||||
fillHandle: !0
|
||||
}), hot1.loadData(data);
|
||||
var hot, container = document.getElementById("merged");
|
||||
hot = new Handsontable(container, {
|
||||
data: Handsontable.helper.createSpreadsheetData(25, 18),
|
||||
colWidths: [47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47],
|
||||
rowHeaders: !0,
|
||||
colHeaders: !0,
|
||||
contextMenu: !0,
|
||||
mergeCells: [{
|
||||
row: 1,
|
||||
col: 1,
|
||||
rowspan: 3,
|
||||
colspan: 3
|
||||
}, {
|
||||
row: 3,
|
||||
col: 4,
|
||||
rowspan: 2,
|
||||
colspan: 2
|
||||
}, {
|
||||
row: 5,
|
||||
col: 6,
|
||||
rowspan: 3,
|
||||
colspan: 3
|
||||
}]
|
||||
});
|
||||
var hot1, container = document.getElementById("alignment");
|
||||
hot1 = new Handsontable(container, {
|
||||
data: Handsontable.helper.createSpreadsheetData(25, 18),
|
||||
colWidths: [47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47, 47],
|
||||
rowHeaders: !0,
|
||||
colHeaders: !0,
|
||||
contextMenu: !0,
|
||||
mergeCells: [{
|
||||
row: 1,
|
||||
col: 1,
|
||||
rowspan: 3,
|
||||
colspan: 3
|
||||
}, {
|
||||
row: 3,
|
||||
col: 4,
|
||||
rowspan: 2,
|
||||
colspan: 2
|
||||
}],
|
||||
className: "htCenter",
|
||||
cell: [{
|
||||
row: 0,
|
||||
col: 0,
|
||||
className: "htRight"
|
||||
}, {
|
||||
row: 1,
|
||||
col: 1,
|
||||
className: "htLeft htMiddle"
|
||||
}, {
|
||||
row: 3,
|
||||
col: 4,
|
||||
className: "htLeft htBottom"
|
||||
}],
|
||||
afterSetCellMeta: function(row, col, key, val) {}
|
||||
});
|
||||
var hot1, container1 = document.getElementById("readOnly");
|
||||
hot1 = new Handsontable(container1, {
|
||||
data: getReadOnlyData(),
|
||||
colHeaders: ["Car", "Year", "Chassis color", "Bumper color"],
|
||||
columns: [{
|
||||
data: "car",
|
||||
readOnly: !0
|
||||
}, {
|
||||
data: "year"
|
||||
}, {
|
||||
data: "chassis"
|
||||
}, {
|
||||
data: "bumper"
|
||||
}]
|
||||
});
|
||||
var hot1, container1 = document.getElementById("nonEditable");
|
||||
hot1 = new Handsontable(container1, {
|
||||
data: getDisableData(),
|
||||
colHeaders: ["Car", "Year", "Chassis color", "Bumper color"],
|
||||
columns: [{
|
||||
data: "car",
|
||||
editor: !1
|
||||
}, {
|
||||
data: "year",
|
||||
editor: "numeric"
|
||||
}, {
|
||||
data: "chassis",
|
||||
editor: "text"
|
||||
}, {
|
||||
data: "bumper",
|
||||
editor: "text"
|
||||
}]
|
||||
})
|
||||
}, 800);
|
||||
});
|
||||
@@ -0,0 +1,528 @@
|
||||
// =================================
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
setTimeout(function() {
|
||||
var
|
||||
data = [
|
||||
{
|
||||
title: "<a href='http://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691'>Professional JavaScript for Web Developers</a>",
|
||||
description: "This <a href='http://bit.ly/sM1bDf'>book</a> provides a developer-level introduction along with more advanced and useful features of <b>JavaScript</b>.",
|
||||
comments: "I would rate it ★★★★☆",
|
||||
cover: "http://ecx.images-amazon.com/images/I/51bRhyVTVGL._SL50_.jpg"
|
||||
},
|
||||
{
|
||||
title: "<a href='http://shop.oreilly.com/product/9780596517748.do'>JavaScript: The Good Parts</a>",
|
||||
description: "This book provides a developer-level introduction along with <b>more advanced</b> and useful features of JavaScript.",
|
||||
comments: "This is the book about JavaScript",
|
||||
cover: "http://ecx.images-amazon.com/images/I/51gdVAEfPUL._SL50_.jpg"
|
||||
},
|
||||
{
|
||||
title: "<a href='http://shop.oreilly.com/product/9780596805531.do'>JavaScript: The Definitive Guide</a>",
|
||||
description: "<em>JavaScript: The Definitive Guide</em> provides a thorough description of the core <b>JavaScript</b> language and both the legacy and standard DOMs implemented in web browsers.",
|
||||
comments: "I've never actually read it, but the <a href='http://shop.oreilly.com/product/9780596805531.do'>comments</a> are highly <strong>positive</strong>.",
|
||||
cover: "http://ecx.images-amazon.com/images/I/51VFNL4T7kL._SL50_.jpg"
|
||||
}
|
||||
],
|
||||
container1,
|
||||
hot1;
|
||||
|
||||
container1 = document.getElementById('rendering');
|
||||
hot1 = new Handsontable(container1, {
|
||||
data: data,
|
||||
colWidths: [200, 200, 200, 80],
|
||||
colHeaders: ["Title", "Description", "Comments", "Cover"],
|
||||
columns: [
|
||||
{data: "title", renderer: "html"},
|
||||
{data: "description", renderer: "html"},
|
||||
{data: "comments", renderer: safeHtmlRenderer},
|
||||
{data: "cover", renderer: coverRenderer}
|
||||
]
|
||||
});
|
||||
|
||||
// original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
|
||||
function strip_tags(input, allowed) {
|
||||
var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
|
||||
commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
|
||||
|
||||
// making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)
|
||||
allowed = (((allowed || "") + "").toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join('');
|
||||
|
||||
return input.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) {
|
||||
return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
|
||||
});
|
||||
}
|
||||
|
||||
function safeHtmlRenderer(instance, td, row, col, prop, value, cellProperties) {
|
||||
var escaped = Handsontable.helper.stringify(value);
|
||||
escaped = strip_tags(escaped, '<em><b><strong><a><big>'); //be sure you only allow certain HTML tags to avoid XSS threats (you should also remove unwanted HTML attributes)
|
||||
td.innerHTML = escaped;
|
||||
|
||||
return td;
|
||||
}
|
||||
|
||||
function coverRenderer (instance, td, row, col, prop, value, cellProperties) {
|
||||
var escaped = Handsontable.helper.stringify(value),
|
||||
img;
|
||||
|
||||
if (escaped.indexOf('http') === 0) {
|
||||
img = document.createElement('IMG');
|
||||
img.src = value;
|
||||
|
||||
Handsontable.Dom.addEvent(img, 'mousedown', function (e){
|
||||
e.preventDefault(); // prevent selection quirk
|
||||
});
|
||||
|
||||
Handsontable.Dom.empty(td);
|
||||
td.appendChild(img);
|
||||
}
|
||||
else {
|
||||
// render as text
|
||||
Handsontable.renderers.TextRenderer.apply(this, arguments);
|
||||
}
|
||||
|
||||
return td;
|
||||
}
|
||||
|
||||
function bindDumpButton() {
|
||||
if (typeof Handsontable === "undefined") {
|
||||
return;
|
||||
}
|
||||
|
||||
Handsontable.Dom.addEvent(document.body, 'click', function (e) {
|
||||
|
||||
var element = e.target || e.srcElement;
|
||||
|
||||
if (element.nodeName == "BUTTON" && element.name == 'dump') {
|
||||
var name = element.getAttribute('data-dump');
|
||||
var instance = element.getAttribute('data-instance');
|
||||
var hot = window[instance];
|
||||
console.log('data of ' + name, hot.getData());
|
||||
}
|
||||
});
|
||||
}
|
||||
bindDumpButton();
|
||||
}, 800);
|
||||
});
|
||||
|
||||
|
||||
// ==================================
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
setTimeout(function() {
|
||||
function getCarData() {
|
||||
return [
|
||||
{car: "Mercedes A 160", year: 2011, price_usd: 7000, price_eur: 7000},
|
||||
{car: "Citroen C4 Coupe", year: 2012, price_usd: 8330, price_eur: 8330},
|
||||
{car: "Audi A4 Avant", year: 2013, price_usd: 33900, price_eur: 33900},
|
||||
{car: "Opel Astra", year: 2014, price_usd: 5000, price_eur: 5000},
|
||||
{car: "BMW 320i Coupe", year: 2015, price_usd: 30500, price_eur: 30500}
|
||||
];
|
||||
}
|
||||
|
||||
var
|
||||
container = document.getElementById('numericData'),
|
||||
hot;
|
||||
|
||||
hot = new Handsontable(container, {
|
||||
data: getCarData(),
|
||||
colHeaders: ['Car', 'Year', 'Price ($)', 'Price (€)'],
|
||||
columns: [
|
||||
{
|
||||
data: 'car'
|
||||
// 1nd column is simple text, no special options here
|
||||
},
|
||||
{
|
||||
data: 'year',
|
||||
type: 'numeric'
|
||||
},
|
||||
{
|
||||
data: 'price_usd',
|
||||
type: 'numeric',
|
||||
format: '$0,0.00',
|
||||
language: 'en' // this is the default locale, set up for USD
|
||||
},
|
||||
{
|
||||
data: 'price_eur',
|
||||
type: 'numeric',
|
||||
format: '0,0.00 $',
|
||||
language: 'de' // i18n: use this for EUR (German)
|
||||
// more locales available on numeraljs.com
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
function bindDumpButton() {
|
||||
if (typeof Handsontable === "undefined") {
|
||||
return;
|
||||
}
|
||||
|
||||
Handsontable.Dom.addEvent(document.body, 'click', function (e) {
|
||||
|
||||
var element = e.target || e.srcElement;
|
||||
|
||||
if (element.nodeName == "BUTTON" && element.name == 'dump') {
|
||||
var name = element.getAttribute('data-dump');
|
||||
var instance = element.getAttribute('data-instance');
|
||||
var hot = window[instance];
|
||||
console.log('data of ' + name, hot.getData());
|
||||
}
|
||||
});
|
||||
}
|
||||
bindDumpButton();
|
||||
}, 800);
|
||||
});
|
||||
|
||||
|
||||
// ==============================
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
setTimeout(function() {
|
||||
function getCarData() {
|
||||
return [
|
||||
["Mercedes", "A 160", "01/14/2012", 6999.9999],
|
||||
["Citroen", "C4 Coupe", "12/01/2013", 8330],
|
||||
["Audi", "A4 Avant", "11/19/2014", 33900],
|
||||
["Opel", "Astra", "02/02/2015", 7000],
|
||||
["BMW", "320i Coupe", "07/24/2016", 30500]
|
||||
];
|
||||
}
|
||||
|
||||
var
|
||||
container = document.getElementById('dateDate'),
|
||||
hot;
|
||||
|
||||
hot = new Handsontable(container, {
|
||||
data: getCarData(),
|
||||
colHeaders: ['Car', 'Model', 'Registration date', 'Price'],
|
||||
columns: [
|
||||
{
|
||||
type: 'autocomplete',
|
||||
source: ['Audi', 'BMW', 'Chrysler', 'Citroen', 'Mercedes', 'Nissan', 'Opel', 'Suzuki', 'Toyota', 'Volvo'],
|
||||
strict: false
|
||||
},
|
||||
{
|
||||
// 2nd cell is simple text, no special options here
|
||||
},
|
||||
{
|
||||
type: 'date',
|
||||
dateFormat: 'MM/DD/YYYY',
|
||||
correctFormat: true,
|
||||
defaultDate: '01/01/1900'
|
||||
},
|
||||
{
|
||||
type: 'numeric',
|
||||
format: '$ 0,0.00'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
function bindDumpButton() {
|
||||
if (typeof Handsontable === "undefined") {
|
||||
return;
|
||||
}
|
||||
|
||||
Handsontable.Dom.addEvent(document.body, 'click', function (e) {
|
||||
|
||||
var element = e.target || e.srcElement;
|
||||
|
||||
if (element.nodeName == "BUTTON" && element.name == 'dump') {
|
||||
var name = element.getAttribute('data-dump');
|
||||
var instance = element.getAttribute('data-instance');
|
||||
var hot = window[instance];
|
||||
console.log('data of ' + name, hot.getData());
|
||||
}
|
||||
});
|
||||
}
|
||||
bindDumpButton();
|
||||
}, 800);
|
||||
});
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
setTimeout(function() {
|
||||
function getCarData() {
|
||||
return [
|
||||
{car: "Mercedes A 160", year: 2012, available: true, comesInBlack: 'yes'},
|
||||
{car: "Citroen C4 Coupe", year: 2013, available: false, comesInBlack: 'yes'},
|
||||
{car: "Audi A4 Avant", year: 2014, available: true, comesInBlack: 'no'},
|
||||
{car: "Opel Astra", year: 2015, available: false, comesInBlack: 'yes'},
|
||||
{car: "BMW 320i Coupe", year: 2016, available: false, comesInBlack: 'no'}
|
||||
];
|
||||
}
|
||||
|
||||
var example1 = document.getElementById('checkbox'),
|
||||
hot1;
|
||||
|
||||
hot1 = new Handsontable(example1, {
|
||||
data: getCarData(),
|
||||
colHeaders: ['Car model', 'Year of manufacture', 'Available'],
|
||||
columns: [
|
||||
{
|
||||
data: 'car'
|
||||
},
|
||||
{
|
||||
data: 'year',
|
||||
type: 'numeric'
|
||||
},
|
||||
{
|
||||
data: 'available',
|
||||
type: 'checkbox'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
function bindDumpButton() {
|
||||
if (typeof Handsontable === "undefined") {
|
||||
return;
|
||||
}
|
||||
|
||||
Handsontable.Dom.addEvent(document.body, 'click', function (e) {
|
||||
|
||||
var element = e.target || e.srcElement;
|
||||
|
||||
if (element.nodeName == "BUTTON" && element.name == 'dump') {
|
||||
var name = element.getAttribute('data-dump');
|
||||
var instance = element.getAttribute('data-instance');
|
||||
var hot = window[instance];
|
||||
console.log('data of ' + name, hot.getData());
|
||||
}
|
||||
});
|
||||
}
|
||||
bindDumpButton();
|
||||
}, 800);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// ================================
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
setTimeout(function() {
|
||||
var
|
||||
container = document.getElementById("select"),
|
||||
hot;
|
||||
|
||||
hot = new Handsontable(container, {
|
||||
data: [
|
||||
['2014', 'Nissan', 10],
|
||||
['2015', 'Honda', 20],
|
||||
['2016', 'Kia', 30]
|
||||
],
|
||||
colHeaders: true,
|
||||
columns: [
|
||||
{},
|
||||
{
|
||||
editor: 'select',
|
||||
selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda']
|
||||
},
|
||||
{}
|
||||
]
|
||||
});
|
||||
|
||||
function bindDumpButton() {
|
||||
if (typeof Handsontable === "undefined") {
|
||||
return;
|
||||
}
|
||||
|
||||
Handsontable.Dom.addEvent(document.body, 'click', function (e) {
|
||||
|
||||
var element = e.target || e.srcElement;
|
||||
|
||||
if (element.nodeName == "BUTTON" && element.name == 'dump') {
|
||||
var name = element.getAttribute('data-dump');
|
||||
var instance = element.getAttribute('data-instance');
|
||||
var hot = window[instance];
|
||||
console.log('data of ' + name, hot.getData());
|
||||
}
|
||||
});
|
||||
}
|
||||
bindDumpButton();
|
||||
}, 800);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// ======================================
|
||||
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
setTimeout(function() {
|
||||
function getCarData() {
|
||||
return [
|
||||
["Nissan", 2012, "black", "black"],
|
||||
["Nissan", 2013, "blue", "blue"],
|
||||
["Chrysler", 2014, "yellow", "black"],
|
||||
["Volvo", 2015, "white", "gray"]
|
||||
];
|
||||
}
|
||||
|
||||
var
|
||||
container = document.getElementById('dropdown'),
|
||||
hot;
|
||||
|
||||
hot = new Handsontable(container, {
|
||||
data: getCarData(),
|
||||
colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
|
||||
columns: [
|
||||
{},
|
||||
{type: 'numeric'},
|
||||
{
|
||||
type: 'dropdown',
|
||||
source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white']
|
||||
},
|
||||
{
|
||||
type: 'dropdown',
|
||||
source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white']
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
function bindDumpButton() {
|
||||
if (typeof Handsontable === "undefined") {
|
||||
return;
|
||||
}
|
||||
|
||||
Handsontable.Dom.addEvent(document.body, 'click', function (e) {
|
||||
|
||||
var element = e.target || e.srcElement;
|
||||
|
||||
if (element.nodeName == "BUTTON" && element.name == 'dump') {
|
||||
var name = element.getAttribute('data-dump');
|
||||
var instance = element.getAttribute('data-instance');
|
||||
var hot = window[instance];
|
||||
console.log('data of ' + name, hot.getData());
|
||||
}
|
||||
});
|
||||
}
|
||||
bindDumpButton();
|
||||
}, 800);
|
||||
});
|
||||
|
||||
|
||||
|
||||
// ========================================
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
setTimeout(function() {
|
||||
function getCarData() {
|
||||
return [
|
||||
["Nissan", 2013, "black", "black"],
|
||||
["Nissan", 2014, "blue", "blue"],
|
||||
["Chrysler", 2015, "yellow", "black"],
|
||||
["Volvo", 2016, "white", "gray"]
|
||||
];
|
||||
}
|
||||
|
||||
var
|
||||
example1 = document.getElementById('autocomplete'),
|
||||
hot1;
|
||||
|
||||
hot1 = new Handsontable(example1, {
|
||||
data: getCarData(),
|
||||
colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
|
||||
columns: [
|
||||
{
|
||||
type: 'autocomplete',
|
||||
source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'],
|
||||
strict: false
|
||||
},
|
||||
{type: 'numeric'},
|
||||
{
|
||||
type: 'autocomplete',
|
||||
source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white', 'purple', 'lime', 'olive', 'cyan'],
|
||||
strict: false
|
||||
},
|
||||
{
|
||||
type: 'autocomplete',
|
||||
source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white', 'purple', 'lime', 'olive', 'cyan'],
|
||||
strict: false
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
function bindDumpButton() {
|
||||
if (typeof Handsontable === "undefined") {
|
||||
return;
|
||||
}
|
||||
|
||||
Handsontable.Dom.addEvent(document.body, 'click', function (e) {
|
||||
|
||||
var element = e.target || e.srcElement;
|
||||
|
||||
if (element.nodeName == "BUTTON" && element.name == 'dump') {
|
||||
var name = element.getAttribute('data-dump');
|
||||
var instance = element.getAttribute('data-instance');
|
||||
var hot = window[instance];
|
||||
console.log('data of ' + name, hot.getData());
|
||||
}
|
||||
});
|
||||
}
|
||||
bindDumpButton();
|
||||
}, 800);
|
||||
});
|
||||
|
||||
|
||||
|
||||
// =======================================
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
setTimeout(function() {
|
||||
function getCarData() {
|
||||
return [
|
||||
{id: 1, name: {first: "Chris", last: "Right"}, password: "plainTextPassword"},
|
||||
{id: 2, name: {first: "John", last: "Honest"}, password: "txt"},
|
||||
{id: 3, name: {first: "Greg", last: "Well"}, password: "longer"}
|
||||
];
|
||||
}
|
||||
|
||||
var
|
||||
example1 = document.getElementById('password'),
|
||||
hot1;
|
||||
|
||||
hot1 = new Handsontable(example1, {
|
||||
data: getCarData(),
|
||||
colHeaders: ['ID', 'First name', 'Last name', 'Password'],
|
||||
columns: [
|
||||
{data: 'id'},
|
||||
{data: 'name.first'},
|
||||
{data: 'name.last'},
|
||||
{data: 'password', type: 'password'}
|
||||
]
|
||||
});
|
||||
|
||||
function bindDumpButton() {
|
||||
if (typeof Handsontable === "undefined") {
|
||||
return;
|
||||
}
|
||||
|
||||
Handsontable.Dom.addEvent(document.body, 'click', function (e) {
|
||||
|
||||
var element = e.target || e.srcElement;
|
||||
|
||||
if (element.nodeName == "BUTTON" && element.name == 'dump') {
|
||||
var name = element.getAttribute('data-dump');
|
||||
var instance = element.getAttribute('data-instance');
|
||||
var hot = window[instance];
|
||||
console.log('data of ' + name, hot.getData());
|
||||
}
|
||||
});
|
||||
}
|
||||
bindDumpButton();
|
||||
}, 800);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
20
safekiso-server/modules/base/wwwroot/admindek/pages/handson-table/chroma.min.js
vendored
Normal file
20
safekiso-server/modules/base/wwwroot/admindek/pages/handson-table/chroma.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -0,0 +1,17 @@
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
setTimeout(function() {
|
||||
|
||||
var hot1, stretch=document.getElementById("stretch");
|
||||
hot1=new Handsontable(stretch, {
|
||||
data: Handsontable.helper.createSpreadsheetData(10, 6), colWidths: 47, rowHeaders: !0, colHeaders: !0, stretchH: "last", contextMenu: !0
|
||||
}
|
||||
);
|
||||
var hot, myData=Handsontable.helper.createSpreadsheetData(60, 100), container=document.getElementById("freezing");
|
||||
hot=new Handsontable(container, {
|
||||
data: myData, rowHeaders: !0, colHeaders: !0, fixedColumnsLeft: 2, contextMenu: !0, manualColumnFreeze: !0
|
||||
}
|
||||
)
|
||||
}, 800);
|
||||
}
|
||||
|
||||
);
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,81 @@
|
||||
$(document).ready(function() {
|
||||
setTimeout(function() {
|
||||
function getData() {
|
||||
return [
|
||||
["", "Kia", "Nissan", "Toyota", "Honda", "Mazda", "Ford"],
|
||||
["2012", 10, 11, 12, 13, 15, 16],
|
||||
["2013", 10, 11, 12, 13, 15, 16],
|
||||
["2014", 10, 11, 12, 13, 15, 16],
|
||||
["2015", 10, 11, 12, 13, 15, 16],
|
||||
["2016", 10, 11, 12, 13, 15, 16]
|
||||
]
|
||||
}
|
||||
|
||||
function updateHeatmap(change, source) {
|
||||
if (source) heatmap[change[0][1]] = generateHeatmapData.call(this, change[0][1]);
|
||||
else {
|
||||
heatmap = [];
|
||||
for (var i = 1, colCount = this.countCols(); i < colCount; i++) heatmap[i] = generateHeatmapData.call(this, i)
|
||||
}
|
||||
}
|
||||
|
||||
function point(min, max, value) {
|
||||
return (value - min) / (max - min)
|
||||
}
|
||||
|
||||
function generateHeatmapData(colId) {
|
||||
var values = this.getDataAtCol(colId);
|
||||
return {
|
||||
min: Math.min.apply(null, values),
|
||||
max: Math.max.apply(null, values)
|
||||
}
|
||||
}
|
||||
|
||||
function heatmapRenderer(instance, td, row, col, prop, value, cellProperties) {
|
||||
Handsontable.renderers.TextRenderer.apply(this, arguments), heatmap[col] && (td.style.backgroundColor = heatmapScale(point(heatmap[col].min, heatmap[col].max, parseInt(value, 10))).hex(), td.style.textAlign = "right")
|
||||
}
|
||||
var $container = $("#jQuery");
|
||||
$container.handsontable({
|
||||
data: getData(),
|
||||
rowHeaders: !0,
|
||||
colHeaders: !0,
|
||||
contextMenu: !0
|
||||
});
|
||||
var heatmap, heatmapScale, hot, data = ($("#jQuery").handsontable("getInstance"), [
|
||||
[2012, 190251, 5090, 195341],
|
||||
[2013, 224495, 6486, 230981],
|
||||
[2014, 254044, 6765, 260809],
|
||||
[2015, 254099, 7521, 261620],
|
||||
[2016, 271108, 9449, 280557],
|
||||
[2017, 280565, 11714, 292279],
|
||||
[2018, 284120, 11292, 295412],
|
||||
[2019, 279742, 11468, 291210],
|
||||
[2020, 290411, 11806, 302217],
|
||||
[2021, 290652, 10891, 301543],
|
||||
[2022, 283863, 10402, 294265],
|
||||
[2023, 267646, 10104, 255850]
|
||||
]),
|
||||
container = document.getElementById("chromaJS");
|
||||
heatmapScale = chroma.scale(["#FFFFFF", "#8BC34A"]), hot = new Handsontable(container, {
|
||||
data: data,
|
||||
colHeaders: ["Year", "Domestic Flights", "International Flights", "Total Flights"],
|
||||
columns: [{
|
||||
type: "numeric"
|
||||
}, {
|
||||
type: "numeric",
|
||||
format: "0,0",
|
||||
renderer: heatmapRenderer
|
||||
}, {
|
||||
type: "numeric",
|
||||
format: "0,0",
|
||||
renderer: heatmapRenderer
|
||||
}, {
|
||||
type: "numeric",
|
||||
format: "0,0",
|
||||
renderer: heatmapRenderer
|
||||
}],
|
||||
afterLoadData: updateHeatmap,
|
||||
beforeChangeRender: updateHeatmap
|
||||
})
|
||||
}, 800);
|
||||
});
|
||||
@@ -0,0 +1,27 @@
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
setTimeout(function() {
|
||||
|
||||
var hot1, example=document.getElementById("scrolling");
|
||||
hot1=new Handsontable(example, {
|
||||
data: Handsontable.helper.createSpreadsheetData(100, 100), height: 400, colWidths: 50, rowHeights: 32, rowHeaders: !0, colHeaders: !0
|
||||
}
|
||||
);
|
||||
var hot, myData=Handsontable.helper.createSpreadsheetData(100, 50), container=document.getElementById("fixing");
|
||||
hot=new Handsontable(container, {
|
||||
data: myData, colWidths: [47, 47, 47, 47, 47, 47, 47, 47, 47, 47], rowHeaders: !0, colHeaders: !0, fixedRowsTop: 2, fixedColumnsLeft: 2
|
||||
}
|
||||
);
|
||||
var hot, container=document.getElementById("resizing");
|
||||
hot=new Handsontable(container, {
|
||||
data: Handsontable.helper.createSpreadsheetData(10, 10), rowHeaders: !0, colHeaders: !0, colWidths: [55, 80, 80, 80, 80, 80, 80], rowHeights: [50, 40, 100], manualColumnResize: !0, manualRowResize: !0
|
||||
}
|
||||
);
|
||||
var hot, moving=document.getElementById("moving");
|
||||
hot=new Handsontable(moving, {
|
||||
data: Handsontable.helper.createSpreadsheetData(100, 20), rowHeaders: !0, colHeaders: !0, manualColumnMove: !0, manualRowMove: !0
|
||||
}
|
||||
)
|
||||
|
||||
}, 800);
|
||||
}
|
||||
);
|
||||
@@ -0,0 +1,44 @@
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
setTimeout(function() {
|
||||
function isEmptyRow(instance, row) {
|
||||
for (var rowData = instance.getData()[row], i = 0, ilen = rowData.length; i < ilen; i++)
|
||||
if (null !== rowData[i]) return !1;
|
||||
return !0
|
||||
}
|
||||
|
||||
function defaultValueRenderer(instance, td, row, col, prop, value, cellProperties) {
|
||||
var args = arguments;
|
||||
null === args[5] && isEmptyRow(instance, row) ? (args[5] = tpl[col], td.style.color = "#999") : td.style.color = "", Handsontable.renderers.TextRenderer.apply(this, args)
|
||||
}
|
||||
var hot1, tpl = ["one", "two", "three"],
|
||||
data = [
|
||||
["", "Kia", "Nissan", "Toyota", "Honda"],
|
||||
["2014", 10, 11, 12, 13],
|
||||
["2015", 20, 11, 14, 13],
|
||||
["2016", 30, 15, 12, 13]
|
||||
],
|
||||
container = document.getElementById("populating");
|
||||
hot1 = new Handsontable(container, {
|
||||
startRows: 8,
|
||||
startCols: 5,
|
||||
minSpareRows: 1,
|
||||
contextMenu: !0,
|
||||
cells: function(row, col, prop) {
|
||||
var cellProperties = {};
|
||||
return cellProperties.renderer = defaultValueRenderer, cellProperties
|
||||
},
|
||||
beforeChange: function(changes) {
|
||||
var i, c, instance = hot1,
|
||||
ilen = changes.length,
|
||||
clen = instance.colCount,
|
||||
rowColumnSeen = {},
|
||||
rowsToFill = {};
|
||||
for (i = 0; i < ilen; i++) null === changes[i][2] && null !== changes[i][3] && isEmptyRow(instance, changes[i][0]) && (rowColumnSeen[changes[i][0] + "/" + changes[i][1]] = !0, rowsToFill[changes[i][0]] = !0);
|
||||
for (var r in rowsToFill)
|
||||
if (rowsToFill.hasOwnProperty(r))
|
||||
for (c = 0; c < clen; c++) rowColumnSeen[r + "/" + c] || changes.push([r, c, null, tpl[c]])
|
||||
}
|
||||
}), hot1.loadData(data)
|
||||
}, 800);
|
||||
});
|
||||
@@ -0,0 +1,143 @@
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
setTimeout(function() {
|
||||
function getData() {
|
||||
return [
|
||||
["", "Kia", "Nissan", "Toyota", "Honda", "Mazda", "Ford"],
|
||||
["2012", 10, 11, 12, 13, 15, 16],
|
||||
["2013", 10, 11, 12, 13, 15, 16],
|
||||
["2014", 10, 11, 12, 13, 15, 16],
|
||||
["2015", 10, 11, 12, 13, 15, 16],
|
||||
["2016", 10, 11, 12, 13, 15, 16]
|
||||
]
|
||||
}
|
||||
|
||||
function getCustomData() {
|
||||
return [
|
||||
["", "Kia", "Nissan", "Toyota", "Honda", "Mazda", "Ford"],
|
||||
["2012", 10, 11, 12, 13, 15, 16],
|
||||
["2013", 10, 11, 12, 13, 15, 16],
|
||||
["2014", 10, 11, 12, 13, 15, 16],
|
||||
["2015", 10, 11, 12, 13, 15, 16],
|
||||
["2016", 10, 11, 12, 13, 15, 16]
|
||||
]
|
||||
}
|
||||
|
||||
function getData() {
|
||||
return [
|
||||
["", "Kia", "Nissan", "Toyota", "Honda", "Mazda", "Ford"],
|
||||
["2012", 10, 11, 12, 13, 15, 16],
|
||||
["2013", 10, 11, 12, 13, 15, 16],
|
||||
["2014", 10, 11, 12, 13, 15, 16],
|
||||
["2015", 10, 11, 12, 13, 15, 16],
|
||||
["2016", 10, 11, 12, 13, 15, 16]
|
||||
]
|
||||
}
|
||||
|
||||
function getData() {
|
||||
return [
|
||||
["", "Kia", "Nissan", "Toyota", "Honda", "Mazda", "Ford"],
|
||||
["2012", 10, 11, 12, 13, 15, 16],
|
||||
["2013", 10, 11, 12, 13, 15, 16],
|
||||
["2014", 10, 11, 12, 13, 15, 16],
|
||||
["2015", 10, 11, 12, 13, 15, 16],
|
||||
["2016", 10, 11, 12, 13, 15, 16]
|
||||
]
|
||||
}
|
||||
var settings1, hot1, example1 = document.getElementById("context");
|
||||
settings1 = {
|
||||
data: getData(),
|
||||
rowHeaders: !0,
|
||||
colHeaders: !0,
|
||||
contextMenu: !0
|
||||
}, hot1 = new Handsontable(example1, settings1);
|
||||
var settings3, hot3, example3 = document.getElementById("configuration");
|
||||
settings3 = {
|
||||
data: getCustomData(),
|
||||
rowHeaders: !0,
|
||||
colHeaders: !0
|
||||
}, hot3 = new Handsontable(example3, settings3), hot3.updateSettings({
|
||||
contextMenu: {
|
||||
callback: function(key, options) {
|
||||
"about" === key && setTimeout(function() {
|
||||
alert("This is a context menu with default and custom options mixed")
|
||||
}, 100)
|
||||
},
|
||||
items: {
|
||||
row_above: {
|
||||
disabled: function() {
|
||||
return 0 === hot3.getSelected()[0]
|
||||
}
|
||||
},
|
||||
row_below: {},
|
||||
hsep1: "---------",
|
||||
remove_row: {
|
||||
name: "Remove this row, ok?",
|
||||
disabled: function() {
|
||||
return 0 === hot3.getSelected()[0]
|
||||
}
|
||||
},
|
||||
hsep2: "---------",
|
||||
about: {
|
||||
name: "About this menu"
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
var hot4, copyPaste = document.getElementById("copyPaste");
|
||||
hot4 = new Handsontable(copyPaste, {
|
||||
data: getData(),
|
||||
rowHeaders: !0,
|
||||
colHeaders: !0,
|
||||
contextMenu: !0,
|
||||
contextMenuCopyPaste: {
|
||||
swfPath: "/bower_components/zeroclipboard/dist/ZeroClipboard.swf"
|
||||
}
|
||||
});
|
||||
var hot, data = [
|
||||
["", "Kia", "Nissan", "Toyota", "Honda", "Mazda", "Ford"],
|
||||
["2012", 10, 11, 12, 13, 15, 16],
|
||||
["2013", 10, 11, 12, 13, 15, 16],
|
||||
["2014", 10, 11, 12, 13, 15, 16],
|
||||
["2015", 10, 11, 12, 13, 15, 16],
|
||||
["2016", 10, 11, 12, 13, 15, 16]
|
||||
],
|
||||
container = document.getElementById("buttons"),
|
||||
selectFirst = document.getElementById("selectFirst"),
|
||||
rowHeaders = document.getElementById("rowHeaders"),
|
||||
colHeaders = document.getElementById("colHeaders");
|
||||
hot = new Handsontable(container, {
|
||||
rowHeaders: !0,
|
||||
colHeaders: !0,
|
||||
outsideClickDeselects: !1,
|
||||
removeRowPlugin: !0
|
||||
}), hot.loadData(data), Handsontable.Dom.addEvent(selectFirst, "click", function() {
|
||||
hot.selectCell(0, 0)
|
||||
}), Handsontable.Dom.addEvent(rowHeaders, "click", function() {
|
||||
hot.updateSettings({
|
||||
rowHeaders: this.checked
|
||||
})
|
||||
}), Handsontable.Dom.addEvent(colHeaders, "click", function() {
|
||||
hot.updateSettings({
|
||||
colHeaders: this.checked
|
||||
})
|
||||
});
|
||||
var hot1, container = document.getElementById("comments");
|
||||
hot1 = new Handsontable(container, {
|
||||
data: getData(),
|
||||
rowHeaders: !0,
|
||||
colHeaders: !0,
|
||||
contextMenu: !0,
|
||||
comments: !0,
|
||||
cell: [{
|
||||
row: 1,
|
||||
col: 1,
|
||||
comment: "Some comment"
|
||||
}, {
|
||||
row: 2,
|
||||
col: 2,
|
||||
comment: "More comments"
|
||||
}]
|
||||
})
|
||||
|
||||
}, 800);
|
||||
});
|
||||
Reference in New Issue
Block a user