zzGrid

9.3. Class zzGrid


            
            class 
            zzGrid

class Creates a new grid.

Property Summary

Function ajaxError

Event function of type ResponseFunction to fire on error. Default is null.

string cgiParamPage

Which CGI param we use to indicate page number for the AJAX script. Default is 'p'.

string cgiParamPagesize

Which CGI param we use to send the page limit to the AJAX script. Default is 'l'.

string cgiParamSortBy

Which CGI param we use to indicate by which column to sort for the AJAX script. Default is 'o'.

string cgiParamSortDir

Which CGI param we use to indicate sort direction (ASC or DESC) for the AJAX script. Default is 's'.

string cgiParamUnique

Which CGI param we use to send the unique query identification to the AJAX script. Default is 'q'.

Object cgiParamsUser

Associative array (map) of additional parameters that you can send to the AJAX script. It can, for instance, be a session identifier or a query to filter/search records. Parameter names here should not overlap with other cgiParamX parameters.

string checkBoxColWidth

CSS string for checkbox column width. Default is '24px'.

zzGridColumn[] columns

Define columns of the grid. It must be array of objects of type zzGridColumn.
Example:

columns: [
		{name: 'n', caption: '#', width: 30, className: 'r'},
		{name: 'fn', caption: 'First name', width: 200},
		{name: 'ln', caption: 'Last name', width: 250}
		]

boolean getMoreOnScroll

If to load more data when user scrolls to the bottom of grid. Default is true.

string height

CSS definition if grid's height. Default is '200px'.

string lineNoColWidth

CSS width for the line numbers column. Default is '32px'.

boolean lineNumbers

If to show a column with line numbers. Default is false.

string method

HTTP method for AJAX call. Default is 'GET'.

Function onrowclick

Event function of type ClickFunction, which is called when user clicks a row (any cell). Default is null.

Function onrowdblclick

Event function of type ClickFunction, which is called when user double clicks a row (any cell). Default is null.

int pageSize

Maximum number of records to be returned in one AJAX response. It must be big enough so records of one page can cover all grid. Default is 25.

string primaryKey

Name of the column which is the primary key for your data (if any). If set, must match the zzGridColumn.name property of one of the columns. Default is null (no primary key).

boolean showCheckAllCheckbox

When checkboxes are used if to display a checkbox in the header, which allows to select or unselect all items. This setting is taken into account only if useCheckBoxes is set to true. Default is true.

string sortBy

By which column the grid should be initially sorted. You can put here a column name (string) or its index (int, zero based). Default is 0.

string sortDir

Initial sort direction (ASC or DESC). Default is 'ASC'.

string textLoading

Text label shown when data is being loaded from the server. Default is 'Loading...'.

string textNoMoreData

Text label shown in the status area when all records from the server are loaded to the grid. Default is ''.

string textNoRecords

Text label shown when no records are returned by the AJAX script. Default is 'No records found'.

string textScrollDown

Text label shown in the status area when there are records on the server that are not sent to the grid yet. Default is 'Scroll down to load more data.'.

string textShowingEnd

Text label shown in the status area when displaying the number of records received. Default is ' records'.

string textShowingStart

Text label shown in the status area when displaying the number of records received. Default is 'Showing '.

string textTotalEnd

Text label shown in the status area when displaying the total possible number of records. Default is ''.

string textTotalStart

Text label shown in the status area when displaying the total possible number of records. Default is ' of '.

string url

URL of the AJAX script to provide data. Default is false.

boolean useCheckBoxes

If to display checkboxes. Shows checkbox column on the left. It is needed to perform some operation on many rows at time, like, for example, deleting rows from server database. Default is false.

Constructor Summary

zzGrid (Object options)

Options are the same as zzGrid properties, therefore all options are described in the properties section.

Function Summary

clearChecked()

Clears all checked checkboxes.

destroy()

Destructor - destroys zzGrid object, freeing memory.

processChecked (Function cb)

Do something with all checked rows.

reload()

You can call this function when you need change search/filter settings or when database data changes. You can also call it via setTimeout to keep user updated about changes in the data.

9.4. Property Details

9.4.1. property Function ajaxError

Event function of type ResponseFunction to fire on error. Default is null.

9.4.2. property string cgiParamPage

Which CGI param we use to indicate page number for the AJAX script. Default is 'p'.

9.4.3. property string cgiParamPagesize

Which CGI param we use to send the page limit to the AJAX script. Default is 'l'.

9.4.4. property string cgiParamSortBy

Which CGI param we use to indicate by which column to sort for the AJAX script. Default is 'o'.

9.4.5. property string cgiParamSortDir

Which CGI param we use to indicate sort direction (ASC or DESC) for the AJAX script. Default is 's'.

9.4.6. property string cgiParamUnique

Which CGI param we use to send the unique query identification to the AJAX script. Default is 'q'.

9.4.7. property Object cgiParamsUser

9.4.8. property string checkBoxColWidth

