Author: Filipe Rinaldi filipe.rinaldi@gmail.com

SmartGrid is a JQuery plugin that presents data in different views (list or tiles) and supports basic features like pagination and search. The plugin has the following features:

• JSON based data input
• Embedded search (under development)
• Order by option
• Multi-view (list|tiles)
• Pagination (under development)
• Add/remove data during run-time

This demo page shows some examples of Smart Grid.

<div id="component"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="jquery.smartgrid.min.js"></script>
<script>
$('#component').smartGrid({
    items : [{
                id : 0,
                name : John,
                surname : Doe,
                email: john.doe@email.com,
            },{
                id : 1,
                name : Mary,
                surname : Doe,
                email: mary.doe@email.com,
            }],
    fnContent : function(item, viewMode){
        var html;
        /* Your code here to create the item's HTML view */
        return html;
    }
});
</script>

Summary:

Add an item to the component and update the UI. If the component is currently configured to show the data ordered, then the new item will be inserted in order.

Parameters:

item - Item object to be added to the item list.

Return:

None.

Example:

var sg = $('#component').data('smartGrid'); 
sg.addItem({
    "name" : "Harold",
	"surname" : "Giraffe",
	"email" : "harold@email.co.uk",
	"phone" : "01223 77777"
});

Summary:

Set the elements in ascending order defined by the field 'key'. The UI is updated with the new ordering. The 'key' parameter must be a valid entry in the 'orderByFields' option.

Parameters:

key - Field name used to order the elements.

Return:

true - If key is a valid entry in the 'orderByFields' option.
false - If key is not a valid entry in the 'orderByFields' option.

Example:

var sg = $('#component').data('smartGrid');
sg.orderBy('surname');

Summary:

Remove one or more items that match the parameter "item".

Parameters:

item - Dictionary containing key and value.

Return:

list of items removed.

Example:

var sg = $('#component').data('smartGrid'); 
sg.removeItem({
    "key" : "name",
	"value" : "Harold",
});

Summary:

Filter items based on the parameter "text". This function is used by the "Search" input embedded in the component's header but can also be called directly. The search is case-insensitive.

Parameters:

text - A string containing the keyword to search/filter.

Return:

None.

Example:

var sg = $('#component').data('smartGrid');
sg.search('arold');

Summary:

Set current page.

Parameters:

page - Page index to show which can be a number between 0 (inclusive) and the number of items not hidden by the search/filter. "page" can also be 'next' or 'prev' which will respectively increment and decrement the current page index. Note: page index parameter starts from "0" but the pagination widget (HTML) the user sees starts from 1.

Return:

None.

Example:

var sg = $('#component').data('smartGrid');
sg.setPage(0); /* Show Page 1 */

Summary:

Set the view mode.

Parameters:

mode - One of the valid view modes: 'list' or 'tiles'.

Return:

true - Returns true if mode is valid.
false - Returns false if mode is invalid.

Example:

var sg = $('#component').data('smartGrid'); 
sg.setViewMode('tiles');