284 lines
7.8 KiB
JavaScript
284 lines
7.8 KiB
JavaScript
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);
|
|
}); |