CSS string for checkbox column width. Default is '24px'.

9.4.9. property zzGridColumn[] columns

Define columns of the grid. It must be array of objects of type zzGridColumn.
Example:

columns: [
		{name: 'n', caption: '#', width: 30, className: 'r'},
		{name: 'fn', caption: 'First name', width: 200},
		{name: 'ln', caption: 'Last name', width: 250}
		]

9.4.10. property boolean getMoreOnScroll

If to load more data when user scrolls to the bottom of grid. Default is true.

9.4.11. property string height

CSS definition if grid's height. Default is '200px'.

9.4.12. property string lineNoColWidth

CSS width for the line numbers column. Default is '32px'.

9.4.13. property boolean lineNumbers

If to show a column with line numbers. Default is false.

9.4.14. property string method

HTTP method for AJAX call. Default is 'GET'.

9.4.15. property Function onrowclick

Event function of type ClickFunction, which is called when user clicks a row (any cell). Default is null.

See also:

zzGridColumn.onclick

9.4.16. property Function onrowdblclick

Event function of type ClickFunction, which is called when user double clicks a row (any cell). Default is null.

See also:

zzGridColumn.ondblclick

9.4.17. property int pageSize

Maximum number of records to be returned in one AJAX response. It must be big enough so records of one page can cover all grid. Default is 25.

9.4.18. property string primaryKey

Name of the column which is the primary key for your data (if any). If set, must match the zzGridColumn.name property of one of the columns. Default is null (no primary key).

See also:

zzGridColumn.name

9.4.19. property boolean showCheckAllCheckbox

9.4.20. property string sortBy

By which column the grid should be initially sorted. You can put here a column name (string) or its index (int, zero based). Default is 0.

9.4.21. property string sortDir

Initial sort direction (ASC or DESC). Default is 'ASC'.

9.4.22. property string textLoading

Text label shown when data is being loaded from the server. Default is 'Loading...'.

9.4.23. property string textNoMoreData

Text label shown in the status area when all records from the server are loaded to the grid. Default is ''.

9.4.24. property string textNoRecords

Text label shown when no records are returned by the AJAX script. Default is 'No records found'.

9.4.25. property string textScrollDown

Text label shown in the status area when there are records on the server that are not sent to the grid yet. Default is 'Scroll down to load more data.'.

9.4.26. property string textShowingEnd

Text label shown in the status area when displaying the number of records received. Default is ' records'.

See also:

textShowingStart

9.4.27. property string textShowingStart

Text label shown in the status area when displaying the number of records received. Default is 'Showing '.

See also:

textShowingEnd

9.4.28. property string textTotalEnd

Text label shown in the status area when displaying the total possible number of records. Default is ''.

See also:

textTotalStart

9.4.29. property string textTotalStart

Text label shown in the status area when displaying the total possible number of records. Default is ' of '.

See also:

textTotalEnd

9.4.30. property string url

URL of the AJAX script to provide data. Default is false.

9.4.31. property boolean useCheckBoxes

If to display checkboxes. Shows checkbox column on the left. It is needed to perform some operation on many rows at time, like, for example, deleting rows from server database. Default is false.

See also:

showCheckAllCheckbox

9.5. Constructor Details

9.5.1. constructor zzGrid


                    
                    
                    zzGrid(Object
 options)

Options are the same as zzGrid properties, therefore all options are described in the properties section.
Example of calling the constructor and creating a grid:

$('#gridHolder').zzGrid({
	url: 'http://example.com/gridFeeder.php',
	height: '300px',
	useCheckBoxes: true,
	lineNumbers: false,
	columns: [
		{name: 'n', caption: '#', width: 30, className: 'r'},
		{name: 'fn', caption: 'First name', width: 250},
		{name: 'ln', caption: 'Last name', width: 250},
		],
	sortBy: 'ln',
	cgiParamsUser: {},
	pageSize: 20,
	getMoreOnScroll: true
});

Parameters:


            options

- Associative array (map) of options for the grid.

9.6. Function Details

9.6.1. function clearChecked


                    
                    
                    clearChecked()

Clears all checked checkboxes.
This function should be called like:

$('#gridHolder').zzGrid('clearChecked');

9.6.2. function destroy


                    
                    
                    destroy()

Destructor - destroys zzGrid object, freeing memory. This function should be called like:

$('#gridHolder').zzGrid('destroy');

9.6.3. function processChecked


                    
                    
                    processChecked(Function
 cb)

Do something with all checked rows. This function should be called like:

$('#gridHolder').zzGrid('processChecked', function (rowData, jqueryRow) { ... });

Parameters:

cb

- Callback function of type ClickFunction, which gets called for each checked row in the grid.

9.6.4. function reload


                    
                    
                    reload()

You can call this function when you need change search/filter settings or when database data changes. You can also call it via setTimeout to keep user updated about changes in the data. Clears and reloads table rows.
This function should be called like:

$('#gridHolder').zzGrid('reload');