Index
The HT for Web
provides the property component class ht.widget.PropertyView
, which displays the currently selected Data
type object properties in the DataModel
data container, which supports grouping, sorting, and filtering, etc, way to display properties. Additionally HT
provides the PropertyPane Plugin, which provides a visual component encapsulation of grouping, sorting, and filtering.
Initialize building a property component object by propertyView = new ht.widget.PropertyView(dataModel);
, dataModel
parameter is a data model bound to a property component, the internal of model will create a new data model for binding the property component constructor when the model is empty.
The getPropertyModel()
function of the property component returns the property model object, which is essentially a DataModel
type object, except that the object is only used to add ht.Property
type object, ht.Property
type parent class is ht.Data
, adds a function interface associated with the property definition.
So what the user needs to do is build the ht.Property
object based on the property information to be displayed, and then added to the properties model returned by the propertyView.getPropertyModel()
function, so that when the data model of propertyView.getDataModel()
selects a change in the data, the relevant property information for the currently selected data Data
will displayed by the ht.Property
object stored on the propertyView.getPropertyModel()
configuration.
ht.Property
attribute class inherits from ht.Data
, you cannot set up a parent-child relationship and it has the following property functions:
getName()
and setName(name)
Gets and sets the name
property, the property combines accessType
property to get and set the Data
propertygetDisplayName()
and setDisplayName(displayName)
Gets and sets the display text value of the property name, or display the name
property value if emptygetIcon()
and setIcon('icon')
Gets and set the icon to the left of the property namegetColor()
and setColor(color)
Gets and set the text color of the property namegetCategoryName
and setCategoryName('name')
Sets the category name that properties in isEditable()
and setEditable(true/false)
Sets whether the property editable, the default is false
isBatchEditable()
and setBatchEditable(true/false)
Sets whether this property allows more than a batch edit, the default is true
getAccessType()
and setAccessType(type)
Gets and sets the access attribute type:null
: Default type, if name
is age
, using getAge()
and setAge(98)
get/set
or is/set
access typestyle
: If name
is age
, using getStyle('age')
and setStyle('age', 98)
access typefield
: If name
is age
, using data.age
and data.age = 98
access typeattr
: If name
is age
, using getAttr('age')
and setAttr('age', 98)
access typevalueType
is used to prompt the component to provide the appropriate renderer
, the appropriate editing control, and the necessary type conversions when changing values:null
: Default type, display as textstring
: String type, displayed as textboolean
: Boolean type, display as check boxcolor
: Colour type, displayed in a way that fills the background colorint
: Integral type, automatically convert by parseInt
when text editor changes valuenumber
: Float type, automatically convert by parseFloat
when text editor changes valuegetAlign()
and setAlign('left'/'center'/'right')
Determines the horizontal alignment of the text rendering, the default is left
isNullable()
and setNullable(true/false)
Determines whether the property is null, the default is true
, set to false
to avoid input null
or undefined
isEmptiable()
and setEmptiable(true/false)
Determines whether the property can be an empty string, the default is false
, to avoid input an empty string, and an empty string convert into undefined
property.getValue = function(data, property, view){return value}
Custom get value functionproperty.setValue = function(data, property, value, view){}
Custom set value functionproperty.drawPropertyValue = function(g, property, value, rowIndex, x, y, w, h, data, view)
Custom attribute value rendering functionproperty.drawPropertyName = function(g, property, rowIndex, x, y, w, h, view)
Custom attribute name rendering functionproperty.formatValue = function(value)
Generally used to convert a number to a text format that is easier to read, and can be overloaded with customproperty.getToolTip = function(data, isValue, propertyView)
Custom tooltip content, isValue
represents whether the mouse is in a range of property values currentlyEnumeration is a common property-editing selection application, rendering the drop-down list while editing, so ht
takes a lot of scenarios for enumerated type attributes, setEnum(params)
function to set a single json
parameter, or to set parameter information setEnum(enumValues, enumLabels, enumIcons, enumEditable, enumStrict)
separately, the following are common cases:
setEnum(['C','C++','JS'])
Passing a numerical array setEnum([1,2,3], ['C','C++','JS'])
Passing values and text arraysetEnum([1,2,3], ['C','C++','JS'], ['c_icon', 'c++_icon', 'js_icon'])
Passing values, text and icon arrayssetEnum({values:[1,2,3]})
Passing a numeric arraysetEnum({values:[1,2,3], labels:['C','C++','JS']})
Passing values and text arrayssetEnum({values:[1,2,3], labels:['C','C++','JS'], icons:['c_icon', 'c++_icon', 'js_icon']})
Passing values, text and icon arrays
HT
automatically detects whether the user has introduced Form Plugins, if theht.widget.ComboBox
component of the form plug-in then use it as an editor, otherwise use theselect
component of the nativehtml
, because of the originalhtml
select
drop-down component is text-only, so many of the parameters above work only for theht.widget.ComboBox
component.
enumValues
: Array of enumerated valuesenumLabels
: Enum text arrayenumIcons
: Enum icon arrayenumEditable
: Enum whether the drop-down editor allows input, the default is false
enumStrict
: Whether the value match use strict ===
to compare, the default is true
, if false
uses ===
to compareForm Plugin ht.widget.Slider
slider is also a common and easy-to-use editing component, and this ht
also increases the set of corresponding properties for that type, through getSlider()
and setSlider(parmas)
can specify the slider information that this property renders in edit state.
Attribute component class ht.widget.PropertyView
main configurable properties and functions are as follows:
isEditable()
and setEditable(true/false)
Whether the total switch editable, the default is true
, each Property
attribute can be controlledisBatchEditable()
and setBatchEditable(true/false)
Whether the total switch editable in selection in bulk, the default is true
, each property
attribute can be controlledisCategorizable
and setCategorizable(true/false)
Whether grouping, the default is true
, false
ignores Property
categoryName
attributegetIndent()
and setIndent(20)
Controls the left indent, the left space is used to draw the grouping toggle
icon, and the attribute hint icon
getSortFunc()
and setSortFunc(func)
Gets and sets property sort functiongetVisibleFunc()
and setVisibleFunc(func)
Gets and sets the property filter, and can also be overloaded by the PropertyView#isVisible(property)
functiongetExpandIcon()
and setExpandIcon(icon)
Gets and sets the icon for grouping expansiongetCollapseIcon()
and setCollapseIcon(icon)
: Grouping merged iconsgetScrollBarColor()
and setScrollBarColor(color)
Gets and sets scroll bar colorgetScrollBarSize()
and setScrollBarSize(6)
Gets and sets scroll bar widthisAutoHideScrollBar()
and setAutoHideScrollBar(true/false)
Gets and sets whether the scroll bar is automatically hidden, the default is true
getSelectRowIndex()
and setSelectRowIndex(10)
Gets and sets the currently selected row indexgetSelectBackground(data)
and setSelectBackground(color)
Gets and sets row selected background colorgetBackground()
and setBackground(color)
Gets and sets the background color of the border and grouping rowsgetRowHeight()
and setRowHeight(20)
Gets and sets row heightisRowLineVisible()
and setRowLineVisible(true/false)
Gets and sets whether line lines are visible, the default is true
getRowLineColor()
and setRowLineColor(color)
Gets and sets row line colorisColumnLineVisible()
and setColumnLineVisible(true/false)
Gets and sets whether the column line is visible, the default is true
getColumnLineColor()
and setColumnLineColor(color)
Gets and sets the column line colorgetColumnPosition()
and setColumnPosition(0.5)
Gets and sets the column line position ratio, the default is 0.5
, the allowed range from 0
to 1
getRows()
Returns an array of all the row information currently displayed, the array element is a string
type representing the grouping name, {data: d, property: p}
structure object represents attribute informationgetPropertyName(property)
Returns the property name displayed in the left column, which can be overloaded with customgetLabelFont(property, value, rowIndex)
Returns the label font of attribute value, which can be overloaded with customgetLabelColor(property, value, rowIndex)
Returns the label color of attribute value, which can be overloaded with customgetPropertyFont(property, rowIndex)
Returns the label font of attribute name, which can be overloaded with customgetPropertyColor(property, rowIndex)
Returns the label color of attribute name, which can be overloaded with customgetCategoryFont(categoryName)
Returns the label font of category, which can be overloaded with customgetCategoryColor(categoryName)
Returns the label color of category, which can be overloaded with customisExpanded(categoryName)
Determines whether the grouping is expandedtoggle(categoryName)
Toggle grouping expansion and mergingexpandAll()
Expands all groupsexpand(categoryName)
Expanding grouponExpanded(categoryName)
Callback when expand the group, can be overloaded for subsequent processingcollapseAll()
Merge all groupscollapse(categoryName)
Merging grouponCollapsed(categoryName)
Callback when merge the group, can be overloaded for subsequent processingcollapseAll()
Merge all groupsgetPropertyModel()
Gets the propertyModel
attribute, which is DataModel
type, can be deleted and added property
attribute object getDataModel()
and setDataModel(dataModel)
Gets and sets the binding DataModel
data modelupdateCurrentData()
Updates the Data
type object for which the property is currently displayed, the default is the last object selected in SelectionModel
getCurrentData()
Gets the current display objectdrawCategoryName(g, name, rowIndex, x, y, w, h)
Draws the category name, which can be overloaded with customdrawPropertyName(g, property, rowIndex, x, y, w, h)
Draws the property name, which can be overloaded with customdrawPropertyValue(g, property, value, rowIndex, x, y, w, h, data)
Draws the property value, which can be overloaded with customisPropertyEditable(property)
Determines whether the property is editable, and can overload with customgetRawProperties()
Returns the original unfiltered sorted attribute ht.List
collection to be displayed, which defaults to return propertyModel.getRoots()
and can be overloaded with customgetRowIndexAt(event)
Returns the row index where event events are locatedgetPropertyAt(event)
Returns the property information of the row in which the event is locatedenableToolTip()
and disableToolTip()
Enable and disable the tooltipisDisabled()
and setDisabled(true/false, iconURL)
Gets and sets the entire component in an unusable stateaddTopPainter(func)
and removeTopPainter(func)
Adds and removes top-level painter function(g){...}
addBottomPainter(func)
and removeBottomPainter(func)
Adds and removes bottom-level painter function(g){...}
addProperties(array)
Using json
array parameters to add attribute information in bulksetProperties(array)
Using json
array parameters to set attribute information in bulk, clear all the property when the parameter is emptyPropertyView
provides a function of addProperties
and setProperties
, which can be easily added property
by the json
format in bulk, and the above example used the following code:
propertyView.addProperties([
{
name: 'name',
displayName: 'Name'
},
{
displayName: 'CPU',
drawPropertyValue: function(g, property, value, rowIndex, x, y, w, h, data, view) {
drawFunc(g, data.a('cpu'), x, y, w, h);
},
getToolTip: function(data, isValue, propertyView){
return isValue ? data.a('cpu') + '%' : 'CPU usage percentage';
}
},
{
displayName: 'MEM',
drawPropertyValue: function(g, property, value, rowIndex, x, y, w, h, data, view) {
drawFunc(g, data.a('mem'), x, y, w, h);
},
getToolTip: function(data, isValue, propertyView){
return isValue ? data.a('mem') + '%' : 'Memory usage percentage';
}
}
]);
The above example case in the definition of CPU
and MEM
Property
, did not specify any name
and accessType
information, because they all define the drawPropertyValue function, so HT
does not need to get the value of the configuration information, but this also brings up another problem, after propertyView.enableToolTip()
, HT
is not able to get the value information to tooltip, so in this example, when defining the Property
of CPU
and MEM
, defines the getToolTip function for customization.
In the example when the indicator is presented green when the percent value in the 0~40
, yellow when 40~70
, red when 70~100
, so the definition of getColor
unified color conversion function, while drawPropertyValue
custom functions also call the uniform percent drawing function of drawFunc
.
getColor = function(value) {
if (value < 40)
return '#00A406';
if (value < 70)
return '#FFCC00';
return '#A60000';
};
drawFunc = function(g, value, x, y, w, h){
g.fillStyle = '#A1A1A3';
g.beginPath();
g.rect(x, y, w, h);
g.fill();
g.fillStyle = getColor(value);
g.beginPath();
g.rect(x, y, w * value / 100, h);
g.fill();
ht.Default.drawText(g, value + '%', '12px Arial', 'white', x, y, w, h, 'center');
};