under construction

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

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

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:

example for horizonal form

Dropzone

Open source file upload

DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.

It’s lightweight, doesn’t depend on any other library (like jQuery) and is highly customizable.

Dropzone website

Please, have a look to

TCPDF

Open source PDF creation

TCPDF is a free Open Source PHP class for generating PDF documents.

TCPDF website

Please, have a look to