fix:表格更新自动定位到首行问题
This commit is contained in:
parent
a916adc042
commit
01855fa7c4
|
@ -438,8 +438,8 @@
|
||||||
-moz-user-select: -moz-none;
|
-moz-user-select: -moz-none;
|
||||||
-khtml-user-select: none;
|
-khtml-user-select: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
/*
|
/*
|
||||||
Introduced in IE 10.
|
Introduced in IE 10.
|
||||||
*/
|
*/
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none; }
|
user-select: none; }
|
||||||
|
|
|
@ -396,6 +396,7 @@ var Table = function (_Component) {
|
||||||
this.resetScrollX();
|
this.resetScrollX();
|
||||||
}
|
}
|
||||||
// fix:模态框中使用table,计算的滚动条宽度为0的bug
|
// fix:模态框中使用table,计算的滚动条宽度为0的bug
|
||||||
|
// fix:表格首次渲染时 display:none,再显示时,未重新计算,导致表行出现错位的bug
|
||||||
if (this.scrollbarWidth <= 0 && this.props.scroll.y) {
|
if (this.scrollbarWidth <= 0 && this.props.scroll.y) {
|
||||||
this.scrollbarWidth = (0, _utils.measureScrollbar)();
|
this.scrollbarWidth = (0, _utils.measureScrollbar)();
|
||||||
}
|
}
|
||||||
|
|
|
@ -90,7 +90,6 @@ function bigData(Table) {
|
||||||
if (nextProps.data.length > 0) {
|
if (nextProps.data.length > 0) {
|
||||||
_this.endIndex = _this.currentIndex - nextProps.loadBuffer + _this.loadCount; //数据结束位置
|
_this.endIndex = _this.currentIndex - nextProps.loadBuffer + _this.loadCount; //数据结束位置
|
||||||
}
|
}
|
||||||
this.scrollTop = 0;
|
|
||||||
}
|
}
|
||||||
//如果传currentIndex,会判断该条数据是否在可视区域,如果没有的话,则重新计算startIndex和endIndex
|
//如果传currentIndex,会判断该条数据是否在可视区域,如果没有的话,则重新计算startIndex和endIndex
|
||||||
if (currentIndex !== -1 && currentIndex !== this.currentIndex) {
|
if (currentIndex !== -1 && currentIndex !== this.currentIndex) {
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
Object.defineProperty(exports, "__esModule", {
|
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; };
|
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,126 +35,126 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
||||||
|
|
||||||
function dragColumn(Table) {
|
function dragColumn(Table) {
|
||||||
|
|
||||||
return function (_Component) {
|
return function (_Component) {
|
||||||
_inherits(DragColumn, _Component);
|
_inherits(DragColumn, _Component);
|
||||||
|
|
||||||
function DragColumn(props) {
|
function DragColumn(props) {
|
||||||
_classCallCheck(this, DragColumn);
|
_classCallCheck(this, DragColumn);
|
||||||
|
|
||||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||||
|
|
||||||
_this.setColumOrderByIndex = function (_column) {
|
_this.setColumOrderByIndex = function (_column) {
|
||||||
_column.forEach(function (da, i) {
|
_column.forEach(function (da, i) {
|
||||||
da.dragIndex = i;
|
da.dragIndex = i;
|
||||||
da.drgHover = false;
|
da.drgHover = false;
|
||||||
});
|
|
||||||
return _column;
|
|
||||||
};
|
|
||||||
|
|
||||||
_this.onDrop = 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);
|
|
||||||
});
|
|
||||||
// console.log(" onDrop-------columns--- ",columns);
|
|
||||||
_this.setState({
|
|
||||||
columns: _newColumns //cloneDeep(columns)
|
|
||||||
});
|
|
||||||
// console.log(" onDrop-------columns--- ",_newColumns);
|
|
||||||
// console.log(columns === _newColumns);
|
|
||||||
if (_this.props.onDrop) {
|
|
||||||
_this.props.onDrop(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;
|
|
||||||
});
|
});
|
||||||
|
return _column;
|
||||||
|
};
|
||||||
|
|
||||||
DragColumn.prototype.render = function render() {
|
_this.onDrop = function (event, data) {
|
||||||
var _props = this.props,
|
var dragSource = data.dragSource,
|
||||||
data = _props.data,
|
dragTarg = data.dragTarg;
|
||||||
dragborder = _props.dragborder,
|
var columns = _this.state.columns;
|
||||||
draggable = _props.draggable,
|
|
||||||
className = _props.className,
|
|
||||||
columns = _props.columns,
|
|
||||||
onDragStart = _props.onDragStart,
|
|
||||||
onDragEnter = _props.onDragEnter,
|
|
||||||
onDragOver = _props.onDragOver,
|
|
||||||
onDrop = _props.onDrop,
|
|
||||||
others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className', 'columns', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDrop']);
|
|
||||||
|
|
||||||
return _react2["default"].createElement(Table, _extends({}, others, {
|
var sourceIndex = -1,
|
||||||
columns: this.state.columns,
|
targetIndex = -1;
|
||||||
data: data,
|
|
||||||
className: className + ' u-table-drag-border',
|
|
||||||
onDragStart: this.onDragStart,
|
|
||||||
onDragOver: this.onDragOver,
|
|
||||||
onDrop: this.onDrop,
|
|
||||||
onDragEnter: this.onDragEnter,
|
|
||||||
draggable: draggable,
|
|
||||||
dragborder: dragborder
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
return DragColumn;
|
sourceIndex = columns.findIndex(function (da, i) {
|
||||||
}(_react.Component);
|
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);
|
||||||
|
});
|
||||||
|
// console.log(" onDrop-------columns--- ",columns);
|
||||||
|
_this.setState({
|
||||||
|
columns: _newColumns //cloneDeep(columns)
|
||||||
|
});
|
||||||
|
// console.log(" onDrop-------columns--- ",_newColumns);
|
||||||
|
// console.log(columns === _newColumns);
|
||||||
|
if (_this.props.onDrop) {
|
||||||
|
_this.props.onDrop(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,
|
||||||
|
columns = _props.columns,
|
||||||
|
onDragStart = _props.onDragStart,
|
||||||
|
onDragEnter = _props.onDragEnter,
|
||||||
|
onDragOver = _props.onDragOver,
|
||||||
|
onDrop = _props.onDrop,
|
||||||
|
others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className', 'columns', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDrop']);
|
||||||
|
|
||||||
|
return _react2["default"].createElement(Table, _extends({}, others, {
|
||||||
|
columns: this.state.columns,
|
||||||
|
data: data,
|
||||||
|
className: className + ' u-table-drag-border',
|
||||||
|
onDragStart: this.onDragStart,
|
||||||
|
onDragOver: this.onDragOver,
|
||||||
|
onDrop: this.onDrop,
|
||||||
|
onDragEnter: this.onDragEnter,
|
||||||
|
draggable: draggable,
|
||||||
|
dragborder: dragborder
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
return DragColumn;
|
||||||
|
}(_react.Component);
|
||||||
}
|
}
|
||||||
module.exports = exports['default'];
|
module.exports = exports['default'];
|
|
@ -1,7 +1,7 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
Object.defineProperty(exports, "__esModule", {
|
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; };
|
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) {
|
function sortBy(arr, prop, desc) {
|
||||||
var props = [],
|
var props = [],
|
||||||
ret = [],
|
ret = [],
|
||||||
i = 0,
|
i = 0,
|
||||||
len = arr.length;
|
len = arr.length;
|
||||||
if (typeof prop == 'string') {
|
if (typeof prop == 'string') {
|
||||||
for (; i < len; i++) {
|
for (; i < len; i++) {
|
||||||
var oI = arr[i];
|
var oI = arr[i];
|
||||||
(props[i] = new String(oI && oI[prop] || ''))._obj = oI;
|
(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') {
|
props.sort();
|
||||||
for (; i < len; i++) {
|
for (i = 0; i < len; i++) {
|
||||||
var _oI = arr[i];
|
ret[i] = props[i]._obj;
|
||||||
(props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
|
|
||||||
}
|
}
|
||||||
} else {
|
if (desc) ret.reverse();
|
||||||
throw '参数类型错误';
|
return ret;
|
||||||
}
|
|
||||||
props.sort();
|
|
||||||
for (i = 0; i < len; i++) {
|
|
||||||
ret[i] = props[i]._obj;
|
|
||||||
}
|
|
||||||
if (desc) ret.reverse();
|
|
||||||
return ret;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -51,11 +51,11 @@ function sortBy(arr, prop, desc) {
|
||||||
* @param {} property
|
* @param {} property
|
||||||
*/
|
*/
|
||||||
function compare(property) {
|
function compare(property) {
|
||||||
return function (a, b) {
|
return function (a, b) {
|
||||||
var value1 = a[property];
|
var value1 = a[property];
|
||||||
var value2 = b[property];
|
var value2 = b[property];
|
||||||
return value1 - value2;
|
return value1 - value2;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -63,17 +63,17 @@ function compare(property) {
|
||||||
* @param {*} obj 要拷贝的对象
|
* @param {*} obj 要拷贝的对象
|
||||||
*/
|
*/
|
||||||
function ObjectAssign(obj) {
|
function ObjectAssign(obj) {
|
||||||
var b = obj instanceof Array;
|
var b = obj instanceof Array;
|
||||||
var tagObj = b ? [] : {};
|
var tagObj = b ? [] : {};
|
||||||
if (b) {
|
if (b) {
|
||||||
//数组
|
//数组
|
||||||
obj.forEach(function (da) {
|
obj.forEach(function (da) {
|
||||||
var _da = {};
|
var _da = {};
|
||||||
_extends(_da, da);
|
_extends(_da, da);
|
||||||
tagObj.push(_da);
|
tagObj.push(_da);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
_extends(tagObj, obj);
|
_extends(tagObj, obj);
|
||||||
}
|
}
|
||||||
return tagObj;
|
return tagObj;
|
||||||
}
|
}
|
File diff suppressed because one or more lines are too long
|
@ -430,8 +430,8 @@
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
-moz-user-select: -moz-none;
|
-moz-user-select: -moz-none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
/*
|
/*
|
||||||
Introduced in IE 10.
|
Introduced in IE 10.
|
||||||
*/
|
*/
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none; }
|
user-select: none; }
|
||||||
|
|
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
|
@ -67,7 +67,6 @@ export default function bigData(Table) {
|
||||||
if(nextProps.data.length>0){
|
if(nextProps.data.length>0){
|
||||||
_this.endIndex = _this.currentIndex - nextProps.loadBuffer + _this.loadCount; //数据结束位置
|
_this.endIndex = _this.currentIndex - nextProps.loadBuffer + _this.loadCount; //数据结束位置
|
||||||
}
|
}
|
||||||
this.scrollTop = 0;
|
|
||||||
}
|
}
|
||||||
//如果传currentIndex,会判断该条数据是否在可视区域,如果没有的话,则重新计算startIndex和endIndex
|
//如果传currentIndex,会判断该条数据是否在可视区域,如果没有的话,则重新计算startIndex和endIndex
|
||||||
if(currentIndex!==-1 && currentIndex !== this.currentIndex){
|
if(currentIndex!==-1 && currentIndex !== this.currentIndex){
|
||||||
|
|
Loading…
Reference in New Issue