滚动加载场景中

This commit is contained in:
wanghaoo 2019-02-19 09:30:18 +08:00
parent df4f0ceaf1
commit ae5663630f
8 changed files with 90 additions and 27 deletions

View File

@ -1207,6 +1207,9 @@ var Table = function (_Component) {
if (bodyTable && e.target !== bodyTable) { if (bodyTable && e.target !== bodyTable) {
bodyTable.scrollTop = e.target.scrollTop; bodyTable.scrollTop = e.target.scrollTop;
} }
if (this.hoverDom) {
this.hoverDom.style.display = 'none';
}
this.lastScrollTop = e.target.scrollTop; this.lastScrollTop = e.target.scrollTop;
if (handleScrollY) { if (handleScrollY) {
(0, _utils.debounce)(handleScrollY(this.lastScrollTop, this.treeType), 300); (0, _utils.debounce)(handleScrollY(this.lastScrollTop, this.treeType), 300);
@ -1236,7 +1239,12 @@ var Table = function (_Component) {
this.currentHoverKey = key; this.currentHoverKey = key;
var td = (0, _utils.closest)(event.target, 'td'); var td = (0, _utils.closest)(event.target, 'td');
if (td) { if (td) {
this.hoverDom.style.top = td.offsetTop + 'px'; var scrollTop = this.lastScrollTop ? this.lastScrollTop : 0;
var top = td.offsetTop - scrollTop;
if (this.refs.headTable) {
top = top + this.refs.headTable.clientHeight;
}
this.hoverDom.style.top = top + 'px';
this.hoverDom.style.height = td.offsetHeight + 'px'; this.hoverDom.style.height = td.offsetHeight + 'px';
this.hoverDom.style.lineHeight = td.offsetHeight + 'px'; this.hoverDom.style.lineHeight = td.offsetHeight + 'px';
this.hoverDom.style.display = 'block'; this.hoverDom.style.display = 'block';

View File

@ -87,6 +87,9 @@ function bigData(Table) {
} }
if (nextProps.data !== props.data) { if (nextProps.data !== props.data) {
_this.computeCachedRowParentIndex(nextProps.data); _this.computeCachedRowParentIndex(nextProps.data);
if (nextProps.data.length > 0 && _this.endIndex < 1) {
_this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置
}
} }
//如果传currentIndex会判断该条数据是否在可视区域如果没有的话则重新计算startIndex和endIndex //如果传currentIndex会判断该条数据是否在可视区域如果没有的话则重新计算startIndex和endIndex
if (currentIndex !== -1 && currentIndex !== this.currentIndex) { if (currentIndex !== -1 && currentIndex !== this.currentIndex) {

View File

@ -62,7 +62,7 @@ const columns = [
} }
]; ];
const data = [ ...new Array(10000) ].map((e, i) => { const data = [ ...new Array(20) ].map((e, i) => {
const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i }; const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
if(i%3==0){ if(i%3==0){
rs.b = '女'; rs.b = '女';
@ -80,9 +80,18 @@ class Demo30 extends Component {
selectedRowIndex: 0 selectedRowIndex: 0
} }
} }
add=()=>{
let {data} = this.state;
const len =data.length;
data.push({a: len + 'a', b: len+ 'b', c: len + 'c', d: len + 'd', key: len });
this.setState({
data
});
}
render() { render() {
return ( return (
<div>
<button onClick={this.add}>new</button>
<BigDataTable <BigDataTable
columns={columns} columns={columns}
data={data} data={data}
@ -92,7 +101,7 @@ class Demo30 extends Component {
console.log('currentIndex--'+index); console.log('currentIndex--'+index);
}} }}
/> />
</div>
); );
} }

File diff suppressed because one or more lines are too long

60
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

@ -1046,12 +1046,16 @@ class Table extends Component {
if (bodyTable && e.target !== bodyTable) { if (bodyTable && e.target !== bodyTable) {
bodyTable.scrollTop = e.target.scrollTop; bodyTable.scrollTop = e.target.scrollTop;
} }
if(this.hoverDom){
this.hoverDom.style.display = 'none'
}
this.lastScrollTop = e.target.scrollTop; this.lastScrollTop = e.target.scrollTop;
if(handleScrollY){ if(handleScrollY){
debounce( debounce(
handleScrollY(this.lastScrollTop,this.treeType), handleScrollY(this.lastScrollTop,this.treeType),
300) 300)
} }
} }
// Remember last scrollLeft for scroll direction detecting. // Remember last scrollLeft for scroll direction detecting.
@ -1073,9 +1077,14 @@ class Table extends Component {
this.currentHoverKey = key; this.currentHoverKey = key;
const td = closest(event.target,'td'); const td = closest(event.target,'td');
if(td){ if(td){
this.hoverDom.style.top = td.offsetTop+'px'; const scrollTop = this.lastScrollTop ?this.lastScrollTop:0
this.hoverDom.style.height = td.offsetHeight +'px'; let top = td.offsetTop - scrollTop;
this.hoverDom.style.lineHeight = td.offsetHeight +'px'; if(this.refs.headTable){
top = top + this.refs.headTable.clientHeight;
}
this.hoverDom.style.top = top + 'px';
this.hoverDom.style.height = td.offsetHeight + 'px';
this.hoverDom.style.lineHeight = td.offsetHeight + 'px';
this.hoverDom.style.display = 'block'; this.hoverDom.style.display = 'block';
} }
} }

View File

@ -57,17 +57,21 @@ export default function bigData(Table) {
_this.currentIndex = 0; _this.currentIndex = 0;
_this.startIndex = _this.currentIndex; //数据开始位置 _this.startIndex = _this.currentIndex; //数据开始位置
_this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置 _this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置
if(_this.endIndex > dataLen){
_this.endIndex = dataLen;
}
} }
if (nextProps.data !== props.data) { if (nextProps.data !== props.data) {
_this.computeCachedRowParentIndex(nextProps.data); _this.computeCachedRowParentIndex(nextProps.data);
if(nextProps.data.length>0){
_this.endIndex = _this.startIndex + _this.loadCount; //数据结束位置
}
} }
//如果传currentIndex会判断该条数据是否在可视区域如果没有的话则重新计算startIndex和endIndex //如果传currentIndex会判断该条数据是否在可视区域如果没有的话则重新计算startIndex和endIndex
if(currentIndex!==-1 && currentIndex !== this.currentIndex){ if(currentIndex!==-1 && currentIndex !== this.currentIndex){
_this.setStartAndEndIndex(currentIndex,dataLen); _this.setStartAndEndIndex(currentIndex,dataLen);
} }
if(_this.endIndex > dataLen){
_this.endIndex = dataLen;
}
} }
componentDidMount() { componentDidMount() {