$.formhandler

An interactive table component for FormHandler data.

<div class="formhandler" data-src="formhandler-url" data-page-size="10"></div>
<script>
$('.formhandler').formhandler({
  pageSize: 20
})
</script>

Options can passed via an options dict, and over-ridden using data- attributes. In the above example, data-page-size="10" over-rides pageSize: 20.

$.formhandler options

The full list of options is below. Simple options can be specified as data- attributes as well.

Advanced. Each component can have a target which specifies a selector. For e.g., to render the export button somewhere else, use data-export-target=".navbar-export". This replaces the .navbar-export contents with the export button. (It searches within the table container for .navbar-export first, and if not found, searches everywhere.) Available targets are:

Advanced: Each component’s template string can be over-ridden. For example, data-search-template="<input type='search'>" will replace the search template with a simple input. Available template strings are:

Features to be implemented:

$.formhandler events

Note: Make sure load event listener is attached before calling $.formhandler()

$.formhandler data

When you run $(...).formhandler() on an element, you can access FormHandler-related data and methods via $(...).data('formhandler'). This returns an object with these keys:

For example:

$('.formhandler').formhander()
var data = $('.formhandler').data('formhandler')
data.data   // data displayed by component
data.meta   // metadata returned by the FormHandler
data.args   // args passed to the FormHandler

$.formhandler examples

Render from a FormHandler

<div class="formhandler" data-src="./data"></div>
<script>
  $('.formhandler').formhandler()
</script>

Access data inside formhandler

<div class="formhandler" data-src="./data"></div>
<script>
  $('.formhandler')
    .on('load', function(data, meta, args, options) {
      console.log('data inside formhandler table: ', data)
    })
    .formhandler()
</script>

Draw chart in cell

<div class="formhandler" data-src="./data"></div>
<script>
  $('.formhandler').formhandler({
    columns: [
      {name: '*'},
      {
        name: 'c1',
        format: function (o) {
          return '<svg height="10" width="10"><circle cx="5" cy="5" r="' + o.c1 / 10 + '" fill="red"></circle></svg>'
        }
      }
    }
  })
</script>

Customize inputs in edit mode

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>

<div class="edit-fh" data-src="./data"></div>
<script>
      $('.edit-fh').formhandler({
        columns: [
          {
            name: 'ID',
            editable: false     // Disable edit for column "ID" because it is a primary key and cannot be edited.
          },
          {
            name: 'Continent'  // Defaults to editable: false
          },
          {
            name: 'c1',
            editable: {
              input: 'number',
              // keys and values in `attrs` will be added as
              // <input type="number" min=10 max=100 placeholder="Age"/>
              attrs: {
                min: 10,
                max: 100,
                placeholder: 'Age'
              },
              validationMessage: 'Age must be between 0-100'
            }
          },
          {
            name: 'Stripes',
            editable: {
              input: 'select',  // renders a default select dropdown as <select class="form-control form-control-sm">...</select>
              options: [        // `options` is mandatory because `input` is "select"
                'Vertical',
                'Horizontal',
                'Diagonal'
              ]
            }
          },
          {
            name: 'Shapes',
            editable: {
              input: 'select',
              options: [
                'Circle',
                'Crescent',
                'Triangle',
                'Stars'
              ],
              attrs: {
                class: 'select-example-basic',  // To render the dropdown as select2 library dropdown, add class attribute as identifier
                name: 'shapes'
              }
            }
          },
          {
            name: 'date_col',
            editable: {
              input: 'text',
              attrs: { // To edit column "date_col" using a date picker widget using "bootstrap-datepicker" library, add class attribute as identifier
                class: 'datepicker-example form-control form-control-sm'
              }
            }
          }
        ]
      }).on('editmode', function () {
        // turns <select class="select-example-basic">...</select> to select2 dropdown widget
        $('.select-example-basic').select2()
        // turns <input type="text" class="datepicker-example"/> to bootstrap-datepicker calendar widget
        $('.datepicker-example').datepicker({
          format: 'dd-mm-yyyy',
          todayHighlight: true,
          autoclose: true
        })
      })
</script>