HT for Web 列表组件手册

索引

概述

HT for Web提供了列表组件类ht.widget.ListView，用于显示DataModel数据容器中Data类型对象的属性信息，支持排序和过滤等功能。

通过listView = new ht.widget.ListView(dataModel);初始化构建一个列表组件对象，dataModel参数为列表组件绑定的数据模型， 该模型为空时列表组件构造函数内部将创建一个新的数据模型进行绑定。

列表组件

列表组件类ht.widget.ListView主要可配置属性和函数如下：

以下代码重载了drawRowBackground函数，绘制了列表行交替斑马线的效果：

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();
};

自定义了productIcon矢量图标，该图标设置了clip函数将图片裁剪成圆形效果，设置了listView.setIndent(60)为图片留出缩进间距， 重载了listView.getIcon函数，所有data都返回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';
};

自定义了getLabel根据attr定义的属性组合成label信息，自定义了getToolTip函数，以html格式返回文本提示信息：

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;
};

通过listView.setSortFunc设置了排序函数，根据attr上的UnitPrice价格属性进行对比：

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);
        }
    }
]);

通过listView.setVisibleFunc设置了行过滤器，根据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;
});
欢迎交流 service@hightopo.com