Initializing

The very first step to enable jQuery Calx, is to load jQuery and the jQuery Calx itself

   

Like any other jQuery plugin, it is easy to initialize jQuery Calx, you just need to prepare the element with configured data-cell, and/or data-formula, and/or data-format attribute and call $('selector').calx() to enable jQuery Calx.

We are using data-cell attribute to define the cell address, optional data-formula attribute to define the calculation formula, and optional data-format attribute to define formatting rule, and then, let jQuery Calx do the magic.

Once jQuery Calx is initialized, it will respond to any changes occured in cell’s element, and do the calculation based on the cell value and formula, let’s see below example:

In the above sample code snippet, A4 will display whatever result of SUM(A1:A3), any change occured in A1, A2, or A3 will be represented in A4 since A4 depend on cell ranged from A1 to A3.

If you are familiar with any spreadsheet application like Microsoft Excel or LibreOffice, you will also get familiar with jQuery Calx. We use term sheet for wrapper element like form#sheet where the jQuery Calx is initialized, and cell for all element inside the form#sheet that involved in calculation process, this mean all element that has data-cell and/or data-formula attribute.

In case data-formula attribute present without data-cell attribute, jQuery Calx will assign reserved cell address prefixed with CALX and count the index incrementally, the resulting cell address will be like CALX1, CALX2,CALX3,CALX4