# bi.grid_view

## 网格视图集合,高性能组件,可以处理网格状的大集合，实现需要知道每一个视图的高度信息,基类[BI.Widget](/core/widget.md)

{% method %}
[source](https://jsfiddle.net/fineui/fkntzLq5/)

{% common %}
```javascript

BI.createWidget({
    type: "bi.grid_view",
    width: 400,
    height: 300,
    estimatedRowSize: 30,
    estimatedColumnSize: 100,
    items: [],
    scrollTop: 100,
    rowHeightGetter: function () {
        return 30;
    },
    columnWidthGetter: function () {
        return 100;
    }
});



```

{% endmethod %}

## API
##### 基础属性
| 参数    | 说明           | 类型  | 可选值 | 默认值
| :------ |:-------------  | :-----| :----|:----
| items | 子组件数组 | array | —  | [ ] |
| overflowX | 是否显示横向滚动条| boolean | true,false | true |
| overflowY | 是否显示纵向滚动条 | boolean | true,false | true |
| overscanColumnCount| 超出可视范围区域预加载多少列 | number|— | 0 |
| overscanRowCount| 超出可视范围区域预加载多少行 | number | — | 0 |
| width | 行宽，必设 |number| — | —  |
| height | 列宽，必设 | number | —| — |
| rowHeightGetter| 每格行宽 |number,function | —| function  |
| columnWidthGetter| 每格列宽 | number,function |— | function |
| estimatedColumnSize| 预估行宽，columnWidthGetter为function时必设 |number,function |— | function  |
| estimatedRowSize | 预估列宽，rowHeightGetter为function时必设 | number,function | —| function |
| scrollLeft | 滚动条相对于左边的偏移 | number | — | 0 |
| scrollTop |  滚动条相对于顶部的偏移 | number |  —|0 |




## 对外方法
| 名称     | 说明                           |  回调参数     
| :------ |:-------------                  | :-----   
| setScrollLeft | 设置滚动条相对于左边的偏移 | scrollLeft|
| setScrollTop | 设置滚动条相对于顶部的偏移 | scrollTop |
| setOverflowX | 设置是否显示横向滚动条 | b |
| setOverflowY | 设置是否显示横向滚动条 | b|
| getScrollLeft | 获取滚动条相对于左边的偏移 | —|
| getScrollTop | 获取滚动条相对于顶部的偏移 | — |
| getMaxScrollLeft | 获取滚动条相对于左边的最大偏移 | — |
| getMaxScrollTop | 获取滚动条相对于顶部的最大偏移 |—|
| setEstimatedColumnSize | 设置列宽 |width|
| setEstimatedRowSize | 设置行宽 | height |
| restore | 还原列表设置 | — |
| populate | 刷新列表 | items |

## 事件
| 事件     | 说明                           |  回调参数
| :------ |:------------- |:----------|
|BI.GridView.EVENT_SCROLL|    滚动时触发的事件 | {scrollLeft: scrollLeft, scrollTop: scrollTop} |


---