Usage of X-Editable Form with Input Mask, Formatting (Accounting.js)

data_table.md

Data Table Usage

Basic Usage

Data Table is Javascript Wrapper Library of HTML element .

var table = $(id).dataTable({
  option
});

Event Handling

$(table).on('event', function(e) {
  // prevent default browser action
  e.preventDefault();
  
  // some actions...
});

usage.md

X-Editable with input mask, formatting

---

Simple Form

$(id).editable(
  option
)

Simple Form with input mask

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
  }
});

Simple Form with formatting

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);
  }
);

Simple form with input maks, formatting

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);
  }
}

x-editable_form.md

Simple X-Editable Form Usage

Basic Usage

<a href="#" id="id" data-type="text"></a>

$(id).editable({
  option
});

Toggle Editable

<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();

• There are very important thing about usage of Editable Manager.
• setElementEnable fn just make enable only elements having editable class
• so, it needs to customizing about other components not having editable class (ex: button, checkbox)