增加currentIndex缓存
This commit is contained in:
wanghaoo
parent
386ded627f
commit
d091e72db4
|
|
@ -87,9 +87,8 @@ class Demo1 extends Component {
|
|||
columns={columns}
|
||||
data={data}
|
||||
parentNodeId='parent'
|
||||
headerHeight={42}
|
||||
scroll={{y:400}}
|
||||
height={43}
|
||||
height={40}
|
||||
onRowClick={(record, index, indent) => {
|
||||
this.setState({
|
||||
selectedRowIndex: index
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ const CARET = <i className="uf uf-arrow-down"></i>;
|
|||
const CARETUP = <i className="uf uf-arrow-up"></i>;
|
||||
|
||||
|
||||
var Demo30 = require("./demolist/Demo30");var DemoArray = [{"example":<Demo30 />,"title":" 大数据加载","code":"/**\n*\n* @title 大数据加载\n* 【Tooltip】\n* @description\n*/\n\nimport React, { Component } from \"react\";\nimport { Table, Tooltip } from 'tinper-bee';\nimport BigData from \"tinper-bee/lib/bigData\";;\nconst BigDataTable = BigData(Table);\nconst columns = [\n {\n title:'序号',\n dataIndex:'index',\n width:'50',\n render:(text,record,index)=>{\n return index\n },\n fixed:'left'\n },\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\",\n render: (text, record, index) => {\n return (\n <Tooltip inverse overlay={text}>\n <span tootip={text} style={{\n display: \"inline-block\",\n width: \"80px\",\n textOverflow: \"ellipsis\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n verticalAlign: \"middle\",\n }}>{text}</span>\n </Tooltip>\n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n fixed:'right',\n render(text, record, index) {\n return (\n <div style={{ position: 'relative' }} title={text} >\n <a\n href=\"javascript:;\"\n tooltip={text}\n onClick={() => {\n alert('这是第' + index + '列，内容为:' + text);\n }}\n >\n 一些操作\n </a>\n </div>\n );\n }\n }\n];\n\nconst data = [ ...new Array(10000) ].map((e, i) => {\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n if(i%3==0){\n rs.b = '女';\n }\n return rs;\n })\n\n\nclass Demo1 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n\n render() {\n return (\n <BigDataTable\n columns={columns}\n data={data}\n parentNodeId='parent'\n headerHeight={42}\n scroll={{y:400}}\n height={43}\n onRowClick={(record, index, indent) => {\n this.setState({\n selectedRowIndex: index\n });\n }}\n />\n\n \n );\n }\n}\n\n\n","desc":""}]
|
||||
var Demo30 = require("./demolist/Demo30");var DemoArray = [{"example":<Demo30 />,"title":" 大数据加载","code":"/**\n*\n* @title 大数据加载\n* 【Tooltip】\n* @description\n*/\n\nimport React, { Component } from \"react\";\nimport { Table, Tooltip } from 'tinper-bee';\nimport BigData from \"tinper-bee/lib/bigData\";;\nconst BigDataTable = BigData(Table);\nconst columns = [\n {\n title:'序号',\n dataIndex:'index',\n width:'50',\n render:(text,record,index)=>{\n return index\n },\n fixed:'left'\n },\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\",\n render: (text, record, index) => {\n return (\n <Tooltip inverse overlay={text}>\n <span tootip={text} style={{\n display: \"inline-block\",\n width: \"80px\",\n textOverflow: \"ellipsis\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n verticalAlign: \"middle\",\n }}>{text}</span>\n </Tooltip>\n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n fixed:'right',\n render(text, record, index) {\n return (\n <div style={{ position: 'relative' }} title={text} >\n <a\n href=\"javascript:;\"\n tooltip={text}\n onClick={() => {\n alert('这是第' + index + '列，内容为:' + text);\n }}\n >\n 一些操作\n </a>\n </div>\n );\n }\n }\n];\n\nconst data = [ ...new Array(10000) ].map((e, i) => {\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n if(i%3==0){\n rs.b = '女';\n }\n return rs;\n })\n\n\nclass Demo1 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n\n render() {\n return (\n <BigDataTable\n columns={columns}\n data={data}\n parentNodeId='parent'\n scroll={{y:400}}\n height={40}\n onRowClick={(record, index, indent) => {\n this.setState({\n selectedRowIndex: index\n });\n }}\n />\n\n \n );\n }\n}\n\n\n","desc":""}]
|
||||
|
||||
|
||||
class Demo extends Component {
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@
|
|||
|
||||
var CARETUP = _react2['default'].createElement('i', { className: 'uf uf-arrow-up' });
|
||||
|
||||
var Demo30 = __webpack_require__(79);var DemoArray = [{ "example": _react2['default'].createElement(Demo30, null), "title": " 大数据加载", "code": "/**\n*\n* @title 大数据加载\n* 【Tooltip】\n* @description\n*/\n\nimport React, { Component } from \"react\";\nimport { Table, Tooltip } from 'tinper-bee';\nimport BigData from \"tinper-bee/lib/bigData\";;\nconst BigDataTable = BigData(Table);\nconst columns = [\n {\n title:'序号',\n dataIndex:'index',\n width:'50',\n render:(text,record,index)=>{\n return index\n },\n fixed:'left'\n },\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\",\n render: (text, record, index) => {\n return (\n <Tooltip inverse overlay={text}>\n <span tootip={text} style={{\n display: \"inline-block\",\n width: \"80px\",\n textOverflow: \"ellipsis\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n verticalAlign: \"middle\",\n }}>{text}</span>\n </Tooltip>\n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n fixed:'right',\n render(text, record, index) {\n return (\n <div style={{ position: 'relative' }} title={text} >\n <a\n href=\"javascript:;\"\n tooltip={text}\n onClick={() => {\n alert('这是第' + index + '列，内容为:' + text);\n }}\n >\n 一些操作\n </a>\n </div>\n );\n }\n }\n];\n\nconst data = [ ...new Array(10000) ].map((e, i) => {\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n if(i%3==0){\n rs.b = '女';\n }\n return rs;\n })\n\n\nclass Demo1 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n\n render() {\n return (\n <BigDataTable\n columns={columns}\n data={data}\n parentNodeId='parent'\n headerHeight={42}\n scroll={{y:400}}\n height={43}\n onRowClick={(record, index, indent) => {\n this.setState({\n selectedRowIndex: index\n });\n }}\n />\n\n \n );\n }\n}\n\n\n", "desc": "" }];
|
||||
var Demo30 = __webpack_require__(79);var DemoArray = [{ "example": _react2['default'].createElement(Demo30, null), "title": " 大数据加载", "code": "/**\n*\n* @title 大数据加载\n* 【Tooltip】\n* @description\n*/\n\nimport React, { Component } from \"react\";\nimport { Table, Tooltip } from 'tinper-bee';\nimport BigData from \"tinper-bee/lib/bigData\";;\nconst BigDataTable = BigData(Table);\nconst columns = [\n {\n title:'序号',\n dataIndex:'index',\n width:'50',\n render:(text,record,index)=>{\n return index\n },\n fixed:'left'\n },\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\",\n render: (text, record, index) => {\n return (\n <Tooltip inverse overlay={text}>\n <span tootip={text} style={{\n display: \"inline-block\",\n width: \"80px\",\n textOverflow: \"ellipsis\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n verticalAlign: \"middle\",\n }}>{text}</span>\n </Tooltip>\n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n fixed:'right',\n render(text, record, index) {\n return (\n <div style={{ position: 'relative' }} title={text} >\n <a\n href=\"javascript:;\"\n tooltip={text}\n onClick={() => {\n alert('这是第' + index + '列，内容为:' + text);\n }}\n >\n 一些操作\n </a>\n </div>\n );\n }\n }\n];\n\nconst data = [ ...new Array(10000) ].map((e, i) => {\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n if(i%3==0){\n rs.b = '女';\n }\n return rs;\n })\n\n\nclass Demo1 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n\n render() {\n return (\n <BigDataTable\n columns={columns}\n data={data}\n parentNodeId='parent'\n scroll={{y:400}}\n height={40}\n onRowClick={(record, index, indent) => {\n this.setState({\n selectedRowIndex: index\n });\n }}\n />\n\n \n );\n }\n}\n\n\n", "desc": "" }];
|
||||
|
||||
var Demo = function (_Component) {
|
||||
_inherits(Demo, _Component);
|
||||
|
|
@ -7932,9 +7932,8 @@
|
|||
columns: columns,
|
||||
data: data,
|
||||
parentNodeId: "parent",
|
||||
headerHeight: 42,
|
||||
scroll: { y: 400 },
|
||||
height: 43,
|
||||
height: 40,
|
||||
onRowClick: function onRowClick(record, index, indent) {
|
||||
_this2.setState({
|
||||
selectedRowIndex: index
|
||||
|
|
@ -53230,7 +53229,7 @@
|
|||
/* 481 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
|
|
@ -53238,13 +53237,17 @@
|
|||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
exports["default"] = bigData;
|
||||
exports['default'] = bigData;
|
||||
|
||||
var _react = __webpack_require__(4);
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
var _propTypes = __webpack_require__(5);
|
||||
|
||||
var _propTypes2 = _interopRequireDefault(_propTypes);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
||||
|
||||
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
||||
|
||||
|
|
@ -53278,9 +53281,10 @@
|
|||
//默认显示25条，rowsInView根据定高算的。在非固定高下，这个只是一个大概的值。
|
||||
_this2.rowsInView = _this2.props.scroll.y ? Math.ceil(_this2.props.scroll.y / rowHeight) : 25;
|
||||
_this2.currentIndex = 0;
|
||||
_this2.loadCount = 30; //一次加载多少数据
|
||||
_this2.loadCount = props.loadCount ? props.loadCount : 30; //一次加载多少数据
|
||||
_this2.cachedRowHeight = []; //缓存每行的高度
|
||||
_this2.lastScrollTop = 0;
|
||||
_this2.currentScrollTop = 0;
|
||||
_this2.startIndex = _this2.currentIndex; //数据开始位置
|
||||
_this2.endIndex = _this2.currentIndex + _this2.loadCount; //数据结束位置
|
||||
_this2.setRowHeight = _this2.setRowHeight.bind(_this2);
|
||||
|
|
@ -53324,7 +53328,7 @@
|
|||
sufHeight: this.getSumHeight(endIndex, data.length),
|
||||
startIndex: startIndex
|
||||
};
|
||||
return _react2["default"].createElement(Table, _extends({}, this.props, {
|
||||
return _react2['default'].createElement(Table, _extends({}, this.props, {
|
||||
data: data.slice(startIndex, endIndex),
|
||||
lazyLoad: lazyLoad,
|
||||
handleScroll: this.handleScroll,
|
||||
|
|
@ -53337,6 +53341,8 @@
|
|||
return BigData;
|
||||
}(_react.Component), _class.defaultProps = {
|
||||
data: []
|
||||
}, _class.propTypes = {
|
||||
loadCount: _propTypes2['default'].number
|
||||
}, _initialiseProps = function _initialiseProps() {
|
||||
var _this3 = this;
|
||||
|
||||
|
|
@ -53353,26 +53359,40 @@
|
|||
var _this$currentIndex = _this.currentIndex,
|
||||
currentIndex = _this$currentIndex === undefined ? 0 : _this$currentIndex,
|
||||
loadCount = _this.loadCount,
|
||||
scrollTop = _this.scrollTop;
|
||||
scrollTop = _this.scrollTop,
|
||||
currentScrollTop = _this.currentScrollTop;
|
||||
var endIndex = _this.endIndex,
|
||||
startIndex = _this.startIndex;
|
||||
var needRender = _this.state.needRender;
|
||||
|
||||
var index = 0; //记录下次当前位置
|
||||
var temp = nextScrollTop;
|
||||
|
||||
var index = currentIndex; //记录下次当前位置
|
||||
var temp = currentIndex ? nextScrollTop - currentScrollTop : nextScrollTop;
|
||||
var viewHeight = parseInt(scroll.y);
|
||||
var isOrder = nextScrollTop > scrollTop ? true : false; //true为向下滚动、false为向上滚动
|
||||
var isOrder = temp > 0 ? true : false; //true为向下滚动、false为向上滚动
|
||||
|
||||
//根据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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// if (data.length - loadCount < index) index = data.length - loadCount
|
||||
if (index < 0) index = 0;
|
||||
|
||||
console.log('currentIndex****' + index);
|
||||
//如果之前的索引和下一次的不一样则重置索引和滚动的位置
|
||||
if (currentIndex !== index) {
|
||||
_this.currentIndex = index;
|
||||
|
|
@ -53415,7 +53435,7 @@
|
|||
};
|
||||
}, _temp;
|
||||
}
|
||||
module.exports = exports["default"];
|
||||
module.exports = exports['default'];
|
||||
|
||||
/***/ })
|
||||
/******/ ]);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -55,6 +55,7 @@ import 'bee-table/build/Table.css';
|
|||
| headerScroll | 表头下是否显示滚动条 | bool| false
|
||||
| sort | 排序的属性 | object| { mode:'single'//单列排序, backSource:false //默认是前端排序，值为true为后端排序 } mode:multiple-多列排序
|
||||
| syncHover | 是否同步Hover状态到左侧Checkbox，关闭此功能有助于提升性能 | bool| true
|
||||
| loadCount | 使用BigData高阶组件实现大数据加载时，一次性展示的数据量 | number| 30
|
||||
|
||||
|
||||
*注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { Component } from "react";
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const defaultHeight = 40;
|
||||
const rowDiff = 3;//行差值
|
||||
|
|
@ -10,6 +10,9 @@ export default function bigData(Table) {
|
|||
static defaultProps = {
|
||||
data: []
|
||||
};
|
||||
static propTypes = {
|
||||
loadCount: PropTypes.number,
|
||||
}
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
|
|
@ -20,9 +23,10 @@ export default function bigData(Table) {
|
|||
//默认显示25条，rowsInView根据定高算的。在非固定高下，这个只是一个大概的值。
|
||||
this.rowsInView = this.props.scroll.y?Math.ceil(this.props.scroll.y/rowHeight):25 ;
|
||||
this.currentIndex = 0;
|
||||
this.loadCount = 30;//一次加载多少数据
|
||||
this.loadCount = props.loadCount?props.loadCount:30;//一次加载多少数据
|
||||
this.cachedRowHeight = [];//缓存每行的高度
|
||||
this.lastScrollTop = 0;
|
||||
this.currentScrollTop = 0;
|
||||
this.startIndex = this.currentIndex;//数据开始位置
|
||||
this.endIndex = this.currentIndex + this.loadCount//数据结束位置
|
||||
this.setRowHeight = this.setRowHeight.bind(this);
|
||||
|
|
@ -46,30 +50,48 @@ export default function bigData(Table) {
|
|||
}
|
||||
return sumHeight;
|
||||
}
|
||||
|
||||
/**
|
||||
*@description 根据返回的scrollTop计算当前的索引。此处做了两次缓存一个是根据上一次的currentIndex计算当前currentIndex。另一个是根据当前内容区的数据是否在缓存中如果在则不重新render页面
|
||||
*@param 最新一次滚动的scrollTop
|
||||
*/
|
||||
handleScroll = (nextScrollTop)=> {
|
||||
const _this = this;
|
||||
|
||||
const {data,height,scroll={}} = _this.props;
|
||||
const rowHeight = height?height:defaultHeight;
|
||||
const {currentIndex = 0 ,loadCount,scrollTop} = _this;
|
||||
const {currentIndex = 0 ,loadCount,scrollTop,currentScrollTop} = _this;
|
||||
let {endIndex,startIndex} = _this;
|
||||
const {needRender} = _this.state;
|
||||
let index = 0;//记录下次当前位置
|
||||
let temp = nextScrollTop ;
|
||||
|
||||
let index = currentIndex;//记录下次当前位置
|
||||
let temp = currentIndex ?nextScrollTop - currentScrollTop:nextScrollTop;
|
||||
const viewHeight = parseInt(scroll.y);
|
||||
const isOrder = nextScrollTop > scrollTop?true:false;//true为向下滚动、false为向上滚动
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
// if (data.length - loadCount < index) index = data.length - loadCount
|
||||
}
|
||||
|
||||
|
||||
if (index < 0) index = 0
|
||||
|
||||
console.log('currentIndex****'+index);
|
||||
//如果之前的索引和下一次的不一样则重置索引和滚动的位置
|
||||
if(currentIndex !== index){
|
||||
_this.currentIndex = index;
|
||||
|
|
|
|||
Loading…
Reference in New Issue