jquery-grid
Version:
jQuery Grid by Gijgo.com is a plug-in for the jQuery Javascript library. It is a very fast and extandable datagrid, and will add advanced interaction controls to any HTML table. This plugin has build-in integration with Bootstrap and Material Design. Free
46 lines (35 loc) • 1.6 kB
Markdown
Visit <a href="http://gijgo.com/grid">jQuery Grid</a> to learn more about this plugin.
<h2>Examples</h2>
1. [Bootstrap 4 Table](http://gijgo.com/grid/demos/bootstrap-4-table)
2. [jQuery Grid Bootstrap](http://gijgo.com/grid/demos/jquery-grid-bootstrap)
3. [Bootstrap Editable Table](http://gijgo.com/grid/demos/bootstrap-grid-inline-edit)
4. [Bootstrap Datagrid](http://gijgo.com/grid/demos/responsive-bootstrap-datagrid)
<h2>Getting Started</h2>
```html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Grid</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="/js/core.js" type="text/javascript"></script>
<script src="/js/grid.js"></script>
<link href="/css/core.css" rel="stylesheet" type="text/css">
<link href="/css/grid.css" rel="stylesheet" type="text/css">
</head>
<body style="padding: 6px;">
<table id="grid"></table>
<script>
var data = [
{ 'ID': 1, 'Name': 'Hristo Stoichkov', 'PlaceOfBirth': 'Plovdiv, Bulgaria' },
{ 'ID': 2, 'Name': 'Ronaldo Luis Nazario de Lima', 'PlaceOfBirth': 'Rio de Janeiro, Brazil' },
{ 'ID': 3, 'Name': 'David Platt', 'PlaceOfBirth': 'Chadderton, Lancashire, England' }
];
$('#grid').grid({
dataSource: data,
columns: [ { field: 'ID', width: 56 }, { field: 'Name' }, { field: 'PlaceOfBirth' } ]
});
</script>
</body>
</html>
```