innov
/
bee-table
1
0
Fork 0
Code Issues Pull Requests 3 Projects Releases Wiki Activity

1

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build/TableRow.js
View File

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

57
build/lib/bigData.js
View File

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

3
demo/demolist/Demo30.scss Normal file
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 { .demo25 .u-table-filter-column-filter-icon {
right: 15px; } 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 */ /*# sourceMappingURL=demo.css.map */

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

15613
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

60
src/lib/bigData.js
View File

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