增加currentIndex属性,支持用户自定义滚动位置
This commit is contained in:
parent
208ff4b001
commit
7bb4033427
|
@ -284,7 +284,7 @@ var Table = function (_Component) {
|
||||||
}
|
}
|
||||||
//适配lazyload
|
//适配lazyload
|
||||||
if (nextProps.scrollTop) {
|
if (nextProps.scrollTop) {
|
||||||
this.refs.bodyTable.scrollTop = nextProps.scrollTop;
|
// this.refs.bodyTable.scrollTop = nextProps.scrollTop;
|
||||||
this.scrollTop = nextProps.scrollTop;
|
this.scrollTop = nextProps.scrollTop;
|
||||||
}
|
}
|
||||||
if (!nextProps.originWidth) {
|
if (!nextProps.originWidth) {
|
||||||
|
@ -308,6 +308,7 @@ var Table = function (_Component) {
|
||||||
if (this.scrollTop) {
|
if (this.scrollTop) {
|
||||||
this.refs.fixedColumnsBodyLeft && (this.refs.fixedColumnsBodyLeft.scrollTop = this.scrollTop);
|
this.refs.fixedColumnsBodyLeft && (this.refs.fixedColumnsBodyLeft.scrollTop = this.scrollTop);
|
||||||
this.refs.fixedColumnsBodyRight && (this.refs.fixedColumnsBodyRight.scrollTop = this.scrollTop);
|
this.refs.fixedColumnsBodyRight && (this.refs.fixedColumnsBodyRight.scrollTop = this.scrollTop);
|
||||||
|
this.refs.bodyTable.scrollTop = this.scrollTop;
|
||||||
this.scrollTop = 0;
|
this.scrollTop = 0;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -68,17 +68,29 @@ function bigData(Table) {
|
||||||
|
|
||||||
BigData.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
BigData.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||||
var props = this.props;
|
var props = this.props;
|
||||||
|
var currentIndex = nextProps.currentIndex,
|
||||||
|
data = nextProps.data;
|
||||||
|
|
||||||
|
var _this = this,
|
||||||
|
dataLen = data.length;
|
||||||
if (nextProps.scroll.y !== props.scroll.y) {
|
if (nextProps.scroll.y !== props.scroll.y) {
|
||||||
var rowHeight = nextProps.height ? nextProps.height : defaultHeight;
|
var rowHeight = nextProps.height ? nextProps.height : defaultHeight;
|
||||||
var scrollY = nextProps.scroll.y ? parseInt(nextProps.scroll.y) : 0;
|
var scrollY = nextProps.scroll.y ? parseInt(nextProps.scroll.y) : 0;
|
||||||
this.rowsInView = scrollY ? Math.ceil(scrollY / rowHeight) : 20;
|
_this.rowsInView = scrollY ? Math.ceil(scrollY / rowHeight) : 20;
|
||||||
this.loadCount = props.loadBuffer ? this.rowsInView + props.loadBuffer * 2 : 26; //一次加载多少数据
|
_this.loadCount = props.loadBuffer ? _this.rowsInView + props.loadBuffer * 2 : 26; //一次加载多少数据
|
||||||
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);
|
||||||
|
}
|
||||||
|
//如果传currentIndex,会判断该条数据是否在可视区域,如果没有的话,则重新计算startIndex和endIndex
|
||||||
|
if (currentIndex !== -1 && currentIndex !== this.currentIndex) {
|
||||||
|
_this.setStartAndEndIndex(currentIndex, dataLen);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -94,6 +106,33 @@ function bigData(Table) {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
BigData.prototype.setStartAndEndIndex = function setStartAndEndIndex(currentIndex, dataLen) {
|
||||||
|
var _this = this;
|
||||||
|
if (currentIndex > _this.endIndex) {
|
||||||
|
_this.currentIndex = currentIndex;
|
||||||
|
_this.endIndex = _this.currentIndex; //数据开始位置
|
||||||
|
_this.startIndex = _this.currentIndex - _this.loadCount; //数据结束位置
|
||||||
|
if (_this.endIndex > dataLen) {
|
||||||
|
_this.endIndex = dataLen;
|
||||||
|
}
|
||||||
|
if (_this.startIndex < 0) {
|
||||||
|
_this.startIndex = 0;
|
||||||
|
}
|
||||||
|
} else if (currentIndex < _this.startIndex) {
|
||||||
|
_this.currentIndex = currentIndex;
|
||||||
|
_this.startIndex = currentIndex;
|
||||||
|
_this.endIndex = currentIndex + _this.loadCount;
|
||||||
|
if (_this.endIndex > dataLen) {
|
||||||
|
_this.endIndex = dataLen;
|
||||||
|
}
|
||||||
|
if (_this.startIndex < 0) {
|
||||||
|
_this.startIndex = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//重新设定scrollTop值
|
||||||
|
_this.scrollTop = _this.getSumHeight(0, _this.endIndex - _this.rowsInView + 2);
|
||||||
|
};
|
||||||
|
|
||||||
BigData.prototype.getRowKey = function getRowKey(record, index) {
|
BigData.prototype.getRowKey = function getRowKey(record, index) {
|
||||||
var rowKey = this.props.rowKey;
|
var rowKey = this.props.rowKey;
|
||||||
var key = typeof rowKey === "function" ? rowKey(record, index) : record[rowKey];
|
var key = typeof rowKey === "function" ? rowKey(record, index) : record[rowKey];
|
||||||
|
@ -270,7 +309,8 @@ function bigData(Table) {
|
||||||
rowKey: "key",
|
rowKey: "key",
|
||||||
onExpand: function onExpand() {},
|
onExpand: function onExpand() {},
|
||||||
|
|
||||||
scroll: {}
|
scroll: {},
|
||||||
|
currentIndex: -1
|
||||||
}, _class.propTypes = {
|
}, _class.propTypes = {
|
||||||
loadBuffer: _propTypes2["default"].number
|
loadBuffer: _propTypes2["default"].number
|
||||||
}, _initialiseProps = function _initialiseProps() {
|
}, _initialiseProps = function _initialiseProps() {
|
||||||
|
|
|
@ -10,7 +10,28 @@ import Tooltip from "bee-tooltip";
|
||||||
import Table from "../../src";
|
import Table from "../../src";
|
||||||
import BigData from "../../src/lib/bigData";
|
import BigData from "../../src/lib/bigData";
|
||||||
const BigDataTable = BigData(Table);
|
const BigDataTable = BigData(Table);
|
||||||
const columns = [
|
|
||||||
|
|
||||||
|
const data = [ ...new Array(10000) ].map((e, i) => {
|
||||||
|
const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
|
||||||
|
if(i%3==0){
|
||||||
|
rs.b = '女';
|
||||||
|
}
|
||||||
|
return rs;
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
class Demo30 extends Component {
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
const _this = this;
|
||||||
|
this.state = {
|
||||||
|
data: data,
|
||||||
|
selectedRowIndex: 0,
|
||||||
|
currentIndex:-1
|
||||||
|
}
|
||||||
|
this.columns = [
|
||||||
{
|
{
|
||||||
title:'序号',
|
title:'序号',
|
||||||
dataIndex:'index',
|
dataIndex:'index',
|
||||||
|
@ -45,55 +66,59 @@ const columns = [
|
||||||
key: "d",
|
key: "d",
|
||||||
fixed:'right',
|
fixed:'right',
|
||||||
render(text, record, index) {
|
render(text, record, index) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ position: 'relative' }} title={text} >
|
<div style={{ position: 'relative' }} title={text} >
|
||||||
<a
|
<a
|
||||||
href="javascript:;"
|
href="javascript:;"
|
||||||
tooltip={text}
|
tooltip={text}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
alert('这是第' + index + '列,内容为:' + text);
|
alert(record.key+'这是第' + index + '列,内容为:' + text);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
一些操作
|
{record.key+'这是第' + index}
|
||||||
</a>
|
</a>
|
||||||
|
<button onClick={_this.del(record,index) }>删除</button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
const data = [ ...new Array(10000) ].map((e, i) => {
|
|
||||||
const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
|
|
||||||
if(i%3==0){
|
|
||||||
rs.b = '女';
|
|
||||||
}
|
|
||||||
return rs;
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
class Demo30 extends Component {
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
data: data,
|
|
||||||
selectedRowIndex: 0
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
add=()=>{
|
||||||
|
let {currentIndex} = this.state;
|
||||||
|
let data = this.state.data;
|
||||||
|
const key = data.length;
|
||||||
|
|
||||||
|
data.push({a: key + 'a', b: key + 'b', c: key + 'c', d: key + 'd', key: key});
|
||||||
|
currentIndex = data.length
|
||||||
|
this.setState({data,currentIndex});
|
||||||
|
}
|
||||||
|
del=(record,index)=>(record,index)=>{
|
||||||
|
|
||||||
|
let data = this.state.data;
|
||||||
|
data.splice(index,1);
|
||||||
|
|
||||||
|
this.setState(data);
|
||||||
|
}
|
||||||
render() {
|
render() {
|
||||||
|
const {currentIndex} = this.state;
|
||||||
return (
|
return (
|
||||||
|
<div>
|
||||||
|
<button onClick = {this.add}>增加</button>
|
||||||
<BigDataTable
|
<BigDataTable
|
||||||
columns={columns}
|
columns={this.columns}
|
||||||
data={data}
|
data={data}
|
||||||
parentNodeId='parent'
|
parentNodeId='parent'
|
||||||
scroll={{y:300}}
|
scroll={{y:300}}
|
||||||
|
currentIndex = {currentIndex}
|
||||||
height={40}
|
height={40}
|
||||||
onRowClick={(record, index, indent) => {
|
onRowClick={(record, index, indent) => {
|
||||||
console.log('currentIndex--'+index);
|
console.log('currentIndex--'+index);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
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
|
@ -184,7 +184,7 @@ class Table extends Component {
|
||||||
}
|
}
|
||||||
//适配lazyload
|
//适配lazyload
|
||||||
if(nextProps.scrollTop){
|
if(nextProps.scrollTop){
|
||||||
this.refs.bodyTable.scrollTop = nextProps.scrollTop;
|
// this.refs.bodyTable.scrollTop = nextProps.scrollTop;
|
||||||
this.scrollTop = nextProps.scrollTop;
|
this.scrollTop = nextProps.scrollTop;
|
||||||
}
|
}
|
||||||
if (!nextProps.originWidth) {
|
if (!nextProps.originWidth) {
|
||||||
|
@ -209,6 +209,7 @@ class Table extends Component {
|
||||||
if(this.scrollTop){
|
if(this.scrollTop){
|
||||||
this.refs.fixedColumnsBodyLeft && ( this.refs.fixedColumnsBodyLeft.scrollTop = this.scrollTop);
|
this.refs.fixedColumnsBodyLeft && ( this.refs.fixedColumnsBodyLeft.scrollTop = this.scrollTop);
|
||||||
this.refs.fixedColumnsBodyRight && ( this.refs.fixedColumnsBodyRight.scrollTop = this.scrollTop);
|
this.refs.fixedColumnsBodyRight && ( this.refs.fixedColumnsBodyRight.scrollTop = this.scrollTop);
|
||||||
|
this.refs.bodyTable.scrollTop = this.scrollTop;
|
||||||
this.scrollTop = 0;
|
this.scrollTop = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -10,7 +10,8 @@ export default function bigData(Table) {
|
||||||
loadBuffer: 5,
|
loadBuffer: 5,
|
||||||
rowKey: "key",
|
rowKey: "key",
|
||||||
onExpand() {},
|
onExpand() {},
|
||||||
scroll: {}
|
scroll: {},
|
||||||
|
currentIndex:-1
|
||||||
};
|
};
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
loadBuffer: PropTypes.number
|
loadBuffer: PropTypes.number
|
||||||
|
@ -43,19 +44,28 @@ export default function bigData(Table) {
|
||||||
}
|
}
|
||||||
componentWillReceiveProps(nextProps) {
|
componentWillReceiveProps(nextProps) {
|
||||||
const props = this.props;
|
const props = this.props;
|
||||||
|
const {currentIndex ,data} = nextProps;
|
||||||
|
const _this = this,dataLen = data.length;
|
||||||
if (nextProps.scroll.y !== props.scroll.y) {
|
if (nextProps.scroll.y !== props.scroll.y) {
|
||||||
const rowHeight = nextProps.height ? nextProps.height : defaultHeight;
|
const rowHeight = nextProps.height ? nextProps.height : defaultHeight;
|
||||||
const scrollY = nextProps.scroll.y ? parseInt(nextProps.scroll.y) : 0;
|
const scrollY = nextProps.scroll.y ? parseInt(nextProps.scroll.y) : 0;
|
||||||
this.rowsInView = scrollY ? Math.ceil(scrollY / rowHeight) : 20;
|
_this.rowsInView = scrollY ? Math.ceil(scrollY / rowHeight) : 20;
|
||||||
this.loadCount = props.loadBuffer
|
_this.loadCount = props.loadBuffer
|
||||||
? this.rowsInView + props.loadBuffer * 2
|
? _this.rowsInView + props.loadBuffer * 2
|
||||||
: 26; //一次加载多少数据
|
: 26; //一次加载多少数据
|
||||||
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);
|
||||||
|
}
|
||||||
|
//如果传currentIndex,会判断该条数据是否在可视区域,如果没有的话,则重新计算startIndex和endIndex
|
||||||
|
if(currentIndex!==-1 && currentIndex !== this.currentIndex){
|
||||||
|
_this.setStartAndEndIndex(currentIndex,dataLen);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -84,6 +94,34 @@ export default function bigData(Table) {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
setStartAndEndIndex(currentIndex,dataLen){
|
||||||
|
const _this = this;
|
||||||
|
if(currentIndex > _this.endIndex){
|
||||||
|
_this.currentIndex = currentIndex;
|
||||||
|
_this.endIndex = _this.currentIndex; //数据开始位置
|
||||||
|
_this.startIndex = _this.currentIndex - _this.loadCount; //数据结束位置
|
||||||
|
if(_this.endIndex > dataLen){
|
||||||
|
_this.endIndex = dataLen;
|
||||||
|
}
|
||||||
|
if(_this.startIndex < 0){
|
||||||
|
_this.startIndex = 0;
|
||||||
|
}
|
||||||
|
}else if(currentIndex < _this.startIndex){
|
||||||
|
_this.currentIndex = currentIndex;
|
||||||
|
_this.startIndex = currentIndex;
|
||||||
|
_this.endIndex = currentIndex + _this.loadCount;
|
||||||
|
if(_this.endIndex > dataLen){
|
||||||
|
_this.endIndex = dataLen;
|
||||||
|
}
|
||||||
|
if(_this.startIndex < 0){
|
||||||
|
_this.startIndex = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
//重新设定scrollTop值
|
||||||
|
_this.scrollTop = _this.getSumHeight(0, _this.endIndex - _this.rowsInView +2);
|
||||||
|
}
|
||||||
|
|
||||||
getRowKey(record, index) {
|
getRowKey(record, index) {
|
||||||
const rowKey = this.props.rowKey;
|
const rowKey = this.props.rowKey;
|
||||||
const key =
|
const key =
|
||||||
|
|
Loading…
Reference in New Issue