列表组件手册 - HT for Web

相关文章推荐

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

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

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

enableToolTip() 和 disableToolTip() 开启和关闭文字提示
isDisabled() 和 setDisabled(true/false, iconURL) 可获取和设置整个组件处于不可用状态
addTopPainter(func) 和 removeTopPainter(func) 增加和删除顶层绘制器 function(g){...}
addBottomPainter(func) 和 removeBottomPainter(func) 增加和删除底层绘制器 function(g){...}
getRowHeight() 和 setRowHeight(20) 获取和设置行高
isRowLineVisible() 和 setRowLineVisible(true/false) 获取和设置行线是否可见，默认为 true
getRowLineColor() 和 setRowLineColor(color) 获取和设置行线颜色
getSortFunc() 和 setSortFunc(sortFunc) 获取和设置排序函数
getVisibleFunc() 和 setVisibleFunc() 获取和设置可见过滤器，其可过滤 DataModel 中的 Data 数据对象
getScrollBarColor() 和 setScrollBarColor(color) 获取和设置滚动条颜色
getScrollBarSize() 和 setScrollBarSize(6) 获取和设置滚动条宽度
isAutoHideScrollBar() 和 setAutoHideScrollBar(true/false) 获取和设置是否自动隐藏滚动条，默认为 true
isCheckModel() 和 setCheckMode(true/false) 获取和设置是否为 check 模式，默认为 false
getCheckIcon(data) 返回 data 对象对应的 check 图标，可重载自定义 check 图标，该函数在 checkMode 模式下有效
getFocusData() 、 setFocusData(data) 和 setFocusDataById(id) 在 checkMode 模式下图元除了被选中有 check 状态外，还可以有被点击行的 focus 状态
drawRow(g, data, selected, x, y, width, height) 绘制行，可重载自定义行渲染。
getDataAt(pointOrEvent) 传入逻辑坐标点或交互事件 event 参数，返回对应的 data 对象或空
getToolTip(event) 根据传入的交互事件，返回文本提示信息，可重载自定义
onDataDoubleClicked(data, event) 当 data 所在行被双击时回调，可重载对双击事件做响应
onDataClicked(data, event) 当 data 所在行被单击时回调，可重载对单击事件做响应
getLabel(data) 返回 data 对象显示的文字，默认返回 data.toLabel() ，可重载自定义
getIcon(data) 返回 data 对象对应的 icon 图标，可重载自定义
getLabelFont(data) 返回对应的单元格文本字体，可重载自定义
getLabelColor(data) 返回对应的单元格文本颜色，可重载自定义
getSelectBackground(data) 和 setSelectBackground(color) 获取和设置行选中背景颜色
getStartRowIndex() 返回当前可见区域的起始行索引
getEndRowIndex() 返回当前可见区域的结束行索引
getRowDatas() 返回当前显示的 Data 对象数组，该数组已被排序和过滤
getRowIndex(data) 返回 data 对象所在的行索引
getRowSize() 返回当前可见行总行数
isVisible(data) 判断 data 对象是否可见，可重载自定义
getDataModel() 获取绑定的 DatModel 数据模型
setDataModel(dataModel) 绑定新的 DatModel 数据模型
makeVisible(data) 该函数触发组件滚动到确保 data 对象出现在可见区域。
invalidateModel() 该函数触发组件重新排序过滤加载数据，一般组件会自动调用，除非数据变化但未派发事件时才需强制调用
redraw() 重绘刷新，注意该函数不会触发数据模型的重新加载
invalidateData(data) 调用该函数会重绘 data 对象所在行
drawRow(g, data, selected, x, y, width, height) 绘制行内容，可重载自定义
drawRowBackground(g, data, selected, x, y, width, height) 绘制行背景色，默认仅在选中该行时填充选中背景色，可重载自定义
drawLabel(g, data, x, y, height) 绘制文本，可重载自定义， label 一般绘制在最后因此没有 width 参数限制
drawIcon(g, data, x, y, width, height) 绘制图标，可重载自定义，这里 width 值取值于 getIconWidth 函数
getIconWidth(data) 返回 data 对象对应的图标宽度，默认如果有图标则以 indent 值为宽度，可重载自定义
getIndent() 和 setIndent(20) 获取和设置 indent 缩进，该参数一般用于指定图标的宽度
handleDragAndDrop(event, state) 该函数默认为空，若该函数被重载，则 pan 平移组件功能将被关闭
- event 鼠标或 Touch 交互事件
- state 当前状态，先后会有 prepare - begin - between - end 四种过程

以下代码重载了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;