JQuery Grid

Invoke the addrow method of the jqxGrid. Author: http://jqwidgets.com

by mogador

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<div class="hidden">
  <div id="jqxgrid">
  </div>
</div>

CSS

.hidden {
  display: none!important;
}

JavaScript

$(document).ready(function() {
   var aData = new Array();

   for (var nIndex = 0; nIndex < 6; nIndex++) {
     var aRow = [];
     aRow["name"] = "Name " + nIndex;
     aRow["vorname"] = "Vorname " + nIndex;

     aData.push(aRow);
   }

   var source = {
     localdata: aData,
     datatype: "array",
     datafields: [{
       name: 'name',
       type: 'string'
     }, {
       name: 'vorname',
       type: 'string'
     }],
     sortcolumn: 'name'
   };

   var dataAdapter = new $.jqx.dataAdapter(source);

   $("#jqxgrid").jqxGrid({
     source: dataAdapter,
     selectionmode: 'checkbox',
     pagesize: 50,
     editable: false,
     pageable: false,
     autoheight: true,
     sortable: true,
     columns: [{
       text: 'Name',
       datafield: 'name',
       width: 200,
       editable: false,
       sortable: true
     }, {
       text: 'Vorname',
       datafield: 'vorname',
       width: 200,
       editable: false
     }]
   });
 });