jQuery Dynamic Data Grid Plugin - appendGrid

jQuery Dynamic Data Grid Plugin - appendGrid
File Size: 33.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

How to start using jQuery?

More in this category...

View our Recommended Plugins

TOP 100 jQuery Plugins 2013

appendGrid is a powerful jQuery table plugin that turns the standard html table into a dynamic and editable data grid. You can add, remove, edit, move up, move down records row by row such like filled spreadsheet.

You might also like:

Features:

  • Compatible with several jQuery UI widget
  • 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

Basic Usage:

1. Include jQuery, jQuery UI and jQuery appendGrid on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="jquery.appendGrid-1.0.0.js"></script>

2. Include required CSS files

<link href="jquery.appendGrid-1.0.0.css" rel="stylesheet" type="text/css">
<link href="jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css">

3. Markup

<table id="tblAppendGrid">
</table>

4. Initialize appendGrid

<script>
$(function () {
$('#tblAppendGrid').appendGrid({
caption: 'My CD Collections',
initRows: 1,
columns: [
{ name: 'Album', display: 'Album', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { width: '160px'} },
{ name: 'Artist', display: 'Artist', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { width: '100px'} },
{ name: 'Year', display: 'Year', type: 'text', ctrlAttr: { maxlength: 4 }, ctrlCss: { width: '40px'} },
{ name: 'Origin', display: 'Origin', type: 'select', ctrlOptions: { 0: '{Choose}', 1: 'Hong Kong', 2: 'Taiwan', 3: 'Japan', 4: 'Korea', 5: 'US', 6: 'Others'} },
{ name: 'Poster', display: 'With Poster?', type: 'checkbox' },
{ name: 'Price', display: 'Price', type: 'text', ctrlAttr: { maxlength: 10 }, ctrlCss: { width: '50px', 'text-align': 'right' }, value: 0 },
{ name: 'RecordId', type: 'hidden', value: 0 }
]
});
});
</script>

5. The default initial options.

// The text as table caption, set null to disable caption generation.
caption: null,
// The total number of empty rows generated when init the grid. This will be ignored if `initData` is assigned.
initRows: 3,
// 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,
// Enable row dragging by using jQuery UI sortable on grid rows.
rowDragging: false,
// 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.
rowBottonsInFront: false,
// The extra class names for buttons.
buttonClasses: null,
// Adding extra button(s) at the end of rows.
customRowButtons: null,
// Adding extra button(s) at the bottom of grid.
customFooterButtons: null,
// The callback function to be triggered after data loaded to grid.
dataLoaded: 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

6. Default column 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,
// 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,
// 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

More Example:

Change Log:

v1.3.4 (2014-03-27)

  • update.

v1.3.3 (2014-03-27)

  • Added rowBottonsInFront option to allow generating row buttons in the front of input columns.

v1.3.2 (2014-03-09)

  • Added headerSpan to allow header cell column span. (Thanks Rajeevgandhi for suggestion)
  • Allowed to pass array of data to appendRow and insertRow method. (Thanks mailivore for suggestion)
  • Fixed a problem that empty row message will not be displayed when passing empty array to load method. (Thanks mailivore for reporting)

v1.3.1 (2014-01-27)

  • Removed firstCellWidth and lastCellWidth parameters
  • Added customFooterButtons option that allow adding extra buttons to the bottom of grid
  • The last column will not be displayed if all buttons are hidden

v1.3.0 (2014-01-21)

  • Added hideButtons option that allow hiding each buttons individually and removed hideMoveUpDown option
  • Added customRowButtons option that allow adding extra buttons at the last cell of each row
  • Added hideRowNumColumn option that allow to not generating the row number column
  • Added a message to be displayed when the grid is empty (Thanks mailivore for above ideas)

v1.2.3 (2014-01-17)

  • Fixed a problem on setting default value on hidden type columns

v1.2.2 (2014-01-03)

  • Fixed a problem on serializing hidden type columns

v1.2.1 (2013-12-23)

  • Added buttonClasses initial parameters

v1.2.0 (2013-11-16)

  • Added drag & drop support
  • Added rowDragging and hideMoveUpDown initial parameters

v1.1.3 (2013-10-30)

  • Fixed a problem that `i18n` parameter not working even correct values passed in

v1.1.2 (2013-05-19)

  • Fixed a problem on generating ui-datepicker columns

v1.1.0 (2013-04-16)

  • Added support to HTML5 input type such as date/time/email
  • Added ctrlProp column parameter

For more Advanced Usages, please check the demo page or visit the official website.