Dynamic CRUD Data Grid Plugin With jQuery - Quickgrid

Dynamic CRUD Data Grid Plugin With jQuery - Quickgrid

Quickgrid is a simple yet powerful jQuery data grid plugin which dynamically parses and presents your JSON data (or JS arrays/objects) in a filterable, editable, sortable and paginatable CRUD data table.

1. To get stated, insert the minified version of the jQuery Quickgrid plugin after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="quickgrid.min.js"></script>

2. Create a container element for the data grid.

<div id="myGrid"></div>

3. Initialize the data grid and define you own data as these:

$("#myGrid").quickGrid({
  data: [
    {
      property1: "01.02.2017",
      property2: ""
    },
    {
      property2: "100",
      property1: "02.02.2017"
    },
    {
      property2: "10",
      property1: "03.02.2017",
      property3: ""
    }
  ],
  columns: {
    property1 : {
      visible: false,
      title: "Date"
    },
    property2 : {
      title: function(key){
        return "!!!" + key.charAt(0).toUpperCase() + key.substring(1)  + "!!!";
      }
    }
  },
})

4. To load an external JSON file into the data grid:

$.getJSON("json.json", function(data){
  $('<div></div>').appendTo('body').quickGrid({
    data: data,
    columns: {
      year: {
        visible: false
      },
      age: {
        visible: false
      }
    }
  });
})  

5. To load an external JSON file into the data grid:

$.getJSON("json.json", function(data){
  $('<div></div>').appendTo('body').quickGrid({
    data: data,
    columns: {
      year: {
        visible: false
      },
      age: {
        visible: false
      }
    }
  });
})  

6. Config the pagination control of the data grid:

$("#myGrid").quickGrid({
  pagination: {
    recordsPerPage: 10, // max records per page
    activePage: 0 // initial page
  }
})

7. Callback functions available.

$("#myGrid").quickGrid({
  onaddrowclick: function () {
    var rowDataToAdd = {};
    quickGrid.settings.data.forEach((rowData) => {
        for (var prop in rowData) {
            if (!rowDataToAdd.hasOwnProperty(prop)) {
                rowDataToAdd[prop] = "";
            }
        }
    });
    var modal = new QuickModal($('body')[0], rowDataToAdd,
        {
            title: "Add Record",
            onsubmit: (objData) => quickGrid.addRow(objData)
        });
  },
  onrowclick: function (rowdata, rownum) {
    var modal = new QuickModal($('body')[0], rowdata,
        {
            title: "Edit Record",
            onsubmit: (objData) => quickGrid.updateRow(rownum, objData)
        });
  },
  oneditrowclick: function (rowdata, rownum) {
    var modal = new QuickModal($('body')[0], rowdata,
        {
            title: "Edit Record",
            onsubmit: (objData) => quickGrid.updateRow(rownum, objData)
        });
  },
  onrowdelete: function (rowdata, rownum) {
  }
})

8. Event handlers.

$("#myGrid").quickGrid()
.on('qgrd:updaterow', function(rowData, rowNumber){
  // do something
})
.on('qgrd:addrow', function(rowData){
  // do something
})

This awesome jQuery plugin is developed by paulitto. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 07.04.2018
  • Source