jsGrid in jQuery

By | February 25, 2018

jsGrid is a lightweight client-side data grid control based on jQuery. It supports basic grid operations like inserting, filtering, editing, deleting, paging, and sorting. jsGrid is flexible and allows to customize its appearance and components.

jsGrid CDN:-

jsGrid is available on cdnjs. Here is the CDN links available:

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>

 

How to use jsGrid

1.  Download jsGrid or install it with bower

$ bower install js-grid

2.  Ensure that jQuery v1.8.3 or later is included.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

3.  Include jsGrid script and css stylesheet files into your web page:

<link type="text/css" rel="stylesheet" href="jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="jsgrid-theme.min.css" />
 
<script type="text/javascript" src="jsgrid.min.js"></script>

4.  Add a <div> for the grid to your web page markup:

<div id="jsGrid"></div>

5.  Create the grid applying jQuery plugin jsGrid with the config in the end of the page as follows:

<script>
 var clients = [
 { "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
 { "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
 { "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
 { "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
 { "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }
 ];
 
 var countries = [
 { Name: "", Id: 0 },
 { Name: "United States", Id: 1 },
 { Name: "Canada", Id: 2 },
 { Name: "United Kingdom", Id: 3 }
 ];
 
 $("#jsGrid").jsGrid({
 width: "100%",
 height: "400px",
 
 inserting: true,
 editing: true,
 sorting: true,
 paging: true,
 
 data: clients,
 
 fields: [
 { name: "Name", type: "text", width: 150, validate: "required" },
 { name: "Age", type: "number", width: 50 },
 { name: "Address", type: "text", width: 200 },
 { name: "Country", type: "select", items: countries, valueField: "Id", textField: "Name" },
 { name: "Married", type: "checkbox", title: "Is Married", sorting: false },
 { type: "control" }
 ]
 });
</script>

Output:-

I hope you will enjoy jsGrid in jQuery. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

Like it? Share it