Index
The HT for Web
provides a ListView component class ht.widget.ListView
, which displays the property information of the Data
type object in the DataModel
container, and supports sorting and filtering functions.
Initialize building a ListView component object by listView = new ht.widget.ListView(dataModel);
, dataModel
parameter is a data model bound to a list component, the ListView component constructor will create a new data model for binding when the model is null.
ListView component class ht.widget.ListView
main configurable properties and functions are as follows:
enableToolTip()
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){...}
getRowHeight()
and setRowHeight(20)
Gets and sets row heightisRowLineVisible()
and setRowLineVisible(true/false)
Gets and sets whether the row line visible, the default is true
getRowLineColor()
and setRowLineColor(color)
Gets and sets the color of row linegetSortFunc()
and setSortFunc(sortFunc)
Gets and sets the sort functiongetVisibleFunc()
and setVisibleFunc()
Gets and sets visible filters, which can filter Data
objects in DataModel
getScrollBarColor()
and setScrollBarColor(color)
Gets and sets the color of scroll bargetScrollBarSize()
and setScrollBarSize(6)
Gets and sets the scroll bar widthisAutoHideScrollBar()
and setAutoHideScrollBar(true/false)
Gets and sets whether automatically hidden scroll bars, the default is true
isCheckModel()
and setCheckMode(true/false)
Gets and sets whether is check
mode, the default is false
getCheckIcon(data)
returns the check
icon of the data
object, which can overload with custom check
icon, which is valid in checkMode
getFocusData()
, setFocusData(data)
and setFocusDataById(id)
In checkMode
mode, the data has the check
state and the focus
state of being clickeddrawRow(g, data, selected, x, y, width, height)
Draw row, can be overloaded with custom line rendering.getDataAt(pointOrEvent)
Input logical coordinate point or interactive event event
parameter, returns corresponding data
object or nullgetToolTip(event)
Returns tooltip based on inputting interaction events, which can be overloaded with customonDataDoubleClicked(data)
Callback when the data
row is double-clicked, can be overloaded to respond to the double-click event onDataClicked(data)
Callback when the data
row is clicked, can be overloaded to respond to the click event getLabel(data)
Returns the text displayed by the data
object, the default return is data.toLabel()
, which can be overloaded with customgetIcon(data)
Returns the icon
for the data
object, can be overloaded with customgetLabelFont(data)
Returns the corresponding cell text font, can be overloaded with customgetLabelColor(data)
Returns the corresponding cell text color, can be overloaded with customgetSelectBackground(data)
and setSelectBackground(color)
Gets and sets the row selection background colorgetStartRowIndex()
Returns the starting row index of the currently visible areagetEndRowIndex()
Returns the end row index of the currently visible areagetRowDatas()
Returns an array of currently displayed Data
objects that have been sorted and filteredgetRowIndex(data)
Returns the row index where the data
object is locatedgetRowSize()
Returns the total number of currently visible rowsisVisible(data)
Determines whether the data
object is visible and can be overloaded with customgetDataModel()
Gets the binding DataModel
setDataModel(dataModel)
Binds the new DataModel
makeVisible(data)
This function triggers the component to scroll to the visible area that the data
object displaysinvalidateModel()
This function triggers the component reordering filter loading data, and the component is automatically called in general unless the data changes but the event is not dispatched.redraw()
Redraw refresh, note that the function does not trigger a reload of the data modelinvalidateData(data)
Called to redraw the row where the data
object is locateddrawRow(g, data, selected, x, y, width, height)
Draws line content, can be overloaded with customdrawRowBackground(g, data, selected, x, y, width, height)
Draws a row background color, fill the selected background color only when the row is selected in default, can be overloaded with customdrawLabel(g, data, x, y, height)
Draws text that can be overloaded with custom, label
generally drawn at the end so there is no width
parameter limitdrawIcon(g, data, x, y, width, height)
Draws icon, can be overloaded with custom, the width
value is value in getIconWidth
functiongetIconWidth(data)
Returns the icon width of the data
object, and if there is an icon then set the indent
value as the width in default, can be overloaded with customgetIndent()
and setIndent(20)
Gets and sets indent
, which are generally used to specify the width of the iconhandleDragAndDrop(event, state)
The function defaults to NULL, and if the function is overloaded, the pan
pan component feature will be closedevent
Mouse or Touch
interaction eventstate
Current status, there will be prepare
-begin
-between
-end
four processesThe following code overloads the drawRowBackground function, drawing the effect of alternating zebra crossings in a list row:
listView.drawRowBackground = function(g, data, selected, x, y, width, height){
if(this.isSelected(data)){
g.fillStyle = '#87A6CB';
}
else if(this.getRowIndex(data) % 2 === 0){
g.fillStyle = '#F1F4F7';
}
else{
g.fillStyle = '#FAFAFA';
}
g.beginPath();
g.rect(x, y, width, height);
g.fill();
};
Customized the productIcon
vector icon, which sets the clip function to crop the picture into a circular effect, sets the listView.setIndent(60)
to leave the indent spacing for the picture, and overload the listView.getIcon
function, all data
returns the vector icon of productIcon
:
ht.Default.setImage('productIcon', {
width: 50,
height: 50,
clip: function(g, width, height) {
g.beginPath();
g.arc(width/2, height/2, Math.min(width, height)/2-3, 0, Math.PI * 2, true);
g.clip();
},
comps: [
{
type: 'image',
stretch: 'uniform',
rect: [0, 0, 50, 50],
name: {func: function(data){return 'images/' + data.a('ProductId') + '.jpg';}}
}
]
});
listView.setIndent(60);
listView.getIcon = function(data){
return 'productIcon';
};
Customized getLabel
, combines the label
information by attr
defined attributes, customized the getToolTip
function to return the tooltip information in html
format:
listView.enableToolTip();
listView.getLabel = function(data){
return data.a('ProductName') + ' - $' + data.a('UnitPrice').toFixed(2);
};
listView.getToolTip = function(e){
var data = this.getDataAt(e);
if(data){
return '<span style="color:#3D97D0">ProductId: </span>' + data.a('ProductId') + '<br>' +
'<span style="color:#3D97D0">ProductName: </span>' + data.a('ProductName') + '<br>' +
'<span style="color:#3D97D0">QuantityPerUnit: </span>' + data.a('QuantityPerUnit') + '<br>' +
'<span style="color:#3D97D0">Description: </span>' + data.a('Description');
}
return null;
};
A sort function is set through listView.setSortFunc
to compare the UnitPrice
price attribute on attr
:
sortFunc = function(d1, d2){
return d1.a('UnitPrice') - d2.a('UnitPrice');
};
listView.setSortFunc(sortFunc);
toolbar.setItems([
{
label: 'Sort by price',
type: 'toggle',
selected: true,
action: function(){
listView.setSortFunc(this.selected ? sortFunc : null);
}
}
]);
A row filter is set through listView.setVisibleFunc
to filter the contents of the text field on toolbar
:
toolbar.setItems([
{
id: 'text',
label: 'Search',
icon: 'images/search.png',
textField: {
width: 120
}
}
]);
toolbar.getItemById('text').element.getElement().onkeyup = function(e){
listView.invalidateModel();
};
listView.setVisibleFunc(function(data){
var text = toolbar.v('text');
if(text){
return data.a('ProductName').toLowerCase().indexOf(text.toLowerCase()) >= 0;
}
return true;
});