forgetest5
/
bee-table7
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat:增加 onBodyScroll 回调函数，在表体滚动时返回可视区最后一条数据的 index

This commit is contained in:
yangchch6 2019-08-27 11:10:47 +08:00
parent b927c3a5eb
commit bdde396727
14 changed files with 24906 additions and 229325 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
build/Table.css
View File

@ -438,8 +438,8 @@
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in IE 10.
/*
Introduced in IE 10.
*/
-ms-user-select: none;
user-select: none; }

7
build/Table.js
View File

@ -115,6 +115,7 @@ var propTypes = {
rowDraggAble: _propTypes2["default"].bool,
onDropRow: _propTypes2["default"].func,
onDragRowStart: _propTypes2["default"].func,
onBodyScroll: _propTypes2["default"].func,
bodyDisplayInRow: _propTypes2["default"].bool, // 表格内容超出列宽度时进行换行 or 以...形式展现
headerDisplayInRow: _propTypes2["default"].bool, // 表头内容超出列宽度时进行换行 or 以...形式展现
showRowNum: _propTypes2["default"].object // 表格是否自动生成序号,格式为{base:number || 0,defaultKey:string || '_index',defaultName:string || '序号'}
@ -165,6 +166,7 @@ var defaultProps = {
rowDraggAble: false,
onDropRow: function onDropRow() {},
onDragRowStart: function onDragRowStart() {},
onBodyScroll: function onBodyScroll() {},
bodyDisplayInRow: true,
headerDisplayInRow: true,
showRowNum: false
@ -1430,7 +1432,8 @@ var Table = function (_Component) {
scroll = _props9$scroll === undefined ? {} : _props9$scroll,
clsPrefix = _props9.clsPrefix,
handleScrollY = _props9.handleScrollY,
handleScrollX = _props9.handleScrollX;
handleScrollX = _props9.handleScrollX,
onBodyScroll = _props9.onBodyScroll;
var _refs = this.refs,
fixedColumnsBodyLeft = _refs.fixedColumnsBodyLeft,
fixedColumnsBodyRight = _refs.fixedColumnsBodyRight;
@ -1477,7 +1480,7 @@ var Table = function (_Component) {
}
this.lastScrollTop = e.target.scrollTop;
if (handleScrollY) {
(0, _utils.debounce)(handleScrollY(this.lastScrollTop, this.treeType), 300);
(0, _utils.debounce)(handleScrollY(this.lastScrollTop, this.treeType, onBodyScroll), 300);
}
}

5
build/lib/bigData.js
View File

@ -224,6 +224,7 @@ function bigData(Table) {
*@description 根据返回的scrollTop计算当前的索引。此处做了两次缓存一个是根据上一次的currentIndex计算当前currentIndex。另一个是根据当前内容区的数据是否在缓存中如果在则不重新render页面
*@param 最新一次滚动的scrollTop
*@param treeType是否是树状表
*@param callback表体滚动过程中触发的回调
*/
@ -354,7 +355,7 @@ function bigData(Table) {
}
};
this.handleScrollY = function (nextScrollTop, treeType) {
this.handleScrollY = function (nextScrollTop, treeType, callback) {
//树表逻辑
// 关键点是动态的获取startIndex和endIndex
// 法子一：子节点也看成普通tr，最开始需要设置一共有多少行，哪行显示哪行不显示如何确定
@ -446,6 +447,7 @@ function bigData(Table) {
_this4.startIndex = startIndex;
_this4.endIndex = endIndex;
_this4.setState({ needRender: !needRender });
callback(parseInt(currentIndex + rowsInView));
}
}
// 向上滚动，当前的index是否已经加载（currentIndex），若干上临界值小于startIndex则重新渲染
@ -458,6 +460,7 @@ function bigData(Table) {
_this4.startIndex = startIndex;
_this4.endIndex = _this4.startIndex + loadCount;
_this4.setState({ needRender: !needRender });
callback(parseInt(currentIndex + rowsInView));
}
// console.log(
// "**index**" + index,

208
build/lib/dragColumn.js
View File

@ -1,7 +1,7 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
value: true
});
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
@ -35,115 +35,115 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
function dragColumn(Table) {
return function (_Component) {
_inherits(DragColumn, _Component);
return function (_Component) {
_inherits(DragColumn, _Component);
function DragColumn(props) {
_classCallCheck(this, DragColumn);
function DragColumn(props) {
_classCallCheck(this, DragColumn);
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.setColumOrderByIndex = function (_column) {
_column.forEach(function (da, i) {
da.dragIndex = i;
da.drgHover = false;
});
return _column;
};
_this.onDragEnd = function (event, data) {
var dragSource = data.dragSource,
dragTarg = data.dragTarg;
var columns = _this.state.columns;
var sourceIndex = -1,
targetIndex = -1;
sourceIndex = columns.findIndex(function (da, i) {
return da.key == dragSource.key;
});
targetIndex = columns.findIndex(function (da, i) {
return da.key == dragTarg.key;
});
// 向前移动
if (targetIndex < sourceIndex) {
targetIndex = targetIndex + 1;
}
columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
var _newColumns = [];
columns.forEach(function (da, i) {
var newDate = _extends(da, {});
newDate.title = da.title;
_newColumns.push(newDate);
});
_this.setState({
columns: _newColumns //cloneDeep(columns)
});
if (_this.props.onDragEnd) {
_this.props.onDragEnd(event, data, columns);
}
};
_this.getTarget = function (evt) {
return evt.target || evt.srcElement;
};
_this.state = {
columns: _this.setColumOrderByIndex(props.columns)
};
return _this;
}
DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (nextProps.columns != this.props.columns) {
this.setState({
columns: this.setColumOrderByIndex(nextProps.columns)
});
}
};
DragColumn.prototype.recursion = function (_recursion) {
function recursion(_x) {
return _recursion.apply(this, arguments);
}
recursion.toString = function () {
return _recursion.toString();
};
return recursion;
}(function (obj) {
var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
for (key in obj) {
if (_typeof(obj[key]) == 'object' && Object.keys(obj[key].length > 0)) {
data[key] = recursion(obj[key]);
} else {
data[key] = obj[key];
}
}
return data;
_this.setColumOrderByIndex = function (_column) {
_column.forEach(function (da, i) {
da.dragIndex = i;
da.drgHover = false;
});
return _column;
};
DragColumn.prototype.render = function render() {
var _props = this.props,
data = _props.data,
dragborder = _props.dragborder,
draggable = _props.draggable,
className = _props.className,
others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className']);
_this.onDragEnd = function (event, data) {
var dragSource = data.dragSource,
dragTarg = data.dragTarg;
var columns = _this.state.columns;
return _react2["default"].createElement(Table, _extends({}, others, {
columns: this.state.columns,
data: data,
className: className + ' u-table-drag-border',
onDragEnd: this.onDragEnd,
draggable: draggable,
dragborder: dragborder
}));
};
var sourceIndex = -1,
targetIndex = -1;
return DragColumn;
}(_react.Component);
sourceIndex = columns.findIndex(function (da, i) {
return da.key == dragSource.key;
});
targetIndex = columns.findIndex(function (da, i) {
return da.key == dragTarg.key;
});
// 向前移动
if (targetIndex < sourceIndex) {
targetIndex = targetIndex + 1;
}
columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
var _newColumns = [];
columns.forEach(function (da, i) {
var newDate = _extends(da, {});
newDate.title = da.title;
_newColumns.push(newDate);
});
_this.setState({
columns: _newColumns //cloneDeep(columns)
});
if (_this.props.onDragEnd) {
_this.props.onDragEnd(event, data, columns);
}
};
_this.getTarget = function (evt) {
return evt.target || evt.srcElement;
};
_this.state = {
columns: _this.setColumOrderByIndex(props.columns)
};
return _this;
}
DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (nextProps.columns != this.props.columns) {
this.setState({
columns: this.setColumOrderByIndex(nextProps.columns)
});
}
};
DragColumn.prototype.recursion = function (_recursion) {
function recursion(_x) {
return _recursion.apply(this, arguments);
}
recursion.toString = function () {
return _recursion.toString();
};
return recursion;
}(function (obj) {
var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
for (key in obj) {
if (_typeof(obj[key]) == 'object' && Object.keys(obj[key].length > 0)) {
data[key] = recursion(obj[key]);
} else {
data[key] = obj[key];
}
}
return data;
});
DragColumn.prototype.render = function render() {
var _props = this.props,
data = _props.data,
dragborder = _props.dragborder,
draggable = _props.draggable,
className = _props.className,
others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className']);
return _react2["default"].createElement(Table, _extends({}, others, {
columns: this.state.columns,
data: data,
className: className + ' u-table-drag-border',
onDragEnd: this.onDragEnd,
draggable: draggable,
dragborder: dragborder
}));
};
return DragColumn;
}(_react.Component);
}
module.exports = exports['default'];

80
build/lib/util.js
View File

@ -1,7 +1,7 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
value: true
});
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; };
@ -20,29 +20,29 @@ exports.ObjectAssign = ObjectAssign;
*/
function sortBy(arr, prop, desc) {
var props = [],
ret = [],
i = 0,
len = arr.length;
if (typeof prop == 'string') {
for (; i < len; i++) {
var oI = arr[i];
(props[i] = new String(oI && oI[prop] || ''))._obj = oI;
var props = [],
ret = [],
i = 0,
len = arr.length;
if (typeof prop == 'string') {
for (; i < len; i++) {
var oI = arr[i];
(props[i] = new String(oI && oI[prop] || ''))._obj = oI;
}
} else if (typeof prop == 'function') {
for (; i < len; i++) {
var _oI = arr[i];
(props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
}
} else {
throw '参数类型错误';
}
} else if (typeof prop == 'function') {
for (; i < len; i++) {
var _oI = arr[i];
(props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
props.sort();
for (i = 0; i < len; i++) {
ret[i] = props[i]._obj;
}
} else {
throw '参数类型错误';
}
props.sort();
for (i = 0; i < len; i++) {
ret[i] = props[i]._obj;
}
if (desc) ret.reverse();
return ret;
if (desc) ret.reverse();
return ret;
};
/**
@ -51,11 +51,11 @@ function sortBy(arr, prop, desc) {
* @param {} property
*/
function compare(property) {
return function (a, b) {
var value1 = a[property];
var value2 = b[property];
return value1 - value2;
};
return function (a, b) {
var value1 = a[property];
var value2 = b[property];
return value1 - value2;
};
}
/**
@ -63,17 +63,17 @@ function compare(property) {
* @param {*} obj 要拷贝的对象
*/
function ObjectAssign(obj) {
var b = obj instanceof Array;
var tagObj = b ? [] : {};
if (b) {
//数组
obj.forEach(function (da) {
var _da = {};
_extends(_da, da);
tagObj.push(_da);
});
} else {
_extends(tagObj, obj);
}
return tagObj;
var b = obj instanceof Array;
var tagObj = b ? [] : {};
if (b) {
//数组
obj.forEach(function (da) {
var _da = {};
_extends(_da, da);
tagObj.push(_da);
});
} else {
_extends(tagObj, obj);
}
return tagObj;
}

9
demo/demolist/Demo1401.js
View File

@ -62,6 +62,14 @@ class Demo30 extends Component {
}
}
/**
* 表体滚动加载时触发的回调函数
* @param endIndex 可视区最后一条数据的 index 序号
*/
handleBodyScroll = endIndex => {
console.log('endIndex：', endIndex);
}
render() {
return (
<div>
@ -72,6 +80,7 @@ class Demo30 extends Component {
onRowClick={(record, index, indent) => {
console.log('currentIndex--'+index);
}}
onBodyScroll={this.handleBodyScroll}
/>
</div>
);

10
demo/index.js
View File

File diff suppressed because one or more lines are too long

4
dist/demo.css vendored
View File

@ -430,8 +430,8 @@
background-clip: padding-box;
-moz-user-select: -moz-none;
-webkit-user-select: none;
/*
Introduced in IE 10.
/*
Introduced in IE 10.
*/
-ms-user-select: none;
user-select: none; }

6
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

253871
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

10
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

6
docs/api.md
View File

@ -371,7 +371,11 @@ const BigDataTable = bigData(Table);
#### API
无
Table 组件参数：
| 参数 | 说明 | 类型 | 返回值 |
| ------ | ---------- | -------- | ---- |
| onBodyScroll | 表体滚动加载时触发的回调函数 | function(endIndex) | `endIndex` : 可视区最后一条数据的 index 序号 |
#### bigData 使用示例
- [万行以上数据渲染](http://design.yonyoucloud.com/tinper-bee/bee-table#%E4%B8%87%E8%A1%8C%E4%BB%A5%E4%B8%8A%E6%95%B0%E6%8D%AE%E6%B8%B2%E6%9F%93)

6
src/Table.js
View File

@ -59,6 +59,7 @@ const propTypes = {
rowDraggAble: PropTypes.bool,
onDropRow: PropTypes.func,
onDragRowStart: PropTypes.func,
onBodyScroll: PropTypes.func,
bodyDisplayInRow: PropTypes.bool, // 表格内容超出列宽度时进行换行 or 以...形式展现
headerDisplayInRow: PropTypes.bool, // 表头内容超出列宽度时进行换行 or 以...形式展现
showRowNum: PropTypes.object, // 表格是否自动生成序号,格式为{base:number || 0,defaultKey:string || '_index',defaultName:string || '序号'}
@ -100,6 +101,7 @@ const defaultProps = {
rowDraggAble:false,
onDropRow: ()=>{},
onDragRowStart: ()=>{},
onBodyScroll: ()=>{},
bodyDisplayInRow: true,
headerDisplayInRow: true,
showRowNum: false,
@ -1228,7 +1230,7 @@ class Table extends Component {
handleBodyScroll(e) {
const headTable = this.headTable;
const { scroll = {},clsPrefix,handleScrollY, handleScrollX} = this.props;
const { scroll = {},clsPrefix,handleScrollY, handleScrollX, onBodyScroll} = this.props;
const {fixedColumnsBodyLeft, fixedColumnsBodyRight } = this.refs;
// Prevent scrollTop setter trigger onScroll event
// http://stackoverflow.com/q/1386696
@ -1279,7 +1281,7 @@ class Table extends Component {
this.lastScrollTop = e.target.scrollTop;
if(handleScrollY){
debounce(
handleScrollY(this.lastScrollTop,this.treeType),
handleScrollY(this.lastScrollTop,this.treeType,onBodyScroll),
300)
}

5
src/lib/bigData.js
View File

@ -212,8 +212,9 @@ export default function bigData(Table) {
*@description 根据返回的scrollTop计算当前的索引。此处做了两次缓存一个是根据上一次的currentIndex计算当前currentIndex。另一个是根据当前内容区的数据是否在缓存中如果在则不重新render页面
*@param 最新一次滚动的scrollTop
*@param treeType是否是树状表
*@param callback表体滚动过程中触发的回调
*/
handleScrollY = (nextScrollTop, treeType) => {
handleScrollY = (nextScrollTop, treeType, callback) => {
//树表逻辑
// 关键点是动态的获取startIndex和endIndex
// 法子一：子节点也看成普通tr，最开始需要设置一共有多少行，哪行显示哪行不显示如何确定
@ -308,6 +309,7 @@ export default function bigData(Table) {
this.startIndex = startIndex;
this.endIndex = endIndex;
this.setState({ needRender: !needRender });
callback(parseInt(currentIndex + rowsInView));
}
}
// 向上滚动，当前的index是否已经加载（currentIndex），若干上临界值小于startIndex则重新渲染
@ -320,6 +322,7 @@ export default function bigData(Table) {
this.startIndex = startIndex;
this.endIndex = this.startIndex + loadCount;
this.setState({ needRender: !needRender });
callback(parseInt(currentIndex + rowsInView));
}
// console.log(
// "**index**" + index,