Introduction to jsGrid
jsGrid is a lightweight JavaScript control for displaying data in a tabular format with various features such as sorting, paging, and editing. It is highly customizable and easy to extend. In this comprehensive guide, we will cover dozens of useful API examples with code snippets to help you get the most out of jsGrid.
Getting Started
<script>
$("#jsGrid").jsGrid({
width: "100%",
height: "400px",
inserting: true,
editing: true,
sorting: true,
paging: true,
data: db.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: db.countries, valueField: "Id", textField: "Name" },
{ type: "control" }
]
});
</script>
API Examples
Sorting
$("#jsGrid").jsGrid({
sorting: true,
fields: [
{ name: "Name", type: "text" },
{ name: "Age", type: "number" },
{ type: "control" }
]
});
Paging
$("#jsGrid").jsGrid({
paging: true,
pageSize: 10,
pageButtonCount: 5,
data: db.clients
});
Filtering
$("#jsGrid").jsGrid({
filtering: true,
data: db.clients,
fields: [
{ name: "Name", type: "text" },
{ name: "Age", type: "number" },
{ type: "control" }
]
});
Inserting
$("#jsGrid").jsGrid({
inserting: true,
data: db.clients,
fields: [
{ name: "Name", type: "text" },
{ name: "Age", type: "number" },
{ name: "Country", type: "text" },
{ type: "control" }
]
});
Editing
$("#jsGrid").jsGrid({
editing: true,
data: db.clients,
fields: [
{ name: "Name", type: "text" },
{ name: "Age", type: "number" },
{ name: "Country", type: "text" },
{ type: "control" }
]
});
Deleting
$("#jsGrid").jsGrid({
deleting: true,
data: db.clients,
fields: [
{ name: "Name", type: "text" },
{ name: "Age", type: "number" },
{ name: "Country", type: "text" },
{ type: "control" }
]
});
Full Example Application
<!DOCTYPE html>
<html>
<head>
<title>jsGrid Example Application</title>
<link href="path-to-jsgrid/jsgrid.min.css" rel="stylesheet" />
<link href="path-to-jsgrid/jsgrid-theme.min.css" rel="stylesheet" />
<script src="path-to-jquery/jquery.min.js"></script>
<script src="path-to-jsgrid/jsgrid.min.js"></script>
</head>
<body>
<div id="jsGrid"></div>
<script>
$(function() {
var clients = [
{ "Name": "Otto Clay", "Age": 61, "Address": "Ap #897-1459 Quam Avenue", "Country": 1 },
{ "Name": "Connor Johnston", "Age": 73, "Address": "Ap #370-4647 Dis Av.", "Country": 2 }
];
var countries = [
{ Name: "", Id: 0 },
{ Name: "United States", Id: 1 },
{ Name: "Canada", Id: 2 }
];
$("#jsGrid").jsGrid({
width: "100%",
height: "400px",
inserting: true,
editing: true,
sorting: true,
paging: true,
filtering: true,
data: clients,
fields: [
{ name: "Name", type: "text", width: 150 },
{ name: "Age", type: "number", width: 50 },
{ name: "Address", type: "text", width: 200 },
{ name: "Country", type: "select", items: countries, valueField: "Id", textField: "Name" },
{ type: "control" }
]
});
});
</script>
</body>
</html>
Hash: 212e93e7a6de6c79b6c4ea5aafd4face2e0be3837602aec5ce1b2133a4a5fea5
