first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,528 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Handsontable - Excel-like tables with extensive funtionality
|
||||
*
|
||||
* Specific JS code additions for handsontable_custom_checks.html page
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: Nov 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function() {
|
||||
|
||||
|
||||
// Numeric type
|
||||
// ------------------------------
|
||||
|
||||
// Define element
|
||||
var hot_html_cells_data = [
|
||||
{
|
||||
cover: "https://thumb-tf.s3.envato.com/files/154866588/icon.png",
|
||||
title: "<a href='http://themeforest.net/item/limitless-responsive-web-application-kit/13080328' target='_blank'>Limitless - Responsive Web Application Kit</a>",
|
||||
description: "Limitless is one of the best application templates ever built. Very flexible and clean admin template based on Bootstrap and Less. Available in 4 different layouts.",
|
||||
sales: "<strong>12930</strong>",
|
||||
comments: "<div class='text-orange mb-5'><i class='icon-star-full2'></i><i class='icon-star-full2'></i><i class='icon-star-full2'></i><i class='icon-star-full2'></i><i class='icon-star-full2'></i></div> 35 ratings",
|
||||
},
|
||||
{
|
||||
cover: "https://thumb-tf.s3.envato.com/files/91482991/icon.png",
|
||||
title: "<a href='http://themeforest.net/item/londinium-responsive-bootstrap-3-admin-template/6978619' target='_blank'>Londinium - responsive bootstrap 3 admin template</a>",
|
||||
description: "Londinium – a new premium admin skin with lots of custom elements, plugins and very flexible content structure. Londinium is powered with Bootstrap framework.",
|
||||
sales: "<strong>8509</strong>",
|
||||
comments: "<div class='text-orange mb-5'><i class='icon-star-full2'></i><i class='icon-star-full2'></i><i class='icon-star-full2'></i><i class='icon-star-full2'></i><i class='icon-star-full2'></i></div> 56 ratings",
|
||||
},
|
||||
{
|
||||
cover: "https://thumb-tf.s3.envato.com/files/84750409/icon.png",
|
||||
title: "<a href='http://themeforest.net/item/its-brain-responsive-bootstrap-3-admin-template/909197' target='_blank'>It's Brain - Responsive Bootstrap 3 Admin Template</a>",
|
||||
description: "It's Brain admin template is based on Bootstrap framework and includes a lot of different features. Comes with fixed and liquid layouts in both light and dark versions.",
|
||||
sales: "<strong>3902</strong>",
|
||||
comments: "<div class='text-orange mb-5'><i class='icon-star-full2'></i><i class='icon-star-full2'></i><i class='icon-star-full2'></i><i class='icon-star-full2'></i><i class='icon-star-full2'></i></div> 453 ratings",
|
||||
}
|
||||
];
|
||||
|
||||
// Define element
|
||||
var hot_html_cells = document.getElementById('hot_html_cells');
|
||||
|
||||
// Initialize with options
|
||||
var hot_html_cells_init = new Handsontable(hot_html_cells, {
|
||||
data: hot_html_cells_data,
|
||||
colWidths: [50, 120, 200, 60, 50],
|
||||
rowHeights: 111, // 80px img height + 30px margin + 1px border
|
||||
stretchH: 'all',
|
||||
colHeaders: ["Icon", "Name", "Description", "Sales", "Rating"],
|
||||
columns: [
|
||||
{data: "cover", renderer: coverRenderer},
|
||||
{data: "title", renderer: "html"},
|
||||
{data: "description", renderer: "html"},
|
||||
{data: "sales", renderer: "html", className: 'htCenter'},
|
||||
{data: "comments", renderer: "html", className: 'htCenter'},
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
// 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 : '';
|
||||
});
|
||||
}
|
||||
|
||||
// Renderer for image
|
||||
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.className = 'img-responsive';
|
||||
img.style.margin = '15px auto';
|
||||
img.style.height = 80;
|
||||
img.src = value;
|
||||
|
||||
Handsontable.Dom.addEvent(img, 'mousedown', function (e){
|
||||
e.preventDefault(); // prevent selection quirk
|
||||
});
|
||||
|
||||
Handsontable.Dom.empty(td);
|
||||
td.appendChild(img);
|
||||
}
|
||||
else {
|
||||
Handsontable.renderers.TextRenderer.apply(this, arguments); // render as text
|
||||
}
|
||||
|
||||
return td;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Rendering custom HTML in header
|
||||
// ------------------------------
|
||||
|
||||
// Demo data for 2 examples
|
||||
var car_data = [
|
||||
{car: "Mercedes", model: "GL500", date: "11/01/2015", price: 32500, share: 0.64},
|
||||
{car: "Chevrolet", model: "Camaro", date: "11/02/2015", price: 42400, share: 0.37},
|
||||
{car: "Dodge", model: "Charger", date: "11/03/2015", price: 24900, share: 0.33},
|
||||
{car: "Hummer", model: "H3", date: "11/04/2015", price: 54000, share: 0.15},
|
||||
{car: "Chevrolet", model: "Tahoe", date: "11/05/2015", price: 29300, share: 0.27},
|
||||
{car: "Toyota", model: "Land Cruiser", date: "11/06/2015", price: 54500, share: 0.43},
|
||||
{car: "Nissan", model: "GTR", date: "11/07/2015", price: 44900, share: 0.35},
|
||||
{car: "Porsche", model: "Cayenne", date: "11/08/2015", price: 35000, share: 0.63},
|
||||
{car: "Volkswagen", model: "Touareg", date: "11/09/2015", price: 41000, share: 0.15},
|
||||
{car: "BMW", model: "X5", date: "11/10/2015", price: 48800, share: 0.35},
|
||||
{car: "Audi", model: "Q7", date: "11/11/2015", price: 21000, share: 0.53},
|
||||
{car: "Cadillac", model: "Escalade", date: "11/12/2015", price: 63900, share: 0.38}
|
||||
];
|
||||
|
||||
// Define element
|
||||
var hot_html_header = document.getElementById('hot_html_header');
|
||||
|
||||
// Initialize with options
|
||||
var hot_html_header_init = new Handsontable(hot_html_header, {
|
||||
data: car_data,
|
||||
stretchH: 'all',
|
||||
columns: [
|
||||
{
|
||||
data: 'car',
|
||||
renderer: customRenderer
|
||||
},
|
||||
{
|
||||
data: 'model'
|
||||
},
|
||||
{
|
||||
data: 'date',
|
||||
type: 'date',
|
||||
dateFormat: 'MM/DD/YYYY',
|
||||
correctFormat: true
|
||||
},
|
||||
{
|
||||
data: 'price',
|
||||
type: 'numeric',
|
||||
className: 'htLeft',
|
||||
format: '0,0.00 $'
|
||||
},
|
||||
{
|
||||
data: 'share',
|
||||
type: 'numeric',
|
||||
className: 'htLeft',
|
||||
format: '0%'
|
||||
}
|
||||
],
|
||||
colHeaders: function (col) {
|
||||
var txt;
|
||||
|
||||
switch (col) {
|
||||
case 0:
|
||||
txt = "<span class='position-left'>Brand</span> <input type='checkbox' class='hot-checker' ";
|
||||
txt += isChecked ? 'checked="checked">' : '>';
|
||||
return txt;
|
||||
|
||||
case 1:
|
||||
return '<strong>Model</strong>';
|
||||
|
||||
case 2:
|
||||
return '<i class="icon-calendar3 position-left"></i> Date';
|
||||
|
||||
case 3:
|
||||
return '<u><i>Price</i></u>';
|
||||
|
||||
case 4:
|
||||
return 'Share <sup>%</sup>';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Setup custom renderer
|
||||
var isChecked;
|
||||
function customRenderer(instance, td) {
|
||||
Handsontable.renderers.TextRenderer.apply(this, arguments);
|
||||
|
||||
if (isChecked) {
|
||||
td.style.backgroundColor = '#F1F8E9';
|
||||
}
|
||||
else {
|
||||
td.style.backgroundColor = '';
|
||||
}
|
||||
|
||||
return td;
|
||||
}
|
||||
|
||||
// Mousedown event
|
||||
Handsontable.Dom.addEvent(hot_html_header, 'mousedown', function (event) {
|
||||
if (event.target.nodeName == 'INPUT' && event.target.className == 'hot-checker') {
|
||||
event.stopPropagation();
|
||||
}
|
||||
});
|
||||
|
||||
// Mouseup event
|
||||
Handsontable.Dom.addEvent(hot_html_header, 'mouseup', function (event) {
|
||||
if (event.target.nodeName == 'INPUT' && event.target.className == 'hot-checker') {
|
||||
isChecked = !event.target.checked;
|
||||
hot_html_header_init.render();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Change column type
|
||||
// ------------------------------
|
||||
|
||||
// Define element
|
||||
var hot_change_type = document.getElementById('hot_change_type');
|
||||
|
||||
// Setup columns
|
||||
var columns = [
|
||||
{type: 'numeric', data: 'car'},
|
||||
{type: 'numeric', data: 'model'},
|
||||
{type: 'date', data: 'date'},
|
||||
{type: 'numeric', data: 'price', className: 'htLeft', format: '0,0.00 $'},
|
||||
{type: 'numeric', data: 'share', className: 'htLeft', format: '0%'}
|
||||
];
|
||||
|
||||
// Initialize with options
|
||||
var hot_change_type = new Handsontable(hot_change_type,{
|
||||
data: car_data,
|
||||
colHeaders: true,
|
||||
stretchH: 'all',
|
||||
columns: columns,
|
||||
afterGetColHeader: function(col, TH) {
|
||||
var instance = this,
|
||||
menu = buildMenu(columns[col].type),
|
||||
button = buildButton();
|
||||
|
||||
addButtonMenuEvent(button, menu);
|
||||
|
||||
// Click event
|
||||
Handsontable.Dom.addEvent(menu, 'click', function (event) {
|
||||
if (event.target.nodeName == 'LI') {
|
||||
setColumnType(col, event.target.data['colType'], instance);
|
||||
}
|
||||
});
|
||||
if (TH.firstChild.lastChild.nodeName === 'BUTTON') {
|
||||
TH.firstChild.removeChild(TH.firstChild.lastChild);
|
||||
}
|
||||
TH.firstChild.appendChild(button);
|
||||
TH.style['white-space'] = 'normal';
|
||||
}
|
||||
});
|
||||
|
||||
// Add button in headers
|
||||
function addButtonMenuEvent(button, menu) {
|
||||
Handsontable.Dom.addEvent(button, 'click', function (event) {
|
||||
var changeTypeMenu, position, removeMenu;
|
||||
|
||||
// Append menu
|
||||
document.body.appendChild(menu);
|
||||
|
||||
// Cancel click events
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
|
||||
// Add class name
|
||||
changeTypeMenu = document.querySelectorAll('.changeTypeMenu');
|
||||
|
||||
// Hide menu
|
||||
for (var i = 0, len = changeTypeMenu.length; i < len; i++) {
|
||||
changeTypeMenu[i].style.display = 'none';
|
||||
}
|
||||
|
||||
// Show menu
|
||||
menu.style.display = 'block';
|
||||
|
||||
// Mneu positioning
|
||||
position = button.getBoundingClientRect();
|
||||
menu.style.top = (position.top + (window.scrollY || window.pageYOffset)) + 2 + 'px';
|
||||
menu.style.left = (position.left) - 137 + 'px';
|
||||
|
||||
// Remove menu
|
||||
removeMenu = function (event) {
|
||||
if (event.target.nodeName == 'LI' && event.target.parentNode.className.indexOf('changeTypeMenu') !== -1) {
|
||||
if (menu.parentNode) {
|
||||
menu.parentNode.removeChild(menu);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Events
|
||||
Handsontable.Dom.removeEvent(document, 'click', removeMenu);
|
||||
Handsontable.Dom.addEvent(document, 'click', removeMenu);
|
||||
});
|
||||
}
|
||||
|
||||
// Build menu
|
||||
function buildMenu(activeCellType){
|
||||
|
||||
// Define elements
|
||||
var menu = document.createElement('UL'),
|
||||
types = ['text', 'numeric', 'date'],
|
||||
item;
|
||||
|
||||
// Add class name
|
||||
menu.className = 'changeTypeMenu';
|
||||
|
||||
// Menu items
|
||||
for (var i = 0, len = types.length; i< len; i++) {
|
||||
item = document.createElement('LI');
|
||||
if('innerText' in item) {
|
||||
item.innerText = types[i];
|
||||
} else {
|
||||
item.textContent = types[i];
|
||||
}
|
||||
|
||||
item.data = {'colType': types[i]};
|
||||
|
||||
if (activeCellType == types[i]) {
|
||||
item.className = 'active';
|
||||
}
|
||||
menu.appendChild(item);
|
||||
}
|
||||
|
||||
return menu;
|
||||
}
|
||||
|
||||
// Build button
|
||||
function buildButton() {
|
||||
|
||||
// Define element
|
||||
var button = document.createElement('BUTTON');
|
||||
|
||||
// Add attributes and extra content
|
||||
button.innerHTML = '<i class="icon-arrow-down22"></i>';
|
||||
button.className = 'changeType';
|
||||
|
||||
return button;
|
||||
}
|
||||
|
||||
// Set columns type
|
||||
function setColumnType(i, type, instance) {
|
||||
columns[i].type = type;
|
||||
instance.updateSettings({columns: columns});
|
||||
instance.validateCells(function() {
|
||||
instance.render();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Checkbox true/false values
|
||||
// ------------------------------
|
||||
|
||||
// Add data
|
||||
var hot_checks_values_data = [
|
||||
{car: "Mercedes", model: "GL500", year: 2012, price: 32500, available: true},
|
||||
{car: "Chevrolet", model: "Camaro", year: 2012, price: 42400, available: false},
|
||||
{car: "Dodge", model: "Charger", year: 2012, price: 24900, available: true},
|
||||
{car: "Hummer", model: "H3", year: 2012, price: 54000, available: true},
|
||||
{car: "Chevrolet", model: "Tahoe", year: 2012, price: 29300, available: false},
|
||||
{car: "Toyota", model: "Land Cruiser", year: 2012, price: 54500, available: true},
|
||||
{car: "Nissan", model: "GTR", year: 2012, price: 44900, available: false},
|
||||
{car: "Porsche", model: "Cayenne", year: 2012, price: 35000, available: false},
|
||||
{car: "Volkswagen", model: "Touareg", year: 2012, price: 41000, available: true},
|
||||
{car: "BMW", model: "X5", year: 2012, price: 48800, available: true},
|
||||
{car: "Audi", model: "Q7", year: 2012, price: 21000, available: false},
|
||||
{car: "Cadillac", model: "Escalade", year: 2012, price: 63900, available: true}
|
||||
];
|
||||
|
||||
// Define element
|
||||
var hot_checks_values = document.getElementById('hot_checks_values');
|
||||
|
||||
// Initialize with options
|
||||
var hot_checks_values_init = new Handsontable(hot_checks_values, {
|
||||
data: hot_checks_values_data,
|
||||
stretchH: 'all',
|
||||
colHeaders: ['Brand', 'Model', 'Year', 'Price', 'Available'],
|
||||
columns: [
|
||||
{
|
||||
data: 'car'
|
||||
},
|
||||
{
|
||||
data: 'model'
|
||||
},
|
||||
{
|
||||
data: 'year',
|
||||
type: 'numeric',
|
||||
className: 'htLeft',
|
||||
},
|
||||
{
|
||||
data: 'price',
|
||||
type: 'numeric',
|
||||
className: 'htLeft',
|
||||
format: '0,0.00 $'
|
||||
},
|
||||
{
|
||||
data: 'available',
|
||||
type: 'checkbox',
|
||||
className: 'htCenter',
|
||||
width: 20
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Checkbox labels
|
||||
// ------------------------------
|
||||
|
||||
// Add sample data
|
||||
var hot_checks_labels_data = [
|
||||
{car: "Mercedes", model: "GL500", date: "11/01/2015", price: 32500, share: 0.64, available: 'yes'},
|
||||
{car: "Chevrolet", model: "Camaro", date: "11/02/2015", price: 42400, share: 0.37, available: 'yes'},
|
||||
{car: "Dodge", model: "Charger", date: "11/03/2015", price: 24900, share: 0.33, available: 'no'},
|
||||
{car: "Hummer", model: "H3", date: "11/04/2015", price: 54000, share: 0.15, available: 'no'},
|
||||
{car: "Chevrolet", model: "Tahoe", date: "11/05/2015", price: 29300, share: 0.27, available: 'yes'},
|
||||
{car: "Toyota", model: "Land Cruiser", date: "11/06/2015", price: 54500, share: 0.43, available: 'yes'},
|
||||
{car: "Nissan", model: "GTR", date: "11/07/2015", price: 44900, share: 0.35, available: 'no'},
|
||||
{car: "Porsche", model: "Cayenne", date: "11/08/2015", price: 35000, share: 0.63, available: 'no'},
|
||||
{car: "Volkswagen", model: "Touareg", date: "11/09/2015", price: 41000, share: 0.15, available: 'yes'},
|
||||
{car: "BMW", model: "X5", date: "11/10/2015", price: 48800, share: 0.35, available: 'no'},
|
||||
{car: "Audi", model: "Q7", date: "11/11/2015", price: 21000, share: 0.53, available: 'no'},
|
||||
{car: "Cadillac", model: "Escalade", date: "11/12/2015", price: 63900, share: 0.38, available: 'yes'}
|
||||
];
|
||||
|
||||
// Define element
|
||||
var hot_checks_labels = document.getElementById('hot_checks_labels');
|
||||
|
||||
// Initialize with options
|
||||
var hot_checks_labels_init = new Handsontable(hot_checks_labels, {
|
||||
data: hot_checks_labels_data,
|
||||
stretchH: 'all',
|
||||
colHeaders: ['Brand', 'Model', 'Date', 'Price', 'Share'],
|
||||
columns: [
|
||||
{
|
||||
data: 'car'
|
||||
},
|
||||
{
|
||||
data: 'available',
|
||||
type: 'checkbox',
|
||||
checkedTemplate: 'yes',
|
||||
uncheckedTemplate: 'no',
|
||||
label: {
|
||||
property: 'model' // Read value from row object
|
||||
}
|
||||
},
|
||||
{
|
||||
data: 'date',
|
||||
type: 'date'
|
||||
},
|
||||
{
|
||||
data: 'price',
|
||||
type: 'numeric',
|
||||
className: 'htLeft',
|
||||
format: '0,0.00 $'
|
||||
},
|
||||
{
|
||||
data: 'share',
|
||||
type: 'numeric',
|
||||
className: 'htLeft',
|
||||
format: '0%',
|
||||
width: 30
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Checkbox template
|
||||
// ------------------------------
|
||||
|
||||
// Add data
|
||||
var hot_checks_template_data = [
|
||||
{car: "Mercedes", model: "GL500", year: 2012, price: 32500, available: 'no'},
|
||||
{car: "Chevrolet", model: "Camaro", year: 2012, price: 42400, available: 'yes'},
|
||||
{car: "Dodge", model: "Charger", year: 2012, price: 24900, available: 'no'},
|
||||
{car: "Hummer", model: "H3", year: 2012, price: 54000, available: 'yes'},
|
||||
{car: "Chevrolet", model: "Tahoe", year: 2012, price: 29300, available: 'yes'},
|
||||
{car: "Toyota", model: "Land Cruiser", year: 2012, price: 54500, available: 'no'},
|
||||
{car: "Nissan", model: "GTR", year: 2012, price: 44900, available: 'yes'},
|
||||
{car: "Porsche", model: "Cayenne", year: 2012, price: 35000, available: 'no'},
|
||||
{car: "Volkswagen", model: "Touareg", year: 2012, price: 41000, available: 'yes'},
|
||||
{car: "BMW", model: "X5", year: 2012, price: 48800, available: 'no'},
|
||||
{car: "Audi", model: "Q7", year: 2012, price: 21000, available: 'no'},
|
||||
{car: "Cadillac", model: "Escalade", year: 2012, price: 63900, available: 'yes'}
|
||||
];
|
||||
|
||||
// Define element
|
||||
var hot_checks_template = document.getElementById('hot_checks_template');
|
||||
|
||||
// Initialize with options
|
||||
var hot_checks_template_init = new Handsontable(hot_checks_template, {
|
||||
data: hot_checks_template_data,
|
||||
stretchH: 'all',
|
||||
colHeaders: ['Brand', 'Model', 'Year', 'Price', 'Available'],
|
||||
columns: [
|
||||
{
|
||||
data: 'car'
|
||||
},
|
||||
{
|
||||
data: 'model'
|
||||
},
|
||||
{
|
||||
data: 'year',
|
||||
type: 'numeric',
|
||||
className: 'htLeft',
|
||||
},
|
||||
{
|
||||
data: 'price',
|
||||
type: 'numeric',
|
||||
className: 'htLeft',
|
||||
format: '0,0.00 $'
|
||||
},
|
||||
{
|
||||
data: 'available',
|
||||
type: 'checkbox',
|
||||
checkedTemplate: 'yes',
|
||||
className: 'htCenter',
|
||||
uncheckedTemplate: 'no',
|
||||
width: 20
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user