Dynamic CRUD Data Grid Plugin With jQuery - Quickgrid
File Size: | 16.8 KB |
---|---|
Views Total: | 11865 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.
How to use it:
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.