Data Table is Javascript Wrapper Library of HTML element .
var table = $(id).dataTable({
option
});
$(table).on('event', function(e) {
// prevent default browser action
e.preventDefault();
// some actions...
});
$(id).editable(
option
)
input mask is filled when user click editable form so, it's handled by event handler.
$(id).editable(
option
).on('event', handler_function() {
$('~div input', this).inputmask("mask", {
input mask option
}
});
formatting was handled by accounting.js func
$(id).editable(
option,
display: function(value) {
if(!value) {
$(this).empty();
return;
}
var text = accouting.formatMoney(value, {
symbol: 'any unit (text)',
format: '%v %s',
precision: 0
});
$(this).text(text);
}
);
X-Editable form + jQuery.input mask + accouting.js
// caller
maskingTo(id, {symbol: symbol, format: '%s %v', precision: 0}, click_handler);
__Mask.toLeft(id, symbol, click_handler);
// callee defination
function maskingTo(id, format_option, click_handler) {
$(id).editable('option', 'display', function(value) {
// ...
var text = accounting.formatMoney(value, format_option);
// ...
}
);
if(click_handler !== undefined) {
$(id).on('click', click_handler);
}
}
<a href="#" id="id" data-type="text"></a>
$(id).editable({
option
});
<button id="id">Edit</button>
// Editable Manager Definition
var EditableManager = function(context) {
var isNowEditable = false;
var context = context;
return {
setElementEnable: function() {
isNowEditable = true;
$('.editable', context).editable('enable');
},
setElementDisable: function() {
isNowEditable = false;
$('.editable', context).editable('disable');
},
isCurrentStateEditable: function() {
return isNowEditable;
}
};
};
// Usage of Editable Manager
var editableManager = new EditableManager('editable area id');
// enable
editableManager.setElementEnable();
// disable
editableManager.setElementDisable();