under construction

Simple Catalog


The first catalog example needs no tables. Take an easy Javascript datastructre and simple HTML templates for the first 3 exercises:

In this excercise you create the following pages:

  • a simple phone list
  • an editable phone list
  • an easy catalog

Crud functions:

  • Create, New record
  • Read, Load record
  • Update, Save record
  • Delete record

HTML template with all libraries


This example has no connection to the database. Its Html, JavaScript and jQuery.

Create your file test_html.html in the root folder. Copy the Html template in it. Look for the comment:

<!-- put your html here -->

The html of this exercises you have to put in here.

For our 1st example, only this libraries are necessary:

  • jQuery
  • bootstrap
  • masterdata

Just ignore the rest.

Simple Phone list

We use an easy basic setting for an output:

  • data array
  • masterdata properties
  • html template: container and record

Insert this html in your test file at this position:

<!-- put your html here -->


Create the sample_test_simple.js in the js folder.

The object settings is prepared with the following properties:

  • data, an array with the records to be displayed
  • masterdata
    • htmlout: catalog, this is the html category with is filled in the html tag
    • placeholder_mode: 2, the placeholders are encapsulated with {{placeholder}}
  • html/catalog
    • container, this html contains header, headline and footline
    • record, the html for each recordset

In JavaSript its easy to put the html code in 1 line. To format or to compress it, the following links are helpful:

Phone list with controls

This is still your phone list with the same data. The html template now consists a flex box containers to display the table. The controls are also part of your html. The JavaScript functionality for the controls is added by the masterdata plugin.


Insert this html in your test file at this position:

<!-- put your html here -->

JavasScript: js/sample_test_lineedit.js
html for the container: kitsamples/test_html_lineedit_container.html
html for the records: kitsamples/test_html_lineedit_record.html

The controls and the JavaScript class

  • js_rec_new, plus, adds a new line
  • js_rec_edit, edit the line
  • js_rec_cancel, cancel editing
  • js_rec_save, save line, this button is added automatically to the element with the class="js_contain_submit".
  • js_rec_delete, delete the line


JavasScript: js/sample_test_catalog.js
html for the container: kitsamples/test_html_catalog_container.html
html for the records: kitsamples/test_html_catalog_record.html
Plugin catalog

The plugin returns the following methods:

  • getData()[index]
  • insertRecord(dat,selector,method)
  • replaceRecord(dat,selector)
  • deleteRecord(record,selector)

With this main methods you determine the appearance of the plugin from outside. Other methods will be available by connecting the plugin by Ajax with a dataset.

More button

Have a look to the button "More", .js_mybtn. In the parent ".js_rec_record" the dataset "rec_index" is assigend to the variable index. With the function getData()[index] you get acces to the properties of the record; example for text1:


You need a key column to get access the lines from outside