HT for Web ListView Manual

Index

Overview

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

ListView component class ht.widget.ListView main configurable properties and functions are as follows:

The 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:&nbsp;</span>' + data.a('ProductId') + '<br>' +  
               '<span style="color:#3D97D0">ProductName:&nbsp;</span>' + data.a('ProductName') + '<br>' +  
               '<span style="color:#3D97D0">QuantityPerUnit:&nbsp;</span>' + data.a('QuantityPerUnit') + '<br>' + 
               '<span style="color:#3D97D0">Description:&nbsp;</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;
});
Welcome to contact us service@hightopo.com