vegui. dataset. class.jsSummary | | | | | | | | | This element extends the VegUIList element and thereby inherits all the properties and methods of the VegUIList | | | | | | | | | | | | Creates a HTML node for a row in the dataset | | Remove one item from the dataset by its row id | | Remove multiple items from the dataset by their row ids | | Dummy function, is called when the delete key is hit, this could be replaces by a function that sends a request to the server instead of calling delete_item right away | | Dummy function, is called when the delete key is hit and multiple items are selected, this could be replaced by a function that sends a request to the server instead of calling delete_item right away | | Expands the currently selected row and shows the content stored in the detailed field of the row | | Toggles input mode on a column field in a certain row | | | | Flushes the dataset, removing all entries | | Rebuilds the dataset according to the current data in columns and rows | | Adds a row to the rows array | | Returns the fields object for the row with the submitted id | | Rebuilds the submitted row in the dataset | | Wrapper method to set the style class name attributes of this element | | Returns the data set as a valid xml string |
Dataset Input Types| VUI_DSET_INPUT_TEXT | text input | | VUI_DSET_INPUT_LIST | list input | | VUI_DSET_INPUT_BOOL | boolean input (true / false) | | VUI_DSET_INPUT_CUSTOM | custom function input |
VegUIDatasetThis element extends the VegUIList element and thereby inherits all the properties and methods of the VegUIList HierarchyVegUINode
|
+-- VegUICBox
|
+-- VegUIList
|
+-- VegUIDataset
TypeVUI_DATASET Children| Control | VUI_NODE, used to control various html nodes | | FldInput | VUI_NODE, input node for regular text input | | FldInputPw | VUI_NODE, input node for password input | | ListPanel | VUI_NODE, panel that is shown when the user is is prompted for list input | | Scaler | VUI_NODE, node that will be used to visualize the scale effect when ListPanel is shown |
Summary | | | | | | | | | | | Creates a HTML node for a row in the dataset | | Remove one item from the dataset by its row id | | Remove multiple items from the dataset by their row ids | | Dummy function, is called when the delete key is hit, this could be replaces by a function that sends a request to the server instead of calling delete_item right away | | Dummy function, is called when the delete key is hit and multiple items are selected, this could be replaced by a function that sends a request to the server instead of calling delete_item right away | | Expands the currently selected row and shows the content stored in the detailed field of the row | | Toggles input mode on a column field in a certain row | | | | Flushes the dataset, removing all entries | | Rebuilds the dataset according to the current data in columns and rows | | Adds a row to the rows array | | Returns the fields object for the row with the submitted id | | Rebuilds the submitted row in the dataset | | Wrapper method to set the style class name attributes of this element | | Returns the data set as a valid xml string |
Object Properties| columns | object, columns object that holds information about the columns in the dataset | | rows | array, array that holds a fields object for each row, every fields object holds a value for a certain column in the row | | cssColumnOver | string, css class to use for a column field when mouse pointer is moved over it | | cssColumnNormal | string, css class to use for a column field | | cssRow | string, css class to use for a row (‘table element’) | | cssDetailed | string, css class to use for detailed box | | noFX | bool, if true the detailed display will be faded in | | fxFadeSpeed | int, time it takes for the detailed display to fade in (ms) | | ListTpl | VegUIList, the list for list input will be cloned from this template | | fixCols | bool, if true columns in the database will not resize in order to hold more content, any overflowing content will be cut | | forceExpand | bool, if true all items will be expanded after rebuild() is done |
Template PropertiesThe Columns Object ExplainedThe columns object defines what and how many columns are in the dataset and how the user can interact with them. Some of the keywords should be familiar from the VegUIPropertySet element. Every property object of the columns object defines a column, the property name equals the column’s name. Every column object can have certain properties set to define its behaviour Column Properties| editType | int, input type for the column | | width | int, width of the column in percent | | caption | string, caption text to display in the header of the column | | password | bool, if true content will be hidden and input will be password type input | | fetch | function, if editType is VUI_DSET_INPUT_CUSTOM this function will be called to update the field | | fill_list | function, if editType is VUI_DSET_INPUT_LIST this function will be called to fill the field’s list with items to chose from | | value | variable, if set defines the default value of the field | | hidden | bool, if true the column will not be rendered (useful if you want to manipulate the detailed field, without having an additional detailed column show up in the dataset) | | raw | bool, property that is specific to the detailed field, if true the detailed field will hold raw text instead of displaying HTML |
Columns Object Examplecolumns = {
column_1 : {
caption : 'First Column',
width : 50
},
column_2 : {
caption : 'Second Column',
width : 50
}
}
Fields Object ExplainedA fields object holds the values for all the columns for a certain row. Each property name of the object should be a match to one column of the dataset, the value of the property is the value of the column (field) in the row that is represented by the fields object. The id property of a fields object is special, as it will represent a unique id of the row and the item that is getting added to the database list that represents the row will take over the value stored in the field object’s id property The detailed property of a fields object is special, as it can hold a lot of text that will be hidden until the row is expanded using the expand function Fields Object Examplefields = {
column_1 : 'field value 1',
column_2 : 'field value 2'.
id : n
};
build_dataset| this.build_dataset = this.build = function( | toNode | ) |
|
Builds the element See alsoVegUINode::build_node create_entry| this.create_entry = function( | fields, | | asHeader | ) |
|
Creates a HTML node for a row in the dataset Paramters| object fields | javascript objects holding the field data of the row | | <bool asHeader> | if true create header element |
Example of fields objectfields = {
column_1 : 'field value 1',
column_2 : 'field value 2'
};
delete_item| this.delete_item = function( | value | ) |
|
Remove one item from the dataset by its row id Method| variable value | value of item to delete |
delete_items| this.delete_items = function( | sItems | ) |
|
Remove multiple items from the dataset by their row ids Method| array sItems | array holding all selected items in the dataset |
See alsodelete_req delete_req| this.delete_req = function( | value | ) |
|
Dummy function, is called when the delete key is hit, this could be replaces by a function that sends a request to the server instead of calling delete_item right away Paramters| variable value | id of row that is to be deleted |
See alsodelete_item, delete_req_m delete_req_m| this.delete_req_m = function( | sItems | ) |
|
Dummy function, is called when the delete key is hit and multiple items are selected, this could be replaced by a function that sends a request to the server instead of calling delete_item right away Parameters| array sItems | array holding items in the sItem format |
See alsodelete_items, delete_req expand| this.expand = function( | id | ) |
|
Expands the currently selected row and shows the content stored in the detailed field of the row input_go| this.input_go = function( | id, | | cell | ) |
|
Toggles input mode on a column field in a certain row Parameters| variable id | id of the targeted row | | HTMLNode cell | targeted column field |
Returns| null | if input could not be toggled on |
input_halt| this.input_halt = function() |
Stops input mode Returns| variable | the new value entered by the user |
See alsoinput_go flush_dset| this.flush_dset = function() |
Flushes the dataset, removing all entries rebuild| this.rebuild = function() |
Rebuilds the dataset according to the current data in columns and rows row_add| this.row_add = function( | fields, | | id | ) |
|
Adds a row to the rows array Parameters| object fields | fields object containing values for the columns in the row | | variable id | unique id for the row |
See alsorow_get row_get| this.row_get = function( | rowId, | | getIdx | ) |
|
Returns the fields object for the row with the submitted id Parameters| int rowId | id of the row | | bool getIdx | if true only the index is returned |
Returns| object | fields object | | null | if no row with the submitted rowId was found | | int | index, the index of the row object in the rows property when getIdx is submitted as true |
See alsorow_add row_update| this.row_update = function( | fields | ) |
|
Rebuilds the submitted row in the dataset Paramters| object fields | fields object holding values for every column in the row |
set_styles_dsetWrapper method to set the style class name attributes of this element Aliasset_styles Parameters| string over | css class to use on a row when the mouse is hovering over it | | string normal | css class to use on a row when in normal state | | string select | css class to use on a row when selected | | string header | css class to use on header rows | | string overSelect | css class to use on a row when the mouse is hovering over it and the row is selected | | string colNormal | css class to use on a column field when in normal state | | string colOver | css class to use on a column field when the mouse is hovering over it | | string detail | css class to use for the detailed display |
See alsoVegUIList::set_style_list to_xml| this.to_xml = function( | tag | ) |
|
Returns the data set as a valid xml string Parameters| string tag | name of the starting xml tag |
Returns| string | xml string containing the rows of the data set |
|