增加树表大数据场景
This commit is contained in:
wanghaoo
commit
222a55981e
22
CHANGELOG.md
22
CHANGELOG.md
|
|
@ -1,10 +1,15 @@
|
|||
<a name="1.6.20"></a>
|
||||
## [1.6.20](https://github.com/tinper-bee/bee-table/compare/v1.6.19...v1.6.20) (2018-12-26)
|
||||
<a name="1.6.22"></a>
|
||||
## [1.6.22](https://github.com/tinper-bee/bee-table/compare/v1.6.21...v1.6.22) (2018-12-29)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **keydown:** keydown ([5de9829](https://github.com/tinper-bee/bee-table/commit/5de9829))
|
||||
|
||||
|
||||
|
||||
<a name="1.6.19"></a>
|
||||
## [1.6.19](https://github.com/tinper-bee/bee-table/compare/v1.6.18...v1.6.19) (2018-12-26)
|
||||
<a name="1.6.21"></a>
|
||||
## [1.6.21](https://github.com/tinper-bee/bee-table/compare/v1.6.18...v1.6.21) (2018-12-28)
|
||||
|
||||
|
||||
|
||||
|
|
@ -184,7 +189,7 @@
|
|||
|
||||
|
||||
<a name="1.5.1"></a>
|
||||
## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-19)
|
||||
## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-18)
|
||||
|
||||
|
||||
|
||||
|
|
@ -469,7 +474,12 @@
|
|||
|
||||
|
||||
<a name="1.2.9"></a>
|
||||
## [1.2.9](https://github.com/tinper-bee/bee-table/compare/v1.2.7...v1.2.9) (2018-07-16)
|
||||
## [1.2.9](https://github.com/tinper-bee/bee-table/compare/v1.2.8...v1.2.9) (2018-07-16)
|
||||
|
||||
|
||||
|
||||
<a name="1.2.8"></a>
|
||||
## [1.2.8](https://github.com/tinper-bee/bee-table/compare/v1.2.7...v1.2.8) (2018-07-06)
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
16
README.md
16
README.md
|
|
@ -109,7 +109,14 @@ class Demo extends Component {
|
|||
| onFilterClear | 清除过滤条件的回调函数，回调参数为清空的字段 | function | (field) => ()
|
||||
| headerScroll | 表头下是否显示滚动条 | bool| false
|
||||
| syncHover | 是否同步Hover状态到左侧Checkbox，关闭此功能有助于提升性能 | bool| true
|
||||
| onKeyTab | tab快捷键，可以处理默认选中第一条数据 | function| -
|
||||
| onKeyUp | up快捷键，可以处理table的上一条数据 | function| -
|
||||
| onKeyDown | up快捷键，可以处理table的下一条数据 | function| -
|
||||
| onTableKeyDown | 触发table的快捷键 | function| -
|
||||
| tabIndex | 设置焦点顺序 | number | 0
|
||||
| loadBuffer | 使用BigData高阶组件实现大数据加载时，上下加载的缓存 | number| 5
|
||||
|
||||
> 快捷键部分参考示例 (快捷键在table中的简单使用应用)
|
||||
|
||||
*注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
|
||||
|
||||
|
|
@ -139,6 +146,15 @@ class Demo extends Component {
|
|||
| filterDropdownIncludeKeys | 能够设置指定的下拉条件项，通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有
|
||||
| filterInputNumberOptions | 数值框接收的props，具体属性参考bee-input-number | object | null
|
||||
|
||||
## 快捷键API
|
||||
|
||||
| 快捷键 | 快捷键说明 | 类型 | 默认值 |
|
||||
| --- | :--- | --- |--- |
|
||||
| onKeyTab | tab快捷键，可以处理默认选中第一条数据 | function| -
|
||||
| onKeyUp | ↑(上箭) 快捷键，可以处理table的上一条数据 | function| -
|
||||
| onKeyDown | ↓(下箭)快捷键，可以处理table的下一条数据 | function| -
|
||||
| onTableKeyDown | 触发table的所有快捷键 | function| -
|
||||
| tabIndex | 设置焦点顺序 | number | 0
|
||||
|
||||
|
||||
## 如何引用
|
||||
|
|
|
|||
|
|
@ -259,7 +259,8 @@
|
|||
line-height: 16px;
|
||||
border: 1px solid #e9e9e9;
|
||||
user-select: none;
|
||||
background: #fff; }
|
||||
background: #fff;
|
||||
margin-right: 10px; }
|
||||
.u-table-row-spaced, .u-table-expanded-row-spaced {
|
||||
visibility: hidden; }
|
||||
.u-table-row-spaced:after, .u-table-expanded-row-spaced:after {
|
||||
|
|
|
|||
|
|
@ -97,8 +97,8 @@ var propTypes = {
|
|||
filterDelay: _propTypes2["default"].number,
|
||||
onFilterChange: _propTypes2["default"].func,
|
||||
onFilterClear: _propTypes2["default"].func,
|
||||
syncHover: _propTypes2["default"].bool
|
||||
|
||||
syncHover: _propTypes2["default"].bool,
|
||||
tabIndex: _propTypes2["default"].string
|
||||
};
|
||||
|
||||
var defaultProps = {
|
||||
|
|
@ -139,7 +139,8 @@ var defaultProps = {
|
|||
columns: [],
|
||||
minColumnWidth: 80,
|
||||
locale: {},
|
||||
syncHover: true
|
||||
syncHover: true,
|
||||
tabIndex: '0'
|
||||
};
|
||||
|
||||
var Table = function (_Component) {
|
||||
|
|
@ -181,7 +182,7 @@ var Table = function (_Component) {
|
|||
//down
|
||||
_this.props.onKeyDown && _this.props.onKeyDown();
|
||||
}
|
||||
_this.props.onTabkeKeyDown && _this.props.onTabkeKeyDown();
|
||||
_this.props.onTableKeyDown && _this.props.onTableKeyDown();
|
||||
// else if(event.altKey && event.keyCode === 38){
|
||||
// this.props.onKeyMove&&this.props.onKeyMove('up');
|
||||
// }else if(event.altKey && event.keyCode === 40){
|
||||
|
|
@ -245,10 +246,6 @@ var Table = function (_Component) {
|
|||
_utils.EventUtil.addHandler(document, 'keydown', this.onKeyDown);
|
||||
};
|
||||
|
||||
Table.prototype.componentWillUnmount = function componentWillUnmount() {
|
||||
_utils.EventUtil.removeHandler(document, 'keydown', this.onKeyDown);
|
||||
};
|
||||
|
||||
Table.prototype.componentDidMount = function componentDidMount() {
|
||||
setTimeout(this.resetScrollY, 300);
|
||||
//含有纵向滚动条
|
||||
|
|
@ -314,6 +311,7 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
Table.prototype.componentWillUnmount = function componentWillUnmount() {
|
||||
_utils.EventUtil.removeHandler(document, 'keydown', this.onKeyDown);
|
||||
if (this.resizeEvent) {
|
||||
this.resizeEvent.remove();
|
||||
}
|
||||
|
|
@ -1197,7 +1195,7 @@ var Table = function (_Component) {
|
|||
'div',
|
||||
{ className: className, style: props.style, ref: function ref(el) {
|
||||
return _this6.contentTable = el;
|
||||
}, tabIndex: '0' },
|
||||
}, tabIndex: props.tabIndex ? props.tabIndex : '0' },
|
||||
this.getTitle(),
|
||||
_react2["default"].createElement(
|
||||
'div',
|
||||
|
|
|
|||
|
|
@ -8,17 +8,32 @@ import React, { Component } from "react";
|
|||
import Button from "bee-button";
|
||||
import Tooltip from "bee-tooltip";
|
||||
import Table from "../../src";
|
||||
import Checkbox from 'bee-checkbox';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "",
|
||||
dataIndex: "d",
|
||||
fixed: "left",
|
||||
key: "d",
|
||||
width:80,
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<div style={{ position: 'relative' }} title={text} >
|
||||
<Checkbox />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ title: "用户名", dataIndex: "a", key: "a", width:80 , className:"rowClassName"},
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "令狐冲", b: "男", c: 41, key: "1" },
|
||||
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
|
||||
{ a: "郭靖", b: "男", c: 25, key: "3" }
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'操作', key: "1" },
|
||||
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67,d:'操作', key: "2" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'操作', key: "3" }
|
||||
];
|
||||
|
||||
class Demo33 extends Component {
|
||||
|
|
@ -63,7 +78,7 @@ class Demo33 extends Component {
|
|||
})
|
||||
}
|
||||
|
||||
onTabkeKeyDown = ()=>{
|
||||
onTableKeyDown = ()=>{
|
||||
let {selectedRowIndex} = this.state;
|
||||
console.log(" ----onTabkeKeyDown--- ",selectedRowIndex);
|
||||
}
|
||||
|
|
@ -89,7 +104,8 @@ class Demo33 extends Component {
|
|||
onKeyTab={this.onKeyTab}
|
||||
onKeyUp={this.onKeyUp}
|
||||
onKeyDown={this.onKeyDown}
|
||||
onTabkeKeyDown={this.onTabkeKeyDown}
|
||||
onTableKeyDown={this.onTableKeyDown}
|
||||
scroll={{ x: "110%", y: 140 }}
|
||||
/> </div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -8523,7 +8523,8 @@ ul {
|
|||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background: #fff; }
|
||||
background: #fff;
|
||||
margin-right: 10px; }
|
||||
.u-table-row-spaced, .u-table-expanded-row-spaced {
|
||||
visibility: hidden; }
|
||||
.u-table-row-spaced:after, .u-table-expanded-row-spaced:after {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
15
docs/api.md
15
docs/api.md
|
|
@ -55,10 +55,6 @@ import 'bee-table/build/Table.css';
|
|||
| headerScroll | 表头下是否显示滚动条 | bool| false
|
||||
| sort | 排序的属性 | object| { mode:'single'//单列排序, backSource:false //默认是前端排序，值为true为后端排序 } mode:multiple-多列排序
|
||||
| syncHover | 是否同步Hover状态到左侧Checkbox，关闭此功能有助于提升性能 | bool| true
|
||||
| onKeyTab | tab快捷键，可以处理默认选中第一条数据 | function| -
|
||||
| onKeyUp | up快捷键，可以处理table的上一条数据 | function| -
|
||||
| onKeyDown | up快捷键，可以处理table的下一条数据 | function| -
|
||||
| onTabkeKeyDown | 触发table的快捷键 | function| -
|
||||
| loadBuffer | 使用BigData高阶组件实现大数据加载时，上下加载的缓存 | number| 5
|
||||
|
||||
> 快捷键部分参考示例 (快捷键在table中的简单使用应用)
|
||||
|
|
@ -93,6 +89,17 @@ import 'bee-table/build/Table.css';
|
|||
| filterDropdownIncludeKeys | 能够设置指定的下拉条件项，通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有
|
||||
| filterInputNumberOptions | 数值框接收的props，具体属性参考bee-input-number | object | null
|
||||
|
||||
|
||||
## 快捷键API
|
||||
|
||||
| 快捷键 | 快捷键说明 | 类型 | 默认值 |
|
||||
| --- | :--- | --- |--- |
|
||||
| onKeyTab | tab快捷键，可以处理默认选中第一条数据 | function| -
|
||||
| onKeyUp | ↑(上箭) 快捷键，可以处理table的上一条数据 | function| -
|
||||
| onKeyDown | ↓(下箭)快捷键，可以处理table的下一条数据 | function| -
|
||||
| onTableKeyDown | 触发table的所有快捷键 | function| -
|
||||
| tabIndex | 设置焦点顺序 | number | 0
|
||||
|
||||
{% include "mixin.md"%}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "1.6.20",
|
||||
"version": "1.6.24",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
|
|
|||
26
src/Table.js
26
src/Table.js
|
|
@ -49,7 +49,7 @@ const propTypes = {
|
|||
onFilterChange: PropTypes.func,
|
||||
onFilterClear: PropTypes.func,
|
||||
syncHover: PropTypes.bool,
|
||||
|
||||
tabIndex:PropTypes.string,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
|
|
@ -81,7 +81,8 @@ const defaultProps = {
|
|||
locale:{},
|
||||
syncHover: true,
|
||||
setRowHeight:()=>{},
|
||||
setRowParentIndex:()=>{}
|
||||
setRowParentIndex:()=>{},
|
||||
tabIndex:'0'
|
||||
};
|
||||
|
||||
class Table extends Component {
|
||||
|
|
@ -142,10 +143,6 @@ class Table extends Component {
|
|||
EventUtil.addHandler(document,'keydown',this.onKeyDown);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
EventUtil.removeHandler(document,'keydown',this.onKeyDown);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
setTimeout(this.resetScrollY, 300);
|
||||
//含有纵向滚动条
|
||||
|
|
@ -197,6 +194,8 @@ class Table extends Component {
|
|||
this.firstDid = true;//避免重复update
|
||||
}
|
||||
|
||||
console.log('this.scrollTop**********',this.scrollTop);
|
||||
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
|
|
@ -219,6 +218,7 @@ class Table extends Component {
|
|||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
EventUtil.removeHandler(document,'keydown',this.onKeyDown);
|
||||
if (this.resizeEvent) {
|
||||
this.resizeEvent.remove();
|
||||
}
|
||||
|
|
@ -578,8 +578,10 @@ class Table extends Component {
|
|||
if(paramRootIndex<0){
|
||||
paramRootIndex = i+lazyParentIndex;
|
||||
}
|
||||
|
||||
// console.log('rootIndex',rootIndex,'index',fixedIndex,'fixedIndex',fixedIndex,'paramRootIndex',paramRootIndex,'key',record.key);
|
||||
let index = i;
|
||||
if(rootIndex ==-1){
|
||||
index = i+lazyParentIndex
|
||||
}
|
||||
rst.push(
|
||||
<TableRow
|
||||
indent={indent}
|
||||
|
|
@ -589,7 +591,7 @@ class Table extends Component {
|
|||
record={record}
|
||||
expandIconAsCell={expandIconAsCell}
|
||||
onDestroy={this.onRowDestroy}
|
||||
index={i+lazyParentIndex}
|
||||
index={index}
|
||||
visible={visible}
|
||||
expandRowByClick={expandRowByClick}
|
||||
onExpand={this.onExpanded}
|
||||
|
|
@ -609,7 +611,6 @@ class Table extends Component {
|
|||
ref={rowRef}
|
||||
store={this.store}
|
||||
fixed={fixed}
|
||||
lazyCurrentIndex={lazyCurrentIndex}
|
||||
expandedContentHeight={expandedContentHeight}
|
||||
setRowHeight={props.setRowHeight}
|
||||
setRowParentIndex={props.setRowParentIndex}
|
||||
|
|
@ -1030,7 +1031,6 @@ class Table extends Component {
|
|||
|
||||
// Remember last scrollLeft for scroll direction detecting.
|
||||
this.lastScrollLeft = e.target.scrollLeft;
|
||||
|
||||
}
|
||||
|
||||
handleRowHover(isHover, key) {
|
||||
|
|
@ -1053,7 +1053,7 @@ class Table extends Component {
|
|||
}else if(event.keyCode === 40){//down
|
||||
this.props.onKeyDown&&this.props.onKeyDown();
|
||||
}
|
||||
this.props.onTabkeKeyDown&&this.props.onTabkeKeyDown();
|
||||
this.props.onTableKeyDown&&this.props.onTableKeyDown();
|
||||
// else if(event.altKey && event.keyCode === 38){
|
||||
// this.props.onKeyMove&&this.props.onKeyMove('up');
|
||||
// }else if(event.altKey && event.keyCode === 40){
|
||||
|
|
@ -1091,7 +1091,7 @@ class Table extends Component {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className={className} style={props.style} ref={el => this.contentTable = el} tabIndex="0" >
|
||||
<div className={className} style={props.style} ref={el => this.contentTable = el} tabIndex={props.tabIndex?props.tabIndex:'0'} >
|
||||
{this.getTitle()}
|
||||
<div className={`${clsPrefix}-content`}>
|
||||
|
||||
|
|
|
|||
|
|
@ -185,6 +185,7 @@ $checkbox-height:16px;
|
|||
border: 1px solid $table-border-color;
|
||||
user-select: none;
|
||||
background: #fff;
|
||||
margin-right: 10px;
|
||||
}
|
||||
&-spaced {
|
||||
visibility: hidden;
|
||||
|
|
@ -725,7 +726,5 @@ $checkbox-height:16px;
|
|||
height: $checkbox-height;
|
||||
line-height: $checkbox-height;
|
||||
}
|
||||
.u-checkbox .u-checkbox-label:after,.u-checkbox .u-checkbox-label::before {
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -539,7 +539,7 @@ class TableHeader extends Component {
|
|||
return (
|
||||
<thead className={`${clsPrefix}-thead`} {...attr} data-theader-fixed='scroll' ref={_thead=>this._thead = _thead} >
|
||||
{rows.map((row, index) => (
|
||||
<tr key={index} style={rowStyle} className={(filterable && index == rows.length - 1)?'filterable':''}>
|
||||
<tr style={rowStyle} className={(filterable && index == rows.length - 1)?'filterable':''}>
|
||||
{row.map((da, columIndex, arr) => {
|
||||
let thHover = da.drgHover
|
||||
? ` ${clsPrefix}-thead th-drag-hover`
|
||||
|
|
|
|||
|
|
@ -79,9 +79,10 @@ class TableRow extends Component{
|
|||
componentDidUpdate(prevProps) {
|
||||
if(this.props.treeType){
|
||||
this.setRowParentIndex();
|
||||
if(this.props.fixedIndex!== prevProps.fixedIndex){
|
||||
this.setRowHeight()
|
||||
}
|
||||
// if(this.props.fixedIndex!== prevProps.fixedIndex){
|
||||
// this.setRowHeight()
|
||||
// }
|
||||
}else if(this.props.index !== prevProps.index){
|
||||
this.setRowHeight()
|
||||
}
|
||||
|
|
@ -97,7 +98,7 @@ class TableRow extends Component{
|
|||
|
||||
|
||||
setRowHeight() {
|
||||
const { setRowHeight , expandedContentHeight=0,lazyCurrentIndex=0,fixed,fixedIndex} = this.props
|
||||
const { setRowHeight , expandedContentHeight=0,fixed,fixedIndex} = this.props
|
||||
if (!setRowHeight || !this.element || fixed) return
|
||||
setRowHeight(this.element.clientHeight + expandedContentHeight, fixedIndex)
|
||||
}
|
||||
|
|
@ -161,7 +162,7 @@ class TableRow extends Component{
|
|||
const {
|
||||
clsPrefix, columns, record, height, visible, index,
|
||||
expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,
|
||||
expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,lazyCurrentIndex=0
|
||||
expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,
|
||||
} = this.props;
|
||||
let showSum = false;
|
||||
let { className } = this.props;
|
||||
|
|
|
|||
|
|
@ -69,7 +69,6 @@ export default function bigData(Table) {
|
|||
});
|
||||
}
|
||||
|
||||
// console.log("***data********++++++++++++",this.cachedRowParentIndex);
|
||||
}
|
||||
|
||||
getRowKey(record, index) {
|
||||
|
|
@ -126,10 +125,22 @@ export default function bigData(Table) {
|
|||
|
||||
getSumHeight(start, end) {
|
||||
const { height } = this.props;
|
||||
const rowHeight = height ? height : defaultHeight;
|
||||
let sumHeight = 0;
|
||||
let rowHeight = height ? height : defaultHeight;
|
||||
let sumHeight = 0,currentKey,currentRowHeight=rowHeight;
|
||||
|
||||
for (let i = start; i < end; i++) {
|
||||
sumHeight += this.cachedRowHeight[i] || rowHeight;
|
||||
if(this.cachedRowHeight[i] == undefined){
|
||||
if(this.treeType){
|
||||
currentKey = this.keys[i];
|
||||
currentRowHeight = 0;
|
||||
if(this.firstLevelKey.indexOf(currentKey)>=0 || this.expandChildRowKeys.indexOf(currentKey)>=0){
|
||||
currentRowHeight = rowHeight;
|
||||
}
|
||||
}
|
||||
sumHeight += currentRowHeight;
|
||||
}else{
|
||||
sumHeight += this.cachedRowHeight[i]
|
||||
}
|
||||
}
|
||||
return sumHeight;
|
||||
}
|
||||
|
|
@ -185,7 +196,6 @@ export default function bigData(Table) {
|
|||
let temp = nextScrollTop;
|
||||
let currentKey;
|
||||
while (temp >0) {
|
||||
// console.log('获取index-----',this.cachedRowHeight[index]);
|
||||
let currentRowHeight = this.cachedRowHeight[index];
|
||||
if(currentRowHeight === undefined){
|
||||
if(this.treeType){
|
||||
|
|
@ -204,10 +214,9 @@ export default function bigData(Table) {
|
|||
index += 1;
|
||||
}
|
||||
}
|
||||
// console.log('while循环获取index次数-----',index);
|
||||
console.log('currentIndex****',index);
|
||||
const isOrder = index - currentIndex > 0 ? true : false;
|
||||
if (index < 0) index = 0;
|
||||
console.log("currentIndex****" + index);
|
||||
//如果之前的索引和下一次的不一样则重置索引和滚动的位置
|
||||
if (currentIndex !== index) {
|
||||
_this.currentIndex = index;
|
||||
|
|
@ -220,7 +229,6 @@ export default function bigData(Table) {
|
|||
//有时滚动过快时this.cachedRowHeight[rowsInView + index]为undifined
|
||||
|
||||
while (rowsHeight < viewHeight && tempIndex<this.cachedRowHeight.length) {
|
||||
// console.log("rowsHeight < viewHeight",tempIndex,rowsHeight,viewHeight,this.cachedRowHeight);
|
||||
if(this.cachedRowHeight[tempIndex]){
|
||||
rowsHeight += this.cachedRowHeight[tempIndex];
|
||||
if(treeType && _this.cachedRowParentIndex[tempIndex] !== tempIndex ||!treeType){
|
||||
|
|
@ -231,7 +239,6 @@ export default function bigData(Table) {
|
|||
tempIndex++;
|
||||
|
||||
}
|
||||
// console.log("rowsHeight < viewHeight循环次数",tempIndex-index);
|
||||
if(treeType){
|
||||
const treeIndex = index
|
||||
index = _this.cachedRowParentIndex[treeIndex];
|
||||
|
|
@ -349,21 +356,30 @@ export default function bigData(Table) {
|
|||
}
|
||||
}
|
||||
render() {
|
||||
|
||||
const { data } = this.props;
|
||||
const { scrollTop } = this;
|
||||
const { endIndex, startIndex } = this;
|
||||
const lazyLoad = {
|
||||
preHeight: this.getSumHeight(0, startIndex),
|
||||
sufHeight: this.getSumHeight(endIndex, data.length),
|
||||
startIndex: startIndex,
|
||||
startParentIndex:startIndex,//为树状节点做准备
|
||||
};
|
||||
if(this.treeType){
|
||||
const preSubCounts = this.cachedRowParentIndex.findIndex(item=>{ return item==startIndex })
|
||||
const sufSubCounts = this.cachedRowParentIndex.findIndex(item=>{ return item==endIndex })
|
||||
lazyLoad.preHeight = this.getSumHeight(0,preSubCounts>-1?preSubCounts:0);
|
||||
lazyLoad.sufHeight = this.getSumHeight(sufSubCounts+1>0?sufSubCounts+1:this.cachedRowParentIndex.length,this.cachedRowParentIndex.length);
|
||||
|
||||
if(preSubCounts>0){
|
||||
lazyLoad.startIndex = preSubCounts;
|
||||
}
|
||||
|
||||
}else{
|
||||
lazyLoad.preHeight = this.getSumHeight(0, startIndex)
|
||||
lazyLoad.sufHeight = this.getSumHeight(endIndex, data.length)
|
||||
|
||||
}
|
||||
console.log('*******ScrollTop*****'+scrollTop);
|
||||
return (
|
||||
<Table
|
||||
{...this.props}
|
||||
|
|
|
|||
Loading…
Reference in New Issue