User Manual
Samples

Introduction    Configure table look    Table decoration properties

Table general features    Table keys    User types    Data from the DB / CSV / XML / form

Using XML    Table reference    What's new?    Standard vs PRO

123Guide   

Order PRO Now   

CODETHATTABLE USER MANUAL

CodeThatTable Reference

Note: This reference includes all methods and properties that CodeThatTable has, in standard version some of them are not available.

Class CCodeThatTable

Fields:

String name
Name of grid that equals name of variable that contains the CCodeThatTable
CCodeThatRow [] rows
Array of CCodeThatRow Objects that represents rows in table
int [] rowIndex
Index array of rows; keep real order of them in table
Function rowHandler
User-defined row handler, parameter of this function must be array of values of column keyCol
int rowStart
First row index in multi selection
int rowHover
Current row that mouse hover over
CCodeThatColumn [] cols
Array of CCodeThatColumn Objects that represents columns in table
CCodeThatCell [][] cells
Array of CCodeThatCell Objects that represents cells in table
int keyCol
Index of key column in table, this column will be uses in method callRawHandler as parameter to set array of indexes of selected rows for user-defined row handler this.rowHandler(this.getKeyArray(this.keyCol))
int amountPerPage
Count of rows per page, by default - 20
int pageCount
Count of pages in grid
int page
Current page in grid
int sortCol
Index in cols array of column that sorted
int sortType
Direction of sort
Boolean useMultiSort
Flag is multiSort using in grid, by default - true
int [] multiSortCol
Array of indexes of columns in array cols that take part in multi sort
int [] multiSortType
Array of directions of sort for columns that take part in multi sort
String searchValue
Query that currently searched in grid
Object tableStyle
Represents common style for grid, its structure is
{
int width
int height
String bgcolor
Object | String tableClass
Object | String thClass
}
Object rowStyle
Represents common style for row, its structure is
{
String | Object markClass
style for selected row
String | Object darkClass
normal style for row #1
String | Object lightClass
normal style for row #2
String | Object hoverClass
hover style for row
}
Object imgSortAsc
{String src:, int width:, int height:, String alt:} icon - sort ascending
Object imgSortDesc
{String src:, int width:, int height:, String alt:} icon - sort descending
Object imgSortAscActive
{String src:, int width:, int height:, String alt:} icon - current sort ascending
Object imgSortDescActive
{String src:, int width:, int height:, String alt:} icon - current sort descending
Object imgMultiSortAscActive
{String src:, int width:, int height:, String alt:} icon - current multi sort ascending
Object imgMultiSortDescActive
{String src:, int width:, int height:, String alt:} icon - current sort descending
Object imgFirstPage
{String src:, int width:, int height:, String alt:} icon - go to first page
Object imgLastPage
{String src:, int width:, int height:, String alt:} icon - go to last page
Object imgPrevPage
{String src:, int width:, int height:, String alt:} icon - go to previous page
Object imgNextPage
{String src:, int width:, int height:, String alt:} icon - go to next page
Object resetSortControl
{img:{String src:, int width:, int height:, String alt:}, String text:}
Object img
represent icon for control
String text
represent hint for control
You have to define at least one of these parameters
Object resetMarkControl
{img:{String src:, int width:, int height:, String alt:}, String text:}
Object img
represent icon for control
String text
represent hint for control
You have to define at least one of these parameters
Object resetSearchControl
{img:{String src:, int width:, int height:, String alt:}, String text:}
Object img
represent icon for control
String text
represent hint for control
You have to define at least one of these parameters
Object amountControl
{img:{String src:, int width:, int height:, String alt:}, String text:}
Object img
represent icon for control
String text
represent hint for control
You have to define at least one of these parameters
Object searchControl
{img:{String src:, int width:, int height:, String alt:}, String text:}
Object img
represent icon for control
String text
represent hint for control
You have to define at least one of these parameters
Boolean useMultiSort
allows multisort methods using
Boolean useSort
allows sort methods using
Boolean useSearchPanel
will be search panel shows in the table
Boolean usePagePanel
will be page turn panel shows in the table
Boolean useResetPanel
will be panel with reset controls(search, sort, select) shows in the table
Object def
User definition for table, its structure is
{
int datatype
0 - array | 1 - csv string | 2 - csv file | 3 - xml file | 4 - xml string
[][] | String data : [][] | String | File name | File name | String
[] colDef
array of column definition Object
{
String title
String | Object titleClass
String type:
"'String" | "Number" | "Currency" | "Date" | "URL" | "Email" | "HTML" | UserType
int width
String alignment
"left", "center", "right"
Function compareFunction
function for compare 2 operands of column type
Boolean isVisible
is visible column in grid
Boolean useAutoIndex
will be index create automatically for this column
Boolean useAutoFilter
will be filter array create automatically for this column
Boolean useSort
allows sort methods using
}
int amountPerPage
Boolean use* fields of table
Object *Style fields of table
Object *Control fields of table
Object img* fields of table
int keyCol
index of key column of table in array colDef
Function rowHandler
user-defined row handler
}

Note! Each property *Class in any Object can be String or Object

If it is String - it is css class name that defines by user in file *.css or <style> section of page

If it is Object - it is Object with fields from this list "borderwidth", "bordercolor", "borderstyle","backgroundcolor", "backgroundimage", "backgroundrepeat", "color", "fontfamily", "fontstyle", "fontweight", "fontsize","textalign", "textdecoration", "verticalalign", "padding", "cursor"

At least one field must be set in this Object

Constructor:

CCodeThatTable(String name)
Defines CCodeThatTable object with the specified name
Example
var table = new CCodeThatTable("table")

Methods:

doAction([datatype, data])
Creates table container and paint table in it
Performs actions from get query stack for Opera 5,6
Loads data with datatype in case these parameters are defined, uses when data loads from form
callRowHandler()
Calls user-defined rowHandler when selection in the table changes
fromCSV(s[, spt])
Returns array [][] from String s
String at fisrt divide by \n and then divide by separator spt
fromCSVFile(s[, spt])
Returns array [][] from special format csv file named s
Content at fisrt divide by \n and then divide by separator spt
fromXML(x)
Returns array [][] from XML String x
fromXMLFile (x)
Returns array [][] from special xml file named x
getColByTitle (title)
Returns index in cols array by title of column or -1 if column is not found in table
getKeyArray(keyCol)
Returns array [] with values of key columns (keyCol) from selected rows
getID(prx)
Return String table.name + prx, uses for named filters and other elements of table
init(datatype, data)
Inits table with data in format datatype
loadData(tableDef)
Loads parameters from tableDef and inits table with data
pageTurnToHTML()
Returns HTML code of page turn panel of table
paint()
Paints table into browser window
resetSort ([sortCol])
Resets sort in grid by sortCol, if sortCol is undefined resets all sorts
resetMark()
Resets selection in table
search(dontPaint)
Searches in grid for searchValue or filterValue
If dontPaint don't paint table after search finished
setAction(funcName, funcParam)
Creates url with get query parameter to perform actions with table for Opera5,6 as window.location.href?funcName(funcParam)&..., keep stack of actions
Creates url as javascript:table.funcName(funcParam) for all other browsers
setAmountPerPage(amount)
Sets count of records per page with value amount
setIndex (sortCol)
Sets index for column sortCol
setIndex2(sortCol, start, end)
Sets secondary index for column sortCol that starts and start point and ens in end
setFilter(filterCol, filterValue)
Sets filterValue for filterCol
setKeyArray(keyCol, keyArray)
Hides all rows which key column (keyCol) value is not in [] keyArray, table.cells[i][keyCol] not in (keyArray), 0 <= i < table.rows.length
setMultiSort (sortCol, sortType)
Additionally sorts data by column sortCol in direction sortType
setPage(page)
Sets current page of table with value page and paints table in browser
setSearch()
Sets search with value prompted from user and searches in grid
setSort (sortCol, sortType)
Sorts data by column sortCol in direction sortType
toHTML()
Returns HTML code of table for use in table's container
Note Table is included into <form name='table.name'><\form> with name that equals table's name, because old browsers can't work with form's element without tag <form>
utilsToHTML()
Returns HTML code of search panel, amount panel and reset panel of table
Note Appearance of each panel depends on value according use*Panel parameter

Class CCodeThatRow

Fields:

int _id
Row id, that equals its index in owner grid rows array
CCodeThatTable grid
Table - owner of this row
Boolean isVisible
Flag is row shows in table
Boolean isMark
Flag is row selected
String css
Current style of row

Constructor:

CCodeThatRow(grid, id)
Creates new row in grid with _id equals id

Methods:

setHover()
Sets hover style for row
setMark()
Makes row selected and change its css
Change current selection depend on which key was hold (Ctrl || Shift)
Calls row's user-defined handler
setCSS(css)
Sets css class for HTML container of row with value css
HTML container (TR) for row named as row.table.name + "_row_" + row._id
valueOf()
Return int this._id

Class CCodeThatColumn

Fields:

int _id
Column id, that equals its index in owner table cols array
CCodeThatTable grid
Grid - owner of this row
Boolean isVisible
Flag is column shows in table, gets from colDef
String width
HTML parameter width='width value', by default width value is colDef.width
String alignment
HTML parameter align='align value', by default align value is colDef.alignment
String type
Type of column, gets from colDef
String title
Title of column, gets from colDef
String titleClass
Name of column's css class. Possible value is colDef.titleClass or table.tableStyle.thClass
String cellClass
Name of column's cell's css class. Possible value is colDef.cellClass
Function compareFunction
Function that uses for compare 2 elements of column to set index, gets from colDef
Boolean useAutoIndex
Flag is index for this column will be automatically created after grid initiation, gets from colDef
Boolean useAutoFilter
Flag is filter for this column will be automatically created after grid initiation, gets from colDef
[] int index
Index for this column
[] String filter
Filter array for this column
String filterValue
Current filter value for this column that was set by user
Boolean useSort
Indicates is column can be sorted

Constructor:

CCodeThatColumn(table, id[, colDef])
Creates new CCodeThatColumn with _id id and owner table, and defined from colDef, if colDef is undefined DEFAULT_COLDEF is used.
You can add user-defined properties is*, use*. Column will be automatically inits with them from colDef without additional coding.

Methods:

titleToHTML()
Returns HTML code for title of column represetation
It includes sort and multisort links too, in case when column can be sorted
getID(prx)
Return String column.grid.getID(prx) + column._id;
Uses for named objects owned by this column
setFilter()
Fills filter array with non-recurrent values of column and sorts it
filterToHTML()
Returns HTML code for filter of column represetation

Class CCodeThatCell

Fields:

CCodeThatRow row
Row - owner of cell
CCodeThatColumn col
Column - owner of cell
Object data
Data in cell

Constructor:

CCodeThatCell(row, col, data)
Creates new cell with row and col owner and set it with data

Fields:

getData ()
Returns string with data of cell formatted by function defined for type of current cell
getDataForFilter ()
If type is Date, Currency, Image return format data in all other cases return string representation of data in cell
compareTo (cell)
Compares current cell with cell with help of compareFunction of col of this cell

Service functions

cancelSelection(e)
Cancels selection
e - current event
isEnterPressed(e)
Sets isEnter variable
e - current event
isKeyHold(e)
Sets isShift, isAlt, isCtrl variables
e - current event

Global variables

isEnter
is enter pressed
isShift
is shift holded
isCtrl
is control holded
isAlt
is alt holded
w
window variable, uses when data loads from file in case if browser is not ie
curId
current element id, uses for drag event

Events handlers

CodeThat.regEventHandler('keydown', isEnterPressed);
CodeThat.regEventHandler('click', isKeyHold);
CodeThat.regEventHandler('mousemove', isKeyHold);
CodeThat.regEventHandler('selectstart', cancelSelection);

Read more about CodeThatTable >>

© CodeThat.com, 2003-2005
Design by XTLabs, Inc.