Fundamentals
Tabulator, the datatable
the tabulator datastructure
The initialization of tabulator is done by setting the html element to the tabulator library and transfering a configuration object. The object has the following parts:
- many different configuration parameters
- columns: the cloumn structure describe the layout of the columns
- data: the data of the table
- event functions
How I use tabulator
I load the data by Ajax and use the setdata() function:
tableTab.setData(url_readfilter,data_readfilter);
All coloumns get a headerfilter. All data columns are sortable. The first column is a html-column for the delete function. The formatter property allows to insert html-data.
The data is loaded after initialization or by entering a key in the header filter. With each key a request is send to the server. The actual filter is transmitted in the filter array:
- filter
- [0]
- field
- type
- value
- [0]
The filter is build up in php and the fitting records are send back to the browser.
Tabulator website: tabulator.info
For more details about Tabulator, please have a look to:
Example for the datastructure
jsonform on github
the jsonform datastructure
The initialization of tabulator is done by setting the html element to the jsonform library and transfering a configuration object. The object has the following parts:
- schema: list of field objects with name, type, title, ...
- form: array of the layout description
- event functions
jsonform, how I use it
- horizontal form
- label-left
- schema
- change the title
- required
- enum for select fields
- using step for decimal fields
- form
- change appearance of the fields, like:
- textarea, radio
- sections to get multiple blocks
- action for buttons
- change appearance of the fields, like:
Attention, I modified the jsonform.js. A documentation is following later. Please use only the jsonform.js in this "download".
Look at the html of the form
The HTML result of the form can be displayed in the inspector of the browser (F12). There you also can mark and Copy / outer html. By pasting it in an editor, its all in one line. So take the htmlformatter to get a good-looking overview.
jsonform website
Please, have a look to
example for jsonform
Bootstrap, the famous css
bootstrap form, how I use it
Additional class for horizontal forms:
- Add class
.form-horizontal
to the<form>
element - Add class
.control-label
to all<label>
elements
In regard to jsonform I am using Bootstrap 3 (v3.3.7).
more links to bootstrap forms:
- website of: Bootstrap.css
- Bootstrap Forms: Checkout Form
- w3schools Bootstrap Forms: BS Forms
example for horizonal form
Master data form, frontend and backend
Frontend, jQuery Plugin masterdata
The Master data Plugin builds up the Html structure for the master data form, joins the tabulator to the list and jsonform to the form.
You declare a "div" on your website and and call the function "displayMasterData" with the "id-selector" and the url for your form:
Backend, PHP data access
ProcessData.php
ProcessData.php gets all url-request from Javascript for the record handling and the datadefinitions.
PHP JSON: datadefinitions.php
The datadefinitions is declared in "BasicFunctions.php". You can call the datadefinition with the table name and the definition is created on the fly. The "column" part of the definition is important for the data access class.
BasicFunctions.php
The datadefinitions is declared in "BasicFunctions.php". You can call the datadefinition with the table name and the definition is created on the fly. The "column" part of the definition is important for the data access class.
PHP data access class
The data access class has the following methods:
- __construct($datadefinition)
- init()
- bexist($ID)
- bload($ID)
- getEntries($clause)
- bvalidate($postfields)
- save()
- add()
- update()
- delete($ID)