jQuery Dynamic Data Grid Plugin - appendGrid

jQuery Dynamic Data Grid Plugin - appendGrid
File Size: 41.7 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,
// Tooltip for caption.
captionTooltip: 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.
rowButtonsInFront: false,
// The variable name of row count used for object mode of getAllValue
rowCountName: '_RowCount',
// The extra class names for buttons.
buttonClasses: null,
// The extra class names for table sections.
sectionClasses: null,
// Custom the standard grid buttons.
customGridButtons: 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,
// 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 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

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,
// 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

More Example:

Change Log:

v1.5.0 (2014-10-12)

  • Added useSubPanel option to enable the sub panal mode. Users can generated extra elements to the under each of the normal appendGrid row. Please notice that useSubPanel is not compatible with rowDragging feature. (Thanks iannos for naming)
  • Added subPanelBuilder and subPanelGetter callback function that required for sub panel.
  • Added subPanel option for sectionClasses.
  • The long-awaited sub grid feature is available by make use of sub panel!
  • Added rowCountName option for changing the key name of row count variable for the result of getAllValue method.
  • Parameter order of rowDataLoaded method is changed.
  • Performaced improve by changing the use of insertRow and insertCell javascript function to appendChild.

v1.4.2 (2014-10-02)

  • caption and display can be fully customized by passing a callback function. (Thanks iannos for suggestion)
  • Added captionTooltip and displayTooltip that make use of jQuery UI tooltip for generate tooltip on caption or column header text. (Thanks iannos for suggestion)
  • Added sectionClasses that can specify CSS classes to different table section. (Thanks iannos for suggestion)
  • Added emptyCriteria option to identify a row is empty. Also, isRowEmpty and removeEmptyRows methods are added that make use of this changes. (Thanks iannos for suggestion)
  • Added support on generating select element with optgroup support. You can also specify the title attribute for each option. (Thanks iannos for suggestion)
  • Added rowDataLoaded callback function that will be useful when loading data into a row with controls with dynamic content, such as cascading drop down list.

v1.4.1 (2014-08-10)

  • Added afterRowDragged callback function to be triggered after grid row dragged. (Thanks for PolarbearDK's work)
  • Added nameFormatter callback function for format the HTML name of generated controls. (Thanks iannos for suggestion)

v1.4.0 (2014-07-16)

  • Added invisible option and showColumn / hideColumn / isColumnInvisible methods for changing / checking visibility of columns.
  • Added resizable option that allow column resizable.
  • Added getColumn method to get columns array used for grid initialization.
  • [Important] You are allowed to call appendGrid methods by passing ONE element in jQuery object only. It will not be affected if you are already using ID, such as $("tblAppendGrid"), as jQuery selector.

v1.3.6 (2014-06-28)

  • Added getCellCtrl and getCellCtrlByUniqueIndex methods for retrieving generated control for further customization.

v1.3.5 (2014-04-23)

  • update.

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

 


This awesome jQuery plugin is developed by hkalbertl. For more Advanced Usages, please check the demo page or visit the official website.