ArrayTableView jQuery Plugin

ArrayTableView.js

Summary

ArrayTableView allows developers to display an array of JSON objects for user editing and sorting as well as the addition and deletion of objects to and from the array. ArrayTable view supports flat and associative arrays and is fully customizable and themeable

Usage, Options, and Events

$('#elem').ArrayTableView({
    "dataSrc": JSObj,  //JavaScript Object that will be edited when the user uses the adaptor
    "mapping": {  //Object that describes how the UI relates to underlying data
        "propName": {
            "el":"className",
            "disp":"className"
        }
    },
    "rowHtml" //The HTML for representing each object.  Placeholders in the format [[property]] are automatically filled with the object's property value,
    /* ADDITIONAL OPTIONS */
    "saveRate": 250,  //The maximum rate at which the rowSave callback should be called
    "states": {
        "stateName1":function() { }, …
    },
    "startState": "stateName",
    "addBtn": $('addButtonSelector'),
    "deleteClass": "class-name",
    "sortable" //Whether the array items should be re-orderable via drag and drop,
    "sortHandleClass" //Use with sortable to restrict drag and drop sensitivity to certain element
    "associativeArray": false,  //Set to true to use associative array structure instead of flat
    "number": false,  //Set to true to number rows
    "letter": false,  //Set to true to letter rows
    /* EVENT CALLBACKS */
    "rowSave": function(arrayTableViewObj, rowElem, rowDataObj) { }, 
    "rowChanged": function(arrayTableViewObj, rowElem, rowDataObj) { },
    "beforeRow": function(arrayTableViewObj, rowElem, rowDataObj) { },
    "beforeOrigRow": function(arrayTableViewObj, rowElem, rowDataObj) { },
    "beforeNewRow": function(arrayTableViewObj, rowElem, rowDataObj) { },
    "afterRow": function(arrayTableViewObj, rowElem, rowDataObj) { },
    "afterOrigRow": function(arrayTableViewObj, rowElem, rowDataObj) { },
    "afterNewRow": function(arrayTableViewObj, rowElem, rowDataObj) { },
    "afterReorder": function(arrayTableViewObj, rowElem, rowDataObj) { },
    "onRerender": function(arrayTableViewObj, adaptorElem) { }
});

Simple Table Demo

# First Last Plays Age
addAdd Beatle

Code:

var theBeatles = [{
	"fName":"John",
	"lName":"Lennon",
	"age":"25",
	"plays":"Guitar"
}, {
	"fName":"George",
	"lName":"Harrison",
	"age":"22",
	"plays":"Guitar"
}, {
	"fName":"Paul",
	"lName":"McCartney",
	"age":"23",
	"plays":"Guitar"
}, {
	"fName":"Ringo",
	"lName":"Starr",
	"age":"25",
	"plays":"Drums"
}];
$('#BeatlesStageCC').ArrayTableView({
	"dataSrc": theBeatles,
	"number":true,
	"mapping":{
		"fName":{
			"el":"fNameIn"
		},
		"lName":{
			"el":"lNameIn"
		},
		"age":{
			"el":"ageIn"
		},
		"plays":{
			"el":"playsIn"
		}
	},
	"noneHtml":"No Beatles in List",
	"addBtn":$('#addNewBeatleBtn'),
	"rowHtml":['<tr class="arraytablerow" ui="[[ui]]">',
		'	<td>',
		'	  <span class="nHol">[[num]]</span>.',
		'	</td>',
		'	<td class="input-field">',
		'	  <input class="fNameIn" type="text" value="[[fName]]">',
		'	</td>',
		'	<td class="input-field">',
		'	  <input class="lNameIn" type="text" value="[[lName]]">',
		'	</td>',
		'	<td class="input-field">',
		'	  <input class="playsIn" type="text" value="[[plays]]">',
		'	</td>',
		'	<td class="input-field">',
		'	  <input class="ageIn" type="text" value="[[age]]">',
		'	</td>',
		'	<td class="delRowBtn">',
		'	  <i class="fa fa-trash" style="color:darkred; cursor:pointer"></i>',
		'	</td>',
		'</tr>'].join(""),
	"sortable":true,
	"deleteClass":"delRowBtn"
});
Live Object JSON:

What Are Rows?

Rows are very important in ArrayTableView. Each row has the class .arraytablerow and the property ui is specificed to indicate which object is being described.

Rows encapsulate all of the data related to a certain object in the array. Developers can allow sorting of rows to allow end users to specify object order within the array.

What Is ui?

ui stands for unique id and is the primary identifying property for ArrayTableView. All rows without a ui property and all new rows will be assigned a random ui.

The developer can specify the length of the ui with the plugin's uiLength option.

Types of Arrays

ArrayTableView allows your website’s users to manipulate lists of data: add elements, remove elements, edit elements. The underlying data source is either a standard JavaScript Array or Associative Array (Object with ID Properties)

JavaScript is crucial to modern web applications because it is the only scripting language with widespread support in all browsers. ArrayTableView allows end users to manipulate arrays of objects in JavaScript.

Arrays of Objects can be either associative arrays or flat arrays. Flat arrays are sorted by the order of the elements in the array. An associative array may have a property within each element object that is used to sort the elements (typically named oi for orderindex).

Associative arrays are simply Objects where the properties are a unique identifier associated with the record (usually the id) and the value is the complete object corresponding to the id. In JSON notation, an associative array of objects might look like this:

{
	"john": {"id":"john", "age":21, "fName":"John", "lName":"Lennon" },
	"ringo": { "id":"ringo", "age":21, "fName":"Ringo", "lName":"Starr" },
	"paul": { "id":"paul", "age":21, "fName":"Paul", "lName":"McCartney" },
	"george": { "id":"george", "age":21, "fName":"George", "lName":"Harrison" }
}

Flat arrays are standard JavaScript Arrays where each element is an object. The JSON of flat, non-associative arrays might look like this:

[
	{"id":"john", "age":21, "fName":"John", "lName":"Lennon" },
	{ "id":"ringo", "age":21, "fName":"Ringo", "lName":"Starr" },
	{ "id":"paul", "age":21, "fName":"Paul", "lName":"McCartney" },
	{ "id":"george", "age":21, "fName":"George", "lName":"Harrison" }
]

Empty Associative Arrays: {"empty":1}

For some reason, on some browsers, JavaScript gets confused about objects being referenced when they are empty.

For this reason, we have a special object that represents an empty associative array: {"empty":1}

The plugin takes care of removing the "empty" property when other objects are added to the associative array and add the "empty" property instead of the buggy {} empty object.

Associative Array Demo

# First Last Plays Age
addAdd Rolling Stone

The Code

var theRollingStones = {
	"Mick":{
		"fName":"Mick",
		"lName":"Jagger",
		"age":"25",
		"plays":"Vocals"
	},
	"Keith":{
		"fName":"Keith",
		"lName":"Richards",
		"age":"22",
		"plays":"Guitar"
	},
	"Charlie":{
		"fName":"Charlie",
		"lName":"Watts",
		"age":"23",
		"plays":"Drums"
	},
	"Ronnie":{
		"fName":"Ronnie",
		"lName":"Wood",
		"age":"25",
		"plays":"Guitar"
	},
	"Brian":{
		"fName":"Brian",
		"lName":"Jones",
		"age":"25",
		"plays":"Guitar"
	}
};
$('#RollingStonesStageCC').ArrayTableView({
	"dataSrc": theRollingStones,
	"number":true,
	"mapping":{
		"fName":{
			"el":"fNameIn"
		},
		"lName":{
			"el":"lNameIn"
		},
		"age":{
			"el":"ageIn"
		},
		"plays":{
			"el":"playsIn"
		}
	},
	"associativeArray":true,
	"noneHtml":"No Rolling Stones in List",
	"addBtn":$('#addNewRollingStone'),
	"rowHtml":['<tr class="arraytablerow" ui="[[ui]]">',
		'	<td>',
		'	  <span class="nHol">[[num]]</span>.',
		'	</td>',
		'	<td class="input-field">',
		'	  <input id="fNameIn[[ui]]" class="fNameIn" type="text" value="[[fName]]">',
		'	</td>',
		'	<td class="input-field">',
		'	  <input id="lNameIn[[ui]]" class="lNameIn" type="text" value="[[lName]]">',
		'	</td>',
		'	<td class="input-field">',
		'	  <input id="playsIn[[ui]]" class="playsIn" type="text" value="[[plays]]">',
		'	</td>',
		'	<td class="input-field">',
		'	  <input id="ageIn[[ui]]" class="ageIn" type="text" value="[[age]]">',
		'	</td>',
		'	<td class="delRowBtn">',
		'	  <i class="fa fa-trash" style="color:darkred; cursor:pointer"></i>',
		'	</td>',
		'</tr>'].join(""),
	"sortable":true,
	"deleteClass":"delRowBtn"
});
Live Object JSON:

Download

file_downloadArrayTableView


Explore Chakra7 Today