@@ -39,6 +39,16 @@ The full list of options is below. Simple options can be specified as `data-` at
- strings specify a numeral.js format if the value is a number (you must include numeral.js)
- strings specify a moment.js format if the value is a date (you must include moment.js)
-`editable`: `true` (default) / `false`. When `true`, edit and save buttons appears at end of each row.
- To bind UI input element such as dropdown, datepicker, radio etc., `editable` accepts an object with these keys.
-`input`: **Mandatory**. The type of input element to use. The valid values are checkbox, radio, range, select, and any other legal [HTML form input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input).
-`options`: An array of options to select from. **Mandatory** if `input` is either of `select` or `radio`
-`attrs`: To place common attributes such as max, min, placeholder, name etc., on the `input` element.
Example:
`input: 'number', attrs: {step: 10, placeholder: '0 - 1000', name: 'some_name'}` would render as
- `template`: string template / function that renders the cell.
- function accepts an object with these keys:
- `name`: column name
...
...
@@ -79,8 +89,9 @@ The full list of options is below. Simple options can be specified as `data-` at
- function accepts an object with these keys:
-`row`: row data
-`index`: index of the row in the dataset from `src`
Example:
-`highlight_row`: `function(obj) { $(obj.row).addClass('.yellow_color')}`. Either a new column can be defined in `columns:` (example: {`name`: `Additional Col`}) with cell_template having an element with data attribute as `data-action='highlight_row'` or can use an existing column but with custom template that has an element with data attribute as `data-action='highlight_row'`.
-`notify(message)`: a function that shows a notification
- If the return value can be a jQuery deferred (e.g. `$.ajax`), it shows a loading indicator and a success / failure message when the deferred is resolved. Example:
-`highlight_row`: `function(obj) { $(obj.row).addClass('.yellow_color')}`. Either a new column can be defined in `columns:` (example: {`name`: `Additional Col`}) with cell_template having an element with data attribute as `data-action='highlight_row'` or can use an existing column but with custom template that has an element with data attribute as `data-action='highlight_row'`.
- Note: DELETE operation is executed on a row if an element has data attribute `data-action='delete'`. If `delete` action is given in `actions`, the function given for `delete` is executed on click of an element with `data-action='delete'` instead od executing DELETE operation.
-`table`: Shows the table control. Can be:
-`true`: displays a table (default)
...
...
@@ -157,6 +168,8 @@ Features to be implemented:
Note: Make sure `load` event listener is attached before calling `$.formhandler()`
-`editmode` is fired on the source when the Edit button is clicked and table changes to edit mode.
## $.formhandler examples
Render a table using the FormHandler at `./data`:
...
...
@@ -186,3 +199,84 @@ Customize cell rendering to display a chart in a cell:
})
</script>
```
In edit mode, show HTML input bindings like Dropdown, Datepicker, Number fields.. :