This commit is contained in:
wanghaoo 2018-12-26 10:23:51 +08:00
parent e0eeb67192
commit 062ec94019
8 changed files with 142 additions and 15608 deletions

View File

@ -281,7 +281,7 @@ var TableRow = function (_Component) {
style: style,
ref: this.bindElement
},
cells
cells.length > 0 ? cells : _react2["default"].createElement('td', null)
);
};

View File

@ -48,7 +48,8 @@ function bigData(Table) {
};
var rowHeight = _this2.props.height ? _this2.props.height : defaultHeight;
//默认显示25条rowsInView根据定高算的。在非固定高下这个只是一个大概的值。
_this2.rowsInView = _this2.props.scroll.y ? Math.ceil(_this2.props.scroll.y / rowHeight) : 20;
var scrollY = _this2.props.scroll.y ? parseInt(_this2.props.scroll.y) : 0;
_this2.rowsInView = scrollY ? Math.ceil(scrollY / rowHeight) : 20;
_this2.currentIndex = 0;
_this2.loadCount = props.loadBuffer ? _this2.rowsInView + props.loadBuffer * 2 : 26; //一次加载多少数据
_this2.cachedRowHeight = []; //缓存每行的高度
@ -140,32 +141,40 @@ function bigData(Table) {
startIndex = _this.startIndex;
var needRender = _this.state.needRender;
var index = currentIndex; //记录下次当前位置
var temp = currentIndex ? nextScrollTop - currentScrollTop : nextScrollTop;
var viewHeight = parseInt(scroll.y);
var isOrder = temp > 0 ? true : false; //true为向下滚动、false为向上滚动
// let index = currentIndex;//记录下次当前位置
// let temp = currentIndex ?nextScrollTop - currentScrollTop:nextScrollTop;
//根据scrollTop计算下次当前索引的位置
if (isOrder) {
while (temp > 0) {
temp -= _this3.cachedRowHeight[index] || rowHeight;
if (temp > 0) {
index += 1;
//保存当前index对应的scrollTop
_this3.currentScrollTop += _this3.cachedRowHeight[index] || rowHeight;
}
}
} else {
while (temp < 0) {
temp += _this3.cachedRowHeight[index] || rowHeight;
if (temp < 0) {
index -= 1;
_this3.currentScrollTop -= _this3.cachedRowHeight[index] || rowHeight;
}
// const isOrder = temp > 0 ?true:false;//true为向下滚动、false为向上滚动
// //根据scrollTop计算下次当前索引的位置
// if(isOrder){
// while (temp > 0) {
// temp -= this.cachedRowHeight[index] || rowHeight
// if(temp > 0){
// index += 1
// //保存当前index对应的scrollTop
// this.currentScrollTop += this.cachedRowHeight[index]|| rowHeight;
// }
// }
// }else{
// while(temp < 0){
// temp += this.cachedRowHeight[index] || rowHeight
// if(temp < 0){
// index -= 1
// this.currentScrollTop -= this.cachedRowHeight[index]|| rowHeight;
// }
// }
// }
var index = 0;
var temp = nextScrollTop;
while (temp > 0) {
temp -= _this3.cachedRowHeight[index] || rowHeight;
if (temp > 0) {
index += 1;
}
}
var isOrder = index - currentIndex > 0 ? true : false;
if (index < 0) index = 0;
console.log('currentIndex****' + index);
//如果之前的索引和下一次的不一样则重置索引和滚动的位置
@ -196,7 +205,7 @@ function bigData(Table) {
}
// 向上滚动当前的index是否已经加载currentIndex若干上临界值小于startIndex则重新渲染
if (!isOrder && index < startIndex + rowDiff) {
startIndex = index - _this3.loadCount / 2;
startIndex = index - parseInt(_this3.loadCount / 2); //有时会是小数问题所以parseInt转换下
if (startIndex < 0) {
startIndex = 0;
}

View File

@ -0,0 +1,3 @@
.big-data tr td {
// height: 48px;
}

11
dist/demo.css vendored
View File

@ -10322,16 +10322,5 @@ li.rc-time-picker-panel-select-option-disabled:hover {
.demo25 .u-table-filter-column-filter-icon {
right: 15px; }
th .drop-menu .uf {
font-size: 12px;
visibility: hidden;
margin-left: 15px; }
th:hover .uf {
visibility: visible; }
.demo3 .u-table-thead th {
padding-top: 0px;
padding-bottom: 0px; }
/*# sourceMappingURL=demo.css.map */

2
dist/demo.css.map vendored

File diff suppressed because one or more lines are too long

15613
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -23,7 +23,7 @@ export default function bigData(Table) {
const rowHeight = this.props.height?this.props.height:defaultHeight
//默认显示25条rowsInView根据定高算的。在非固定高下这个只是一个大概的值。
const scrollY = this.props.scroll.y ? parseInt(this.props.scroll.y) : 0;
this.rowsInView = scrollY ? Math.ceil(scrollY/rowHeight):20 ;
this.rowsInView = scrollY ?Math.ceil(scrollY/rowHeight):20 ;
this.currentIndex = 0;
this.loadCount = props.loadBuffer? this.rowsInView + props.loadBuffer*2:26;//一次加载多少数据
this.cachedRowHeight = [];//缓存每行的高度
@ -58,39 +58,45 @@ export default function bigData(Table) {
*/
handleScroll = (nextScrollTop)=> {
const _this = this;
const {data,height,scroll={}} = _this.props;
const rowHeight = height?height:defaultHeight;
const {currentIndex = 0 ,loadCount,scrollTop,currentScrollTop} = _this;
let {endIndex,startIndex} = _this;
const {needRender} = _this.state;
let index = currentIndex;//记录下次当前位置
let temp = currentIndex ?nextScrollTop - currentScrollTop:nextScrollTop;
const viewHeight = parseInt(scroll.y);
const isOrder = temp > 0 ?true:false;//true为向下滚动、false为向上滚动
// let index = currentIndex;//记录下次当前位置
// let temp = currentIndex ?nextScrollTop - currentScrollTop:nextScrollTop;
// const isOrder = temp > 0 ?true:false;//true为向下滚动、false为向上滚动
//根据scrollTop计算下次当前索引的位置
if(isOrder){
while (temp > 0) {
temp -= this.cachedRowHeight[index] || rowHeight
if(temp > 0){
index += 1
//保存当前index对应的scrollTop
this.currentScrollTop += this.cachedRowHeight[index]|| rowHeight;
}
}
}else{
while(temp < 0){
temp += this.cachedRowHeight[index] || rowHeight
if(temp < 0){
index -= 1
this.currentScrollTop -= this.cachedRowHeight[index]|| rowHeight;
}
}
// //根据scrollTop计算下次当前索引的位置
// if(isOrder){
// while (temp > 0) {
// temp -= this.cachedRowHeight[index] || rowHeight
// if(temp > 0){
// index += 1
// //保存当前index对应的scrollTop
// this.currentScrollTop += this.cachedRowHeight[index]|| rowHeight;
// }
// }
// }else{
// while(temp < 0){
// temp += this.cachedRowHeight[index] || rowHeight
// if(temp < 0){
// index -= 1
// this.currentScrollTop -= this.cachedRowHeight[index]|| rowHeight;
// }
// }
// }
let index = 0;
let temp = nextScrollTop;
while (temp > 0) {
temp -= this.cachedRowHeight[index] || rowHeight
if(temp > 0){
index += 1
}
}
const isOrder = index - currentIndex > 0 ?true:false;
if (index < 0) index = 0
console.log('currentIndex****'+index);
//如果之前的索引和下一次的不一样则重置索引和滚动的位置
@ -121,7 +127,7 @@ handleScroll = (nextScrollTop)=> {
}
// 向上滚动当前的index是否已经加载currentIndex若干上临界值小于startIndex则重新渲染
if(!isOrder && index < startIndex + rowDiff){
startIndex = index - this.loadCount/2;
startIndex = index - parseInt(this.loadCount/2);//有时会是小数问题所以parseInt转换下
if(startIndex<0){
startIndex = 0;
}