#jQuery Calx
jQuery Calx is an Excel calculation engine and formula parser built as jQuery plugin, it offer spreadsheet ability to process and calculate the formula without bringing table-like spreadsheet interface.
In the core of jQuery Calx is formula parser generated using jison which parse and process the formula and set of formulas imported from formula.js.
Creating calculation form in html never been easier and simpler than this:
<form id="calx_form">
<input data-cell="A1">
<input data-cell="A2">
<input data-cell="A3">
<input data-formula="SUM(A1:A3)">
<input data-formula="AVERAGE(A1:A3)">
<input data-formula="(A1+A2)*A3">
<input data-formula="(A1^2)+(A2^2)+(A3^2)">
</form>
<script>
$('#calx_form').calx();
</script>If you don't want the formula make your html looks messy, you can move all formula and formatting rule into the js, and leave only data-cell attribute.
<form id="calx_form">
<input data-cell="A1">
<input data-cell="A2">
<input data-cell="A3">
<input data-cell="B1">
<input data-cell="B2">
<input data-cell="B3">
<input data-cell="B4">
</form>
<script>
$('#calx_form').calx({
data : {
B1 : {format: '$ 0,0', formula: 'SUM(A1:A3)'},
B2 : {format: '0.00', formula: 'AVERAGE(A1:A3)'},
B3 : {formula: 'LOG(A1)*(A2/A3)'},
B4 : {formula: 'MAX(A1:A3)'}
}
});
</script>You can even completely remove hidden cell that act as proxy or intermediate cell and move it to javascript section
<form id="calx_form">
<input data-cell="B4">
</form>
<script>
$('#calx_form').calx({
data : {
B1 : {value: '100'},
B2 : {value: '200'},
B3 : {formula: 'B1+B2'},
B4 : {formula: 'B3^2'}
}
});
</script>You can install jQuery Calx by downloading the latest version from this repository, or install it using bower
bower install jquery-calx
or
bower install xsanisty/jquery-calx
and load the required script into your html page
<!-- the only required dependency -->
<script src="jquery.min.js"></script>
<!-- required for number formatting only -->
<script src="numeral.min.js"></script>
<!-- the jquery calx lib -->
<script src="jquery-calx-2.2.7.min.js"></script>For detailed documentation, http://www.xsanisty.com/project/calx2.
For jQuery Calx 1.x please visit http://www.xsanisty.com/project/calx
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent