jquery.appendgrid
Version:
AppendGrid - The dynamic table input JavaScript plugin
259 lines (245 loc) • 12.9 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AppendGrid - Bulma</title>
<!--UI Framework Style Sheets-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
integrity="sha256-UDtbUHqpVVfXmdJcQVU/bfDEr9xldf3Dbd0ShD0Uf/Y=" crossorigin="anonymous">
<!--Icon Webfont Frameworks-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css"
integrity="sha256-mUZM63G8m73Mcidfrv5E+Y61y7a12O5mW4ezU3bxqW4=" crossorigin="anonymous">
<!--
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.9/typicons.min.css"
integrity="sha256-hmDtEnmZFvJ3zLsfobp03CSD3/qRCJmY3f7Vqf6zIgA=" crossorigin="anonymous" />
-->
<!--
<link href="https://unpkg.com/ionicons@4.4.4/dist/css/ionicons.min.css" rel="stylesheet" />
-->
<!--
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic.min.css"
integrity="sha256-CfN2r6i/dqkUHVRqpBzO3w21SnIWalwGfj5ScBPVzmI=" crossorigin="anonymous" />
-->
<!--
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/3.5.95/css/materialdesignicons.min.css" />
-->
</head>
<body class="container">
<h1 class="title">AppendGrid - Bulma</h1>
<form id="form" action="">
<table id="tblAppendGrid"></table>
<hr />
<button type="button" id="getAllValue1" class="button is-success">getAllValue (Array mode)</button>
<button type="button" id="getAllValue2" class="button is-success">getAllValue (Object mode)</button>
<button type="button" id="serialize" class="button is-success is-outlined" disabled="disabled">jQuery
serialize() [Not available]</button>
<hr />
<h5 class="subtitle">Output</h5>
<pre><code id="output"></code></pre>
</form>
<!-- Add polyfill for legacy browsers (such as IE) -->
<script src="https://polyfill.io/v3/polyfill.min.js"></script>
<!-- Add optional libraries -->
<!-- plugin initialization -->
<script>
document.addEventListener('DOMContentLoaded', function () {
// Create instance of AppendGrid
window.myAppendGrid = new AppendGrid({
element: document.getElementById('tblAppendGrid'),
uiFramework: 'bulma',
uiParams: {
// useButtonGroup: false,
// sectionClasses: { remove: 'btn-danger' },
sizing: 'small'
},
iconFramework: 'fontawesome5',
// iconFramework: 'materialdesignicons3',
// iconFramework: 'typicons2',
// iconFramework: 'openiconic',
/*
iconParams: {
icons: {
append: 'typcn typcn-social-twitter',
removeLast: 'typcn typcn-social-skype'
}
},
*/
// Optional CSS classes for Bulma
sectionClasses: {
table: 'is-fullwidth',
empty: 'has-background-warning'
},
// hideButtons: { moveUp: true, moveDown: true },
columns: [{
name: 'company',
display: 'Company',
type: 'readonly',
// headerSpan: 2,
// displayClass: 'has-text-centered',
ctrlAttr: { maxlength: 100 },
events: {
click: function (e) {
alert(e.uniqueIndex);
},
change: function (e) {
alert(e.columnName);
}
}
}, {
name: 'name',
display: 'Contact Person',
type: 'text',
ctrlAttr: { maxlength: 100 },
ctrlCss: { backgroundColor: '#eeffee' }
}, {
name: 'country',
display: 'Country',
type: 'select',
cellCss: { backgroundColor: '#ffeeee' },
ctrlOptions: ['', 'Germany', 'Hong Kong', 'Japan', 'Malaysia', 'Taiwan', 'United Kingdom', 'United States']
}, {
name: 'isNPO',
display: 'NPO?',
type: 'checkbox',
cellClass: 'has-text-centered',
displayCss: { color: '#ff9900' }
}, {
name: 'orderPlaced',
display: 'Order Placed',
type: 'number',
ctrlAttr: {
min: 0,
max: 10000
},
emptyCriteria: function (value) {
// Empty or value equals to 0 will consider as empty.
var numeric = parseFloat(value);
if (!isNaN(numeric) && numeric > 0) {
// Value is numeric and greater than zero
return false;
}
return true;
},
displayClass: 'has-background-warning'
}, {
name: 'memberSince',
display: 'Member Since',
type: 'date',
ctrlAttr: {
maxlength: 10
}
/*
}, {
name: 'time',
display: 'Time',
type: 'custom',
customBuilder: function (ctrlHolder, idPrefix, name, uniqueIndex) {
var wrapper = document.createElement('div');
wrapper.id = idPrefix + '_' + name + '_' + uniqueIndex;
wrapper.classList.add('field', 'has-addons', 'is-small');
ctrlHolder.appendChild(wrapper);
var hourWrapper1 = document.createElement('div');
hourWrapper1.classList.add('control');
wrapper.appendChild(hourWrapper1);
var hourWrapper2 = document.createElement('div');
hourWrapper2.classList.add('select');
hourWrapper1.appendChild(hourWrapper2);
var hourElem = document.createElement('select');
hourElem.id = idPrefix + '_' + name + '_hour_' + '_' + uniqueIndex;
hourElem.name = hourElem.id;
hourElem.classList.add('form-control');
hourWrapper2.appendChild(hourElem);
for (var h = 0; h < 24; h++) {
var option = document.createElement('option');
option.value = (h < 10 ? '0' : '') + h;
option.innerText = option.value;
hourElem.appendChild(option);
}
var minuteWrapper1 = document.createElement('div');
minuteWrapper1.classList.add('control');
wrapper.appendChild(minuteWrapper1);
var minuteWrapper2 = document.createElement('div');
minuteWrapper2.classList.add('select');
minuteWrapper1.appendChild(minuteWrapper2);
var minuteElem = document.createElement('select');
minuteElem.id = idPrefix + '_' + name + '_minute_' + '_' + uniqueIndex;
minuteElem.name = minuteElem.id;
minuteElem.classList.add('form-control');
minuteWrapper2.appendChild(minuteElem);
for (var m = 0; m < 60; m += 5) {
var option = document.createElement('option');
option.value = (m < 10 ? '0' : '') + m;
option.innerText = option.value;
minuteElem.appendChild(option);
}
},
customGetter: function (idPrefix, columnName, uniqueIndex) {
var hour = document.getElementById(idPrefix + '_' + columnName + '_hour_' + '_' + uniqueIndex).value;
var minute = document.getElementById(idPrefix + '_' + columnName + '_minute_' + '_' + uniqueIndex).value;
return hour + ':' + minute;
},
customSetter: function (idPrefix, columnName, uniqueIndex, data) {
if (data && 0 === data.search(/^[0-9]{2}\:[0-9]{2}$/g)) {
document.getElementById(idPrefix + '_' + columnName + '_hour_' + '_' + uniqueIndex).value = data.substring(0, 2);
document.getElementById(idPrefix + '_' + columnName + '_minute_' + '_' + uniqueIndex).value = data.substring(3);
}
}
*/
}, {
name: 'uid',
type: 'hidden'
}],
// The callback function for format the HTML name of generated controls.
nameFormatter: function (idPrefix, name, uniqueIndex) {
return name + '-' + uniqueIndex;
},
// The callback function to be triggered after all data loaded to grid.
dataLoaded: function (table, records) {
console.log('agc: [' + table.id + ']dataLoaded=' + records.length);
},
// The callback function to be triggered after data loaded to a row.
rowDataLoaded: function (table, record, rowIndex, uniqueIndex) {
console.log('agc: [' + table.id + ']rowDataLoaded=' + JSON.stringify(record));
},
// The callback function to be triggered after new row appended.
afterRowAppended: function (table, rowIndex) {
console.log('agc: [' + table.id + ']afterRowAppended=' + rowIndex);
},
// The callback function to be triggered after new row inserted.
afterRowInserted: function (table, rowIndex) {
console.log('agc: [' + table.id + ']afterRowInserted=' + rowIndex);
},
// The callback function to be triggered after grid row swapped.
afterRowSwapped: function (table, oldRowIndex, newRowIndex) {
console.log('agc: [' + table.id + ']afterRowSwapped=' + oldRowIndex + ',' + newRowIndex);
},
// The callback function to be triggered before grid row remove.
beforeRowRemove: function (table, rowIndex) {
// return confirm('agc: [' + table.id + ']Are you sure to remove this row?');
return true;
},
// The callback function to be triggered after grid row removed.
afterRowRemoved: function (table, rowIndex) {
console.log('agc: [' + table.id + ']afterRowRemoved=' + rowIndex);
},
// Test max row
maxRowsAllowed: 10,
maxNumRowsReached: function () {
alert('Max row reached!');
},
// Use sample data in `dev-data.js`, if loaded
initData: window.myAppendGridInitData || null
// initData: null
});
// Add button event
document.getElementById('getAllValue1').addEventListener('click', function () {
document.getElementById('output').innerText = JSON.stringify(window.myAppendGrid.getAllValue(), null, ' ');
});
document.getElementById('getAllValue2').addEventListener('click', function () {
document.getElementById('output').innerText = JSON.stringify(window.myAppendGrid.getAllValue(true), null, ' ');
});
});
</script>
</body>
</html>