formulize supports custom property, check the insert()
$formulize.getData();
const result = $formulize.data('$formulize').getData();
// result.data is parsed formula tree
console.log(result.data);
name | type | description | default |
---|---|---|---|
|
string | the identifier used class prefix | 'formulize' |
|
string | text for a default status | 'formula' |
|
string | text for a pass status(ms) | 'pass' |
|
string | text for an error status | 'error' |
|
function | a pipeline function for convert imported data | undefined |
|
function | a pipeline function for convert exported data | undefined |
$formulize.method()
name | type | description |
---|---|---|
|
function
|
pick the position (x, y), this function can move the current cursor |
|
function
|
set formula expression data |
|
function
|
get a formula data, the data type is a Tree type |
|
function
|
drag a range, the range parameter is index position of the expression unit |
|
function
|
drag all in the formula |
|
function
|
clear all expression in the formula |
|
function
|
blur the cursor in the formula |
|
function
|
remove drag, dragged unit will be undragged |
|
function
|
insert data, data can be HTMLElement
or JQuery |
|
function
|
insert formal string or array data |
|
function
|
insert a character |
|
function
|
validate current expression validation, if it is valid, will returns true |
$formulize.on('formulize.eventName', (event: Event, value: any) => {})
name | type | description |
---|---|---|
|
event
|
when the formula expression is updated, this event will be called |
$ npm install formulize
$ yarn add formulize
<div id="formulize"></div>
import { UI } from 'formulize';
const target = document.getElementById('formulize');
const formulize = new UI(target, {
...options
});
const data: Tree = {
operator: '*',
operand1: { value: { type: 'unit', unit: 1 } },
operand2: { value: { type: 'unit', unit: 2 } }
};
formulize.setData(data);
import { UI } from 'formulize';
const target = document.getElementById('formulize');
const formulize = new UI(target, {
...options
});
const data = {
operator: '*',
operand1: { value: { type: 'unit', unit: 1 } },
operand2: { value: { type: 'unit', unit: 2 } }
};
formulize.setData(data);
$(function() {
$('#formulize').formulize({
...options
});
const formulize = $('#formulize').data('$formulize');
const data = {
operator: '*',
operand1: { value: { type: 'unit', unit: 1 } },
operand2: { value: { type: 'unit', unit: 2 } }
};
formulize.setData(data);
// unrecommended way
$('#formulize').setData(data);
});