List edit
The listedit element allows to edit the data in the displayed rows. Rows can be added and deleted.
The listedit element can be used with and without Ajax support. With Ajax support values saved and deleted on the server; without it, manage it by your own.
The data import and export by copy and paste is supported.
Attention a data validation is yet not implented in the front end. Saving invalid data in the back end is prevented.
User manual
Controls in the head line:
- Clear: empties the tabulator-list (url reload: all records are displayed again)
- Delete: selected? yes deletes selected rows, otherwise deletes all rows
- Save: selected? yes saves selected rows, otherwise saves all rows
Controls in the title line:
- ☐: select or deselet all
- sort: ▲ ascending, ▼ decending
- filter: write in your string, < and > are also allowed
- ⋮ :Attention choose decimal point manual
- : new row (record)
Controls in the rows (record):
- ☐: select or deselet the row
- : original record
- : changed record, save it
- : delete record
- : delete row, (record not saved yet)
Keyboard, table navigation
- ↑ ↓: row up or down
- ↹ ⇧Shift: next cell or cell back
Keyboard, edit
- ← →: move between the caracters
- ↑ ↓: number or date counts up or down
- space: by datetime opens the wizard
Copy & paste
- ctrl-c: Copy to the clipboard (seleted rows are copied
- ctrl-v: Paste from the clipboard (click a free space of the list (tabulator) first.
Developer
Place a listedit element on your page
The listedit element is made with the tabulator library.
The basic tabulator data structure is extended by the list edit element:
- k8.datadefAddlistedit(settings)
The element is displayed by the function:
- k8.displaytabulator(selector,settings)
It returns a tabulator object:
- mytableTab
Configurations
tabulatoreditajax
True, adds a save button to the right of each row. If a cell is edited, it needs to be saved by button click.
tabulatormode
- 0: none
- 1: adds a save button in the foot
- 2: adds a save button in the foot and removew the row after save
tabulatorbinsert
tabulatorbinsert defines the position of a new row:
- true: adds new row at the top
- false: adds new row at the bottom
tabulatorwrapper
True, adds a tabulatorwrapper with headline.
bresize
True, adds a resizer.
Editors
Automatic by listedit
Different data types need different Editors. The editors can be defined in the tabulator data structure. Without an explicit definition the listedit element automatically supports:
- input
- number
- date
- time
- datetime