Feature-rich Dynamic Data Grid Plugin - editable-grid
File Size: | 94.8 KB |
---|---|
Views Total: | 5760 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

editable-grid is a jQuery plugin used to dynamically render a complex, multi-functional, CRUD data grid using Bootstrap's table component.
Features:
- Tree table with nesting table rows.
- Data sorting.
- Data formatting.
- Data validation.
- Data parsing.
- Data calculation.
- Row selection.
- Data inline editing.
- Fixed table header.
- Custom class.
- and more.
Basic usage:
1. The plugin requires jQuery library and Bootstrap framework:
<link href="bootstrap.min.css" rel="stylesheet"> <script src="jquery.min.js"></script> <script src="bootstrap.min.js"></script>
2. Load the jQuery editable-grid plugin's files in the html document.
<link rel="stylesheet" href="editable_grid.css"> <script src="bootstrap-editable-grid.js"></script>
3. Create a new data grid with dynamic tabular data as these:
var myGrid = new Grid({ el: el, // selector columns: [ // columns { id: 'a', title: 'a', width: '33.3%' }, { id: 'b', title: 'b', width: '33.3%', alignment: 'right', titleAlignment: 'center' }, { id: 'c', title: 'c', width: '33.3%', alignment: 'center', titleAlignment: 'right' } ], data: [ // tabular data { id: 'id-1', a: 'a', b: 'b', c: 'c' }, { id: 'id-2', a: 'a', b: 'b', c: 'c' } ] });
4. Render the data grid on the page.
myGrid.render();
5. All plugin options to customize the data grid.
var myGrid = new Grid({ sortConfig: [], id: 'id', borders: true, columns: { formatter: formatter, parser: parser, validate: validate, sortable: false, sortCompare: null, sortType: null, nullable: false, type: 'text', link: null, alignment: 'left', titleAlignment: 'left', classes: [], preCreateCallback: function () { } } rows: { link: false, newRow: false, totalRow: false }, stateManager: { isEditable: function () { return false; } }, addListeners: function () { }, treeMode: false, childData: function () { return $.Deferred().resolve([]); }, launchLinksNewTab: false });
This awesome jQuery plugin is developed by skinnybrit51. For more Advanced Usages, please check the demo page or visit the official website.