Codethatgrid Reference
Class CCodeThatGrid
Fields:
- String name
- Name of grid that equals name of variable that contains the CCodeThatGrid
- CGRow [] rows
- Array of CGRow Objects that represents rows in grid
- int [] rIdx
- Index array of rows; keep real order of them in grid
- int rowCount
- Count of rows in grid
- CGCol [] cols
- Array of CGCol Objects that represents columns in grid
- int [] cIdx
- Index array of columns; keep real order of them in grid
- int colCount
- Count of columns in grid
- Boolean useColTitle
- Flag is titles of columns show in grid
- CGCell [][] cells
- Array of CGCell Objects that represents cells in grid
- CGCell curCell
- Object represents current cell 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
- int markType
- Type of current selection in grid
- 0 - no selection
- 1 - columns selection
- 2 - rows selection
- 3 - range selection
- [] int markRange
- Ranges of current selection
- int amountPerPage
- Count of rows per page, by default - 20
- int pageCount
- Count of pages in grid
- int page
- Current page in grid
- Object clip
- Grid clipboard
- Boolean useProgress
- Flag is write information about progress of current operation in status bar of window, by default - true
- Boolean useRCID
- Flag is use row and column headers (1, 2, … and A, B, …), by default - true
- Boolean useExportBar
- Flag is use standart export bar for grid
- Boolean isInit
- Flag is loading of data into grid complete
- Function userFunction
- Function that will be call after data setting for each non-service cell
- Object def
- User definition for grid, its structure is
- {
- int datatype
- 0 - array | 1 - csv string | 2 - xml file | 3 - csv 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 isReadOnly
- will be all cells in this column read only
- Function userFunction
- function that will be call after data setting for each non-service cell in this column
- }
- int amountPerPage
- Boolean use* fields of grid
- Object *Style fields of grid
- Object *Bar fields of grid
- }
- Object tableStyle
- Represents common style for grid, its structure is
- {
- int width
- int height
- String bgcolor
- String overflow
- "auto", "visible", "hidten" , by default : auto
- Object | String tableClass
- }
- Object colStyle
- Represents common style for column, its structure is
- {
- String | Object defaultClass
- style of column
- String | Object markClass
- style for selected column or column with current/selected cell
- String | Object dragClass
- style for drag column
- }
- Object rowStyle
- Represents common style for row, its structure is
- {
- String | Object defaultClass
- style for row
- String | Object markClass
- style for selected row or row with current/selected cell
- String | Object dragClass
- style for drag row
- }
- Object cellStyle
- Represents common style for column, its structure is
- {
- String | Object defaultClass
- style for cell
- String | Object markClass
- style for selected cell
- String | Object currClass
- style for current cell
- }
- Object toolBar
- Represents toolBar and has such structure
- {
- int height
- String bgcolor
- String | Object defaultClass
- buttons:
- [
- {
- String name
- "adtrowto" | "adtrowafter" | "delrow" | "adtcolto" | "adtcolafter" | "delcol" | "sortasc" | "sortdesc" | "multisortasc" | "multisortdesc" | "resetsort" | "copy" | "paste" | "formatbold" | "formatitalic" | "formatunderline" | "alignleft" | "aligncenter" | "alignright" | "setsearch" | "resetsearch" | "setamount"
- String text
- label for button
- Object img_on
- {String src:, int width:, int height}
- Object img_off
- {String src:, int width:, int height}
- },
- …
- ]
- }
-
- Object statusBar
- Represents statusBar, its structure is
- {
- int height
- String bgcolor
- String | Object defaultClass
- common style
- String | Object messageClass
- style for special messages
- String fieldText
- text marked that here are will be field label
- String valueText
- text marked that here are will be value from field
- }
- Object pageTurnBar
- Represents bar with pages, its structure is
- {
- String bgcolor
- String | Object defaultClass
- common style
- String | Object activeClass
- style for current page
- Object img_on : {String src:, int width:, int height}
- bgimage for current page
- Object img_off : {String src:, int width:, int height}
- bgimage for all other pages
- int height
- height of one page
- int width
- width of one page
- String text
- label template for page
- }
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
To disable toolBar or statusBar set the height property with 0
To disable pageTurnBar set amountPerPage with value that equal or greater then rowCount
Constructor:
- CCodeThatGrid(String name, int r, int c)
- Defines CCodeThatGrid object with the specified name and dimension: r rows x c columns
- Example
- var grid = new CCodeThatGrid("grid", 10, 10)
Methods:
- addCol (idx, offset, [p,[d]])
- Adds column at idx in array cols, if idx undefined adds column in offset columns from current
- Parameters p indicates if will be grid painting after row add, by default it is true
- Parameter d set the colDef for new columns, if it undefined DEFAULT_COLDEF will be using
- addRow (idx, offset[, p])
- Adds row at idx in array rows, if idx undefined adds row in offset rows from current
- Parameters p indicates if will be grid painting after row add
- By default it is true
- clearMarkRange(markType)
- Clears current mark range
- In case when user holds Shift or Ctrl and current markType equals markType do nothing
- copy ()
- Keep data from current selection into grid clipboard
- delCol (idx[, p])
- Delete column at idx from array cols
- Parameters p indicates if will be grid painting after row deletind
- By default it is true
- delCols()
- If current markType is 1 (columns selection) all columns from this selection will be deleted in another case current columns will be delete
- delRow (idx[, p])
- Delete row at idx from array rows
- Parameters p indicates if will be grid painting after row deletind
- By default it is true
- delRows()
- If current markType is 2 (rows selection) all rows from this selection will be delete in another case current row will be delete
- doAction([datatype, [data]])
- Starts action of grid after initiation and loads data with datatype if parameters are defined
- ebToHTML()
- Returns HTML content of export bar of grid with div container
- init (gridDef)
- Initiates grid with data and appearance parameters from user gridDef definition
- 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 or name (A, B, C, …) of column or -1 if column is not found in grid getClipData()
- Gets data from system clipbords
- Supports NN6 and IE5+ only
- getID (prefix)
- Returns string id with prefix for current grid, uses to name toolbars and etc.
- hideProgress ()
- Clear status bar of window
- loadData(datatype, data[, cell])
- Loads data with datatype into grid where cell is start cell for insert data
- If cell is undefined data will be loading with start in first cell of grid
- If size of data greater then size of grid, grid size will be increased
- paint()
- Paints grid into browser window
- paintBar (bar)
- Paints bar of grid with bar prefix
- paste ()
- Paste data from grid clipboards starts from current cell
- ptToHTML ([inDIV])
- Returns HTML content of page turn bar of grid with div container in case inDIV is true
- resetSearch ()
- Resets search results in grid
- resetSort ([sortCol])
- Resets sort in grid by sortCol, if sortCol is undefined resets all sorts
- sbToHTML ([inDIV])
- Returns HTML content of status bar of grid with div container in case inDIV is true
- search()
- Searches in grid for searchValue or filterValue
- setAmountPerPage()
- Sets amount records per page with value prompted from user
- setCellStyle (param, value, cell)
- Sets style parameter param with value to the current cell or current selection (markType=1,2 only)
- setClipData(d)
- Sets data into system clipbords
- Supports only IE5+
- setCurCell(cell)
- Sets current cell
- 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 filter in filterValue for filterCol and searches in grid
- setFocus(rOffset, cOffset)
- Sets focus to the cell that offset from current one on rOffset rows and cOffset cols
- setMarkRange(markRange, markType)
- Sets selected range as markRange with type markType
- setMultiSort (sortCol, sortType)
- Additionally sorts data by column sortCol in direction sortType
- setPage(page)
- Sets current page of grid
- setSearch ()
- Sets search with value prompted from user and searches in grid
- setSort (sortCol, sortType)
- Sorts data by column sortCol in direction sortType
- tbToHTML()
- Returns HTML content of tool bar of grid with div container
- toCSV([spt, [isRng, [onlychanged, [lessreadolnly]]]])
- Returns csv-string with separator spt
- If isRng is true csv-string get from current selection in another case from whole grid
- If onlychanged is true will be return only changed rows
- If lessreadonly is true will be return only non-readonly rows
- By default:
- spt = ';'
- isRng = false
- onlychanged = false
- lessreadonly = false
- toCSVFile ([onlychanged])
- Returns string with header '<?xml version="1.0"?><data table="grid.name">'…'</data>' for keeping in special format csv-file
- If onlychange is true will be return only changed rows, by default false
- toHTML ([inDIV])
- Returns HTML content of grid with div container in case inDIV is true
- toXML ([onlychange, [lessreadonly]])
- Returns xml-string in format
- <?xml version="1.0"?>
- <data table="grid.name">
- <row id="…">
- <field fieldname="col.title" bold="true|false" underline="true|false" italic="true|false" align="left|center|right">
- cell.value
- </field>
- …
- </row>
- …
- </data>
- If onlychange is true will be return only changed rows
- If lessreadonly is true will be return only non-readonly rows
- By default:
- onlychanged = false
- lessreadonly = false
- useFilter ([set])
- Returns true if at least one column has autoFilter = true and filterValue != "" in case set parameter is defined
- writeProgress (m)
- Wtites message m in status bar of window
Class CGRow
Fields:
- int _id
- Row id, that equals its index in owner grid rows array
- CCodeThatGRid grid
- Grid - owner of this row
- Boolean isVisible
- Flag is row shows in grid
- String height
- HTML parameter height='heightvalue', by default height value is grid.rowStyle.height
- Boolean change
- Flag is data in row was changed, by default false
- Boolean isMark
- Flag is row selected
- Boolean isReadOnly
- Flag is data in row is read only
- Function userFunction
- User defined function that call after data setting for each non-service cells in this row
- Function handler
- User defined function that call as handler event of this row, required parameter object CEvent e
this.handler = rowHandler;
//e._e - Object window.Event, e._e.type = ["click", "dblclick", "mouseup", "mousedown"]
//e._o - source Object that call handler (CGCol, CGRow or CGCell)
function rowHandler(e) {
switch(e._e.type) {
case "click" :
e._o.isMark = true;
};
};
- String defaultClass
- CSS class that defined normal style of this row
- String markClass
- CSS class that defined selected style of this row
Constructor:
- CGRow(id, grid)
- Creates new CGRow with _id id and owner grid
Methods:
- getName([num])
- Returns title for row header from num, if num undefined as num uses _id
- GetID(prefix)
- Returns string id with prefix for this, uses to name drag elements and etc.
- valueOf ()
- Returns _id value
- toString ()
- Returns _id value
- search (s, f)
- Searches in row for String s and check is match filters in columns with indexes [] f its filterValue
- Returns true if success and false in another case
- setMark (isMark[, s[, f[, p]]])
- Selects row or part of row from s to f cells and paint it if p is undefined or true
- If s undefined s is 0
- If f undefined f is grid.colCount
- paint ([s[, f]])
- Paints row from s to f cells
- If s undefined s is 0
- If f undefined f is grid.colCount
- setHeight (h)
- Sets new value h as height for row
- Height = 'height=' + h will be result in field height for this row
Class Cgcol
Fields:
- int _id
- Column id, that equals its index in owner grid cols array
- CCodeThatGRid grid
- Grid - owner of this row
- Boolean isVisible
- Flag is column shows in grid, 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
- Boolean isMark
- Flag is column selected
- Boolean isReadOnly
- Flag is data in column is read only, gets from colDef
- String type
- Type of column, gets from colDef
- String title
- Title of column, gets from colDef
- String titleClass
- HTML parameter class='colDef.titleClass | grid.colStyle.defaultClass'
- Function compareFunction
- Function that uses for compare 2 elements of column to set index, gets from colDef
- Function userFunction
- User defined function that call after data setting for each non-service cells in this column, 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
- Function handler
- User defined function that call as handler event of this column, required parameter object CEvent e
this.handler = rowHandler;
//e._e - Object window.Event, e._e.type = ["click", "dblclick", "mouseup", "mousedown"]
//e._o - source Object that call handler (CGCol, CGRow or CGCell)
function rowHandler(e) {
switch(e._e.type) {
case "click" :
e._o.isMark = true;
};
};
- String defaultClass
- CSS class that defined normal style of this column
- String markClass
- CSS class that defined selected style of this column
Constructor:
- CGCol(id, g[, colDef])
- Creates new CGCol with id id and owner grid, and defined from colDef, if colDef is undefined DEFAULT_COLDEF is used.
Methods:
- getName([num])
- Returns title for column header from num, if num undefined as num uses _id
- GetID(prefix)
- Returns string id with prefix for this, uses to name drag elements, filters and etc.
- valueOf ()
- Returns _id value
- toString ()
- Returns _id value
- setTitle()
- Sets prompted from user title as new title of column
- setFilter()
- Set filter array from column's cells data
- filterToHTML()
- Returns HTML content for filter as select with name getID('filter')
- setMark (isMark[, s[, f[, p]]])
- Selects column or part of column from s to f cells and paint it if p is undefined or true
- If s undefined s is 0
- If f undefined f is grid.rowCount
- paint ([s[, f]])
- Paints column from s to f cells
- If s undefined s is 0
- If f undefined f is grid.rowCount
- setWidth (h)
- Sets new value w as width for column
- width = 'width=' + w will be result in field width for this column
Class Cgcell
Fields:
- CGRow row
- Row owner of cell
- CGCol col
- Column owner of cell
- int state
- 0 - default, 1 - current, 2 - editing
- Boolean isMark
- Flag is cell selected
- Boolean isReadOnly
- Flas is cell is read only
- String b
- Value of parameter style.fontWeight for this cell, by default ""
- String i
- Value of parameter style.fontStyle for this cell, by default ""
- String u
- Value of parameter style.textDecoration for this cell, by default ""
- String alignment
- Value of parameter style.textAlign for this cell, by default ""
- Object data
- Value in this cell
- Function handler
- User defined function that call as handler event of this cell, required parameter object CEvent e
this.handler = rowHandler;
//e._e - Object window.Event, e._e.type = ["click", "dblclick", "mouseup", "mousedown"]
//e._o - source Object that call handler (CGCol, CGRow or CGCell)
function rowHandler(e) {
switch(e._e.type) {
case "click" :
e._o.isMark = true;
};
};
- String defaultClass
- CSS class that defined normal style of this cell
- String markClass
- CSS class that defined selected style of this cell
- String currClass
- CSS class that defined current style of this cell
Constructor:
- CGCell(row, col[, data])
- Creates new cell with row and col owner and set it with data
Methods:
- setData (data[, isService])
- Sets data into cells, check the type and call userFunction(s) if at least one of them defined and isService=false
- If isService undefined it calculate as col.isReadOnly || row.isReadOnly
- getData ()
- Returns string with data of cell formatted by function defined for type of current cell
- getDataForEdit ()
- If type is Date return format data in all other cases return string representation of data in 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
- toString()
- Returns "{" + row._id + "; " + col._id + "}"
- getID()
- Returns row.grid.getID("cell") + t.row._id + "_" + t.col._id, uses for name cells element
- getEditControl()
- Returns HTML control for edit of current cell, in case if it is not readonly and its col and row are not read only too.
- If type is Date, Currency or Number returns 'input' control, in other cases 'textarea'
- In another case return ""
- setState(state)
- Sets current state of cell as state and paints it
- setMark()
- Selects cell and paints it
- setStyle (param, value)
- Sets current style of cell and paint it
- Param can be : b, i, u, alignment
- getStyle()
- return HTML style attribute for this cell
- paint ([p])
- Paints cell and its row/col if p is true
- By default p is true
Additional functionality of array
- insert(element, index)
- Inserts element into array at index
- remove(index)
- Remove element from array at index and shift array
Service functions
- makeRE(text)
- Returns new RegExp() with switches ig from the text
Global variables
- isShift
- is shift holded
- isCtrl
- is control holded
- CCG
- current CodeThatGrid Object
- CodeThatGrids
- array of CodeThatGrid Object at page
- re
- /class=/
- rng
- array of current select range
- w
- window variable, uses when data loads from file in case if browser is not ie
- curId
- current element id, uses for drag event
Read more about CodeThatGrid >>
|