 |
| jQuery Dynamic CRUD Data Grid Library Plugin - appendGrid.js |
appendGrid.js is a powerful CRUD data grid library jQuery plugin that turns standard html tables into dynamic, editable data grid using JavaScript.
You can add, remove, edit, move up, move down records row by row such like filled spreadsheet.
Impornt Note: The Ver.2 has removed jQuery and jQuery UI dependencies.
Features:
- Compatible with several jQuery UI widget (Removed since Ver.2)
- Allows you to get value of a control in a row or changing it
- Allows to create custom type of control to fit every situation
- Allows to validate form controls using jQuery Validation Plugin
- Large Data Set supported
- Compatible with 3rd front-end frameworks such like Bootstrap, Bulma, Foundation, etc.
- Compatible with 3rd iconic fonts such as Font Awesome, Material Icons, etc.
Basic Usage (ver.2):
1. Install and import the appendGrid library into the document.
# NPM $ npm install jquery.appendgrid --save
<script src="dist/appendGrid.js"></script>
2. Or from a CDN.
<script src="https://unpkg.com/dist/AppendGrid.js"></script>
3. Create an empty table element on the webpage.
<table id="tblAppendGrid"></table>
4. Create a new appendGrid instance with several options.
window.myAppendGrid = new AppendGrid({
element: document.getElementById("tblAppendGrid"),
uiFramework: "bulma", // ui framework
iconFramework: "fontawesome5", // iconic font
columns: [
{
name: "company",
display: "Company" },
{
name: "name",
display: "Contact Person" },
{
name: "country",
display: "Country",
type: "select",
ctrlOptions: [
"",
"Germany",
"Hong Kong",
"Japan",
"Malaysia",
"Taiwan",
"United Kingdom",
"United States"] },
{
name: "isNPO",
display: "NPO?",
type: "checkbox",
cellClass: "has-text-centered" },
{
name: "orderPlaced",
display: "Order Placed",
type: "number",
ctrlAttr: {
min: 0,
max: 10000 } },
{
name: "memberSince",
display: "Member Since",
type: "date",
ctrlAttr: {
maxlength: 10 } },
{
name: "uid",
type: "hidden",
value: "0" }],
sectionClasses: {
table: 'is-narrow is-fullwidth' }
});
5. Push your own tabular data to the table.
myAppendGrid.load([
{
uid: "d4c74a61-a24e-429f-9db0-3cf3aaa22425",
name: "Monique Zebedee",
company: "Welch LLC",
country: "Japan",
memberSince: "2012-02-18",
orderPlaced: 111,
level: "Bronze",
isNPO: true },
{
uid: "afdf285d-da5c-4fa8-9225-201c858a173d",
name: "Daryle McLaren",
company: "Bogisich Group",
country: "United States",
memberSince: "2016-10-08",
orderPlaced: 261,
level: "Diamond",
isNPO: false },
{
uid: "202a8afb-130b-476b-b415-c659f21a73e7",
name: "Glori Spellecy",
company: "Grady and Sons",
country: "Germany",
memberSince: "2014-07-28",
orderPlaced: 282,
level: "Gold",
isNPO: false },
{
uid: "08c9adee-abdd-43d5-866d-ce540be19be8",
name: "Blondy Boggis",
company: "Eichmann, Parker and Herzog",
country: "Malaysia",
memberSince: "2010-08-17",
orderPlaced: 308,
level: "Platinum",
isNPO: true },
{
uid: "57644023-cd0c-47ec-a556-fd8d4e21a4e7",
name: "Batholomew Zecchii",
company: "Corwin-Fahey",
country: "Malaysia",
memberSince: "2016-09-20",
orderPlaced: 881,
level: "Gold",
isNPO: true },
{
uid: "38e08e8a-c7eb-41eb-9191-6bb2df1fd39b",
name: "Paulie Poel",
company: "MacGyver, Rohan and West",
country: "United Kingdom",
memberSince: "2016-12-26",
orderPlaced: 387,
level: "Silver",
isNPO: false },
{
uid: "d7bf56d4-f955-4dca-b3db-b30eab590028",
name: "Jessica Levett",
company: "Lind, O'Kon and Hamill",
country: "United States",
memberSince: "2015-04-26",
orderPlaced: 984,
level: "Gold",
isNPO: false },
{
uid: "b9075764-5228-4ca7-9435-7c362ce097e5",
name: "Fonsie Spring",
company: "McKenzie, Block and Wiegand",
country: "Japan",
memberSince: "2013-11-08",
orderPlaced: 875,
level: "Silver",
isNPO: false }
]);
6. All default options to customize the data grid.
// The UniqueIndex accumulate counter uniqueIndex: 0, // The row order array rowOrder: [], // Indicate data is loaded or not isDataLoaded: false, // Visible column count for internal calculation visibleCount: 0, // Total colSpan count after excluding `hideRowNumColumn` and not generating last column finalColSpan: 0, // Indicate to hide last column or not hideLastColumn: false, // The element ID of the `appendGrid` wrapper wrapperId: null, // Indicate calculate width or not // calculateWidth: true, // Settings settings: null, // The table element tbWhole: null, // The table body element tbBody: null, // Icon Framework object to be used: // fontawesome5, ionicon4, materialdesignicons // openiconic, typicons2, or default iconFramework: null, // UI Framework object to be used: // bootstrap4, bulma, // foundation, or default uiFramework: null // The total number of empty rows generated when init the grid. This will be ignored if `initData` is assigned. initRows: 3, // The maximum number of rows allowed in this grid. maxRowsAllowed: 0, // An array of data to be filled after initialized the grid. initData: null, // Array of column options. columns: null, // Labels or messages used in grid. i18n: null, // The ID prefix of controls generated inside the grid. Table ID will be used if not defined. idPrefix: null, // Hide the buttons at the end of rows or bottom of grid. hideButtons: null, // Hide the row number column. hideRowNumColumn: false, // Generate row buttom column in the front of input columns. rowButtonsInFront: false, // The extra class names for table sections. sectionClasses: null, // Adding extra button(s) at the end of rows. customRowButtons: null, // Adding extra button(s) at the bottom of grid. customFooterButtons: null, // Use the sub panel or not useSubPanel: false, // Maintain the scroll position after appended or removed last row. maintainScroll: false, // The maximum height of grid content, scroll bar will be display when the height is greater than this value. maxBodyHeight: 0, // Auto calculate the column width when scroll bar on table body is in use. autoColumnWidth: true
7. Default columns options.
// Type of column control. type: 'text', // Name of column. name: null, // Default value. value: null, // Display text on the header section. display: null, // Extra CSS setting to be added to display text. displayCss: null, // Tooltip for column head. displayTooltip: null, // The `colspan` setting on the column header. headerSpan: 1, // Extra CSS setting to be added to the control container table cell. cellCss: null, // Extra attributes to be added to the control. ctrlAttr: null, // Extra properties to be added to the control. ctrlProp: null, // Extra CSS to be added to the control. ctrlCss: null, // Extra name of class to be added to the control. ctrlClass: null, // The available option for building `select` type control. ctrlOptions: null, // Options for initalize jQuery UI widget. uiOption: null, // Options for initalize jQuery UI tooltip. uiTooltip: null, // Let column resizable by using jQuery UI Resizable Interaction. resizable: false, // Show or hide column after initialized. invisible: false, // The value to compare for indentify this column value is empty. emptyCriteria: null, // Callback function to build custom type control. customBuilder: null, // Callback function to get control value. customGetter: null, // Callback function to set control value. customSetter: null, // The `OnClick` event callback of control. onClick: null, // The `OnChange` event callback of control. onChange: null
8. Default callbacks.
// The callback function for format the HTML name of generated controls. nameFormatter: null, // The callback function to be triggered after all data loaded to grid. dataLoaded: null, // The callback function to be triggered after data loaded to a row. rowDataLoaded: null, // The callback function to be triggered after new row appended. afterRowAppended: null, // The callback function to be triggered after new row inserted. afterRowInserted: null, // The callback function to be triggered after grid row swapped. afterRowSwapped: null, // The callback function to be triggered before grid row remove. beforeRowRemove: null, // The callback function to be triggered after grid row removed. afterRowRemoved: null, // The callback function to be triggered after grid row dragged. afterRowDragged: null, // The callback function for generating sub panel content. subPanelBuilder: null, // The callback function for getting values from sub panel. Used for `getAllValue` method. subPanelGetter: null, // The callback function to be triggered when row(s) is/are adding to grid but the maximum number of rows allowed is reached. maxNumRowsReached: null
9. API methods.
// Append a specified number of rows or row data to the grid
myAppendGrid(3);
myAppendGrid.appendRow([
{ "foo": "1A", "bar": "2019-01-01" },
{ "foo": "2A", "bar": "2019-02-02" },
{ "foo": "3A", "bar": "2019-03-03" },
]);
// Gets the control (DOM element) generated by specified column name and row index
myAppendGrid.getCellCtrl(name, index);
// Gets the control (DOM element) generated by specified column name and unique index.
myAppendGrid.getCellCtrlByUniqueIndex(name, uniqueindex);
// Gets an array of columns
myAppendGrid.getColumns();
// Gets the control value on specified column and row index of first element in the set of matched elements.
myAppendGrid.getCtrlValue(name, index);
// Gets the number of rows
myAppendGrid.getRowCount();
// Gets the unique index array of the grid.
myAppendGrid.getRowOrder();
// Gets the row index by unique index.
myAppendGrid.getRowIndex(uniqueindex);
// Gets the unique index by row index.
myAppendGrid.getUniqueIndex(rowindex);
// Gets all control values of specified row index of current grid.
myAppendGrid.getRowValue(index);
// Gets all control values of current grid.
myAppendGrid.getAllValue();
// Inserts a specified number of row or row data above the specified rowIndex.
myAppendGrid.insertRow(number/data, index);
// Checks if the row is empty
myAppendGrid.isRowEmpty(index);
// Loads records to the current grid.
myAppendGrid.load(data);
// Moves the row down.
myAppendGrid.moveDownRow(index);
// Moves the row up
myAppendGrid.moveUpRow(index);
// Removes the row
myAppendGrid.removeRow(index);
// Sets the control value on specified column and row index of current grid.
myAppendGrid.setCtrlValue(name, index, value);
// Removes all empty rows in the grid.
myAppendGrid.removeEmptyRows();
Live Demo
See the Pen Untitled by Plugin JS (@teguhsigit) on CodePen.
File Info
- File Name :
- jquery.appendGrid-master.zip
- Size :
- 197KB
- Site Download :
- Github.com
- Official Website:
- Go to website
- License:
- MIT