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