Merge branch 'master' of github.com:tinper-bee/bee-table
This commit is contained in:
jonyshi
commit
043150368d
20
CHANGELOG.md
20
CHANGELOG.md
|
|
@ -1,3 +1,23 @@
|
|||
<a name="1.6.32"></a>
|
||||
## [1.6.32](https://github.com/tinper-bee/bee-table/compare/v1.6.31...v1.6.32) (2019-01-23)
|
||||
|
||||
|
||||
|
||||
<a name="1.6.31"></a>
|
||||
## [1.6.31](https://github.com/tinper-bee/bee-table/compare/v1.6.30...v1.6.31) (2019-01-17)
|
||||
|
||||
|
||||
|
||||
<a name="1.6.30"></a>
|
||||
## [1.6.30](https://github.com/tinper-bee/bee-table/compare/v1.6.29...v1.6.30) (2019-01-16)
|
||||
|
||||
|
||||
|
||||
<a name="1.6.29"></a>
|
||||
## [1.6.29](https://github.com/tinper-bee/bee-table/compare/v1.6.28...v1.6.29) (2019-01-11)
|
||||
|
||||
|
||||
|
||||
<a name="1.6.28"></a>
|
||||
## [1.6.28](https://github.com/tinper-bee/bee-table/compare/v1.6.27...v1.6.28) (2019-01-09)
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ var _beeIcon = require('bee-icon');
|
|||
|
||||
var _beeIcon2 = _interopRequireDefault(_beeIcon);
|
||||
|
||||
var _i18n = require('./i18n');
|
||||
var _i18n = require('./lib/i18n');
|
||||
|
||||
var _i18n2 = _interopRequireDefault(_i18n);
|
||||
|
||||
|
|
|
|||
|
|
@ -191,6 +191,11 @@
|
|||
word-break: break-all; }
|
||||
.u-table tr th:last-child {
|
||||
overflow: hidden; }
|
||||
.u-table tr.filterable th {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px; }
|
||||
.u-table tr.filterable th .filterContext {
|
||||
height: 35px; }
|
||||
.u-table-row-hover {
|
||||
background: #e3f2fd; }
|
||||
.u-table-scroll {
|
||||
|
|
@ -443,6 +448,9 @@
|
|||
.u-table-row-fixed-columns-in-body {
|
||||
display: none;
|
||||
pointer-events: none; }
|
||||
.u-table .u-checkbox {
|
||||
height: 16px;
|
||||
line-height: 16px; }
|
||||
|
||||
.u-table:focus {
|
||||
outline: none;
|
||||
|
|
@ -626,7 +634,3 @@
|
|||
height: 32px;
|
||||
padding: 0px 16px 0 16px;
|
||||
cursor: pointer; }
|
||||
|
||||
.u-checkbox {
|
||||
height: 16px;
|
||||
line-height: 16px; }
|
||||
|
|
|
|||
|
|
@ -284,7 +284,7 @@ var Table = function (_Component) {
|
|||
}
|
||||
//适配lazyload
|
||||
if (nextProps.scrollTop) {
|
||||
this.refs.bodyTable.scrollTop = nextProps.scrollTop;
|
||||
// this.refs.bodyTable.scrollTop = nextProps.scrollTop;
|
||||
this.scrollTop = nextProps.scrollTop;
|
||||
}
|
||||
if (!nextProps.originWidth) {
|
||||
|
|
@ -308,6 +308,7 @@ var Table = function (_Component) {
|
|||
if (this.scrollTop) {
|
||||
this.refs.fixedColumnsBodyLeft && (this.refs.fixedColumnsBodyLeft.scrollTop = this.scrollTop);
|
||||
this.refs.fixedColumnsBodyRight && (this.refs.fixedColumnsBodyRight.scrollTop = this.scrollTop);
|
||||
this.refs.bodyTable.scrollTop = this.scrollTop;
|
||||
this.scrollTop = 0;
|
||||
}
|
||||
};
|
||||
|
|
@ -511,7 +512,8 @@ var Table = function (_Component) {
|
|||
drgHover: column.drgHover,
|
||||
fixed: column.fixed,
|
||||
width: width,
|
||||
dataindex: column.dataIndex
|
||||
dataindex: column.dataIndex,
|
||||
textAlign: column.textAlign
|
||||
};
|
||||
if (column.onHeadCellClick) {
|
||||
cell.onClick = column.onHeadCellClick;
|
||||
|
|
@ -1132,7 +1134,8 @@ var Table = function (_Component) {
|
|||
_props8$scroll = _props8.scroll,
|
||||
scroll = _props8$scroll === undefined ? {} : _props8$scroll,
|
||||
clsPrefix = _props8.clsPrefix,
|
||||
handleScroll = _props8.handleScroll;
|
||||
handleScrollY = _props8.handleScrollY,
|
||||
handleScrollX = _props8.handleScrollX;
|
||||
var _refs = this.refs,
|
||||
headTable = _refs.headTable,
|
||||
bodyTable = _refs.bodyTable,
|
||||
|
|
@ -1161,6 +1164,9 @@ var Table = function (_Component) {
|
|||
if (position) {
|
||||
(0, _componentClasses2["default"])(this.contentTable).remove(new RegExp('^' + clsPrefix + '-scroll-position-.+$')).add(clsPrefix + '-scroll-position-' + position);
|
||||
}
|
||||
if (handleScrollX) {
|
||||
(0, _utils.debounce)(handleScrollX(e.target.scrollLeft, this.treeType), 300);
|
||||
}
|
||||
}
|
||||
// console.log('lastScrollTop--'+this.lastScrollTop+'--eventScrollTop--'+ e.target.scrollTop);
|
||||
if (scroll.y && this.lastScrollTop != e.target.scrollTop) {
|
||||
|
|
@ -1174,8 +1180,8 @@ var Table = function (_Component) {
|
|||
bodyTable.scrollTop = e.target.scrollTop;
|
||||
}
|
||||
this.lastScrollTop = e.target.scrollTop;
|
||||
if (handleScroll) {
|
||||
(0, _utils.debounce)(handleScroll(this.lastScrollTop, this.treeType), 300);
|
||||
if (handleScrollY) {
|
||||
(0, _utils.debounce)(handleScrollY(this.lastScrollTop, this.treeType), 300);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1228,7 +1234,7 @@ var Table = function (_Component) {
|
|||
{ className: className, style: props.style, ref: function ref(el) {
|
||||
return _this6.contentTable = el;
|
||||
},
|
||||
tabIndex: props.tabIndex ? props.tabIndex : '0' },
|
||||
tabIndex: props.focusable && (props.tabIndex ? props.tabIndex : '0') },
|
||||
this.getTitle(),
|
||||
_react2["default"].createElement(
|
||||
'div',
|
||||
|
|
|
|||
|
|
@ -111,6 +111,9 @@ var TableCell = function (_Component) {
|
|||
if (column.fixed && !fixed) {
|
||||
className = className + (' ' + clsPrefix + '-fixed-columns-in-body');
|
||||
}
|
||||
if (column.textAlign) {
|
||||
className = className + (' text-' + column.textAlign);
|
||||
}
|
||||
return _react2["default"].createElement(
|
||||
'td',
|
||||
{
|
||||
|
|
|
|||
|
|
@ -614,7 +614,6 @@ var TableHeader = function (_Component) {
|
|||
|
||||
|
||||
var attr = dragborder ? { id: "u-table-drag-thead-" + this.theadKey } : {};
|
||||
|
||||
return _react2["default"].createElement(
|
||||
"thead",
|
||||
_extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll", ref: function ref(_thead) {
|
||||
|
|
@ -623,7 +622,7 @@ var TableHeader = function (_Component) {
|
|||
rows.map(function (row, index) {
|
||||
return _react2["default"].createElement(
|
||||
"tr",
|
||||
{ style: rowStyle, className: filterable && index == rows.length - 1 ? 'filterable' : '' },
|
||||
{ key: index, style: rowStyle, className: filterable && index == rows.length - 1 ? 'filterable' : '' },
|
||||
row.map(function (da, columIndex, arr) {
|
||||
var thHover = da.drgHover ? " " + clsPrefix + "-thead th-drag-hover" : "";
|
||||
delete da.drgHover;
|
||||
|
|
@ -637,13 +636,27 @@ var TableHeader = function (_Component) {
|
|||
if (lastShowIndex == columIndex) {
|
||||
canDotDrag = "th-can-not-drag";
|
||||
}
|
||||
var thClassName = "" + da.className ? "" + da.className : '';
|
||||
if (da.textAlign) {
|
||||
thClassName += " text-" + da.textAlign + " ";
|
||||
}
|
||||
delete da.textAlign;
|
||||
var keyTemp = {};
|
||||
//避免key为undefined
|
||||
// if(da.dataindex && da.key ===undefined ){
|
||||
keyTemp.key = da.key || da.dataindex || index + '-' + columIndex;
|
||||
|
||||
// }
|
||||
if (filterable && index == rows.length - 1) {
|
||||
da.children = _this2.filterRenderType(da["filtertype"], da.dataindex, columIndex);
|
||||
if (da.key === undefined) {
|
||||
keyTemp.key = keyTemp.key + '-filterable';
|
||||
}
|
||||
delete da.filterdropdownfocus;
|
||||
}
|
||||
|
||||
var thDefaultObj = {};
|
||||
var thClassName = "" + da.className ? "" + da.className : '';
|
||||
|
||||
if (draggable) {
|
||||
thClassName += clsPrefix + "-thead th-drag " + thHover + " ";
|
||||
}
|
||||
|
|
@ -651,10 +664,12 @@ var TableHeader = function (_Component) {
|
|||
thClassName += clsPrefix + "-thead-th " + canDotDrag;
|
||||
}
|
||||
thClassName += " " + fixedStyle;
|
||||
|
||||
if (!da.fixed) {
|
||||
|
||||
return _react2["default"].createElement(
|
||||
"th",
|
||||
_extends({}, da, { key: 'table-header-th-' + da.dataindex, className: thClassName, "data-th-fixed": da.fixed,
|
||||
_extends({}, da, keyTemp, { className: thClassName, "data-th-fixed": da.fixed,
|
||||
"data-line-key": da.key, "data-line-index": columIndex, "data-th-width": da.width }),
|
||||
da.children,
|
||||
dragborder ? _react2["default"].createElement(
|
||||
|
|
@ -669,13 +684,12 @@ var TableHeader = function (_Component) {
|
|||
);
|
||||
} else {
|
||||
thDefaultObj = _extends({}, da, {
|
||||
className: da.className + " " + fixedStyle,
|
||||
key: columIndex
|
||||
className: thClassName + " " + fixedStyle
|
||||
});
|
||||
da.onClick ? thDefaultObj.onClick = function (e) {
|
||||
da.onClick(da, e);
|
||||
} : "";
|
||||
return _react2["default"].createElement("th", _extends({}, thDefaultObj, { "data-th-fixed": da.fixed }));
|
||||
return _react2["default"].createElement("th", _extends({}, thDefaultObj, keyTemp, { "data-th-fixed": da.fixed }));
|
||||
}
|
||||
})
|
||||
);
|
||||
|
|
|
|||
|
|
@ -128,13 +128,8 @@ var TableRow = function (_Component) {
|
|||
TableRow.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
|
||||
if (this.props.treeType) {
|
||||
this.setRowParentIndex();
|
||||
this.setRowHeight();
|
||||
// if(this.props.fixedIndex!== prevProps.fixedIndex){
|
||||
// this.setRowHeight()
|
||||
// }
|
||||
} else if (this.props.index !== prevProps.index) {
|
||||
this.setRowHeight();
|
||||
}
|
||||
this.setRowHeight();
|
||||
};
|
||||
|
||||
TableRow.prototype.componentWillUnmount = function componentWillUnmount() {
|
||||
|
|
@ -234,7 +229,8 @@ var TableRow = function (_Component) {
|
|||
indent = _props9.indent,
|
||||
indentSize = _props9.indentSize,
|
||||
isHiddenExpandIcon = _props9.isHiddenExpandIcon,
|
||||
fixed = _props9.fixed;
|
||||
fixed = _props9.fixed,
|
||||
hoverKey = _props9.hoverKey;
|
||||
|
||||
var showSum = false;
|
||||
var className = this.props.className;
|
||||
|
|
@ -279,7 +275,7 @@ var TableRow = function (_Component) {
|
|||
indent: indent,
|
||||
index: index,
|
||||
column: columns[i],
|
||||
key: columns[i].key,
|
||||
key: columns[i].key || columns[i].dataIndex || i,
|
||||
fixed: fixed,
|
||||
showSum: showSum,
|
||||
expandIcon: isColumnHaveExpandIcon ? expandIcon : null
|
||||
|
|
@ -289,7 +285,6 @@ var TableRow = function (_Component) {
|
|||
if (!visible) {
|
||||
style.display = 'none';
|
||||
}
|
||||
|
||||
return _react2["default"].createElement(
|
||||
'tr',
|
||||
{
|
||||
|
|
@ -298,8 +293,9 @@ var TableRow = function (_Component) {
|
|||
onMouseEnter: this.onMouseEnter,
|
||||
onMouseLeave: this.onMouseLeave,
|
||||
className: clsPrefix + ' ' + className + ' ' + clsPrefix + '-level-' + indent,
|
||||
style: style,
|
||||
ref: this.bindElement
|
||||
style: style
|
||||
// key={hoverKey}
|
||||
, ref: this.bindElement
|
||||
},
|
||||
cells.length > 0 ? cells : _react2["default"].createElement('td', null)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -16,8 +16,6 @@ var _propTypes = require("prop-types");
|
|||
|
||||
var _propTypes2 = _interopRequireDefault(_propTypes);
|
||||
|
||||
var _utils = require("../utils");
|
||||
|
||||
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; }
|
||||
|
|
@ -69,40 +67,76 @@ function bigData(Table) {
|
|||
}
|
||||
|
||||
BigData.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.scroll.y !== this.props.scroll.y) {
|
||||
var props = this.props;
|
||||
var currentIndex = nextProps.currentIndex,
|
||||
data = nextProps.data;
|
||||
|
||||
var _this = this,
|
||||
dataLen = data.length;
|
||||
if (nextProps.scroll.y !== props.scroll.y) {
|
||||
var rowHeight = nextProps.height ? nextProps.height : defaultHeight;
|
||||
var scrollY = nextProps.scroll.y ? parseInt(nextProps.scroll.y) : 0;
|
||||
this.rowsInView = scrollY ? Math.ceil(scrollY / rowHeight) : 20;
|
||||
this.loadCount = props.loadBuffer ? this.rowsInView + props.loadBuffer * 2 : 26; //一次加载多少数据
|
||||
this.currentIndex = 0;
|
||||
this.startIndex = this.currentIndex; //数据开始位置
|
||||
this.endIndex = this.currentIndex + this.loadCount; //数据结束位置
|
||||
_this.rowsInView = scrollY ? Math.ceil(scrollY / rowHeight) : 20;
|
||||
_this.loadCount = props.loadBuffer ? _this.rowsInView + props.loadBuffer * 2 : 26; //一次加载多少数据
|
||||
_this.currentIndex = 0;
|
||||
_this.startIndex = _this.currentIndex; //数据开始位置
|
||||
_this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置
|
||||
if (_this.endIndex > dataLen) {
|
||||
_this.endIndex = dataLen;
|
||||
}
|
||||
}
|
||||
if (nextProps.data !== props.data) {
|
||||
_this.computeCachedRowParentIndex(nextProps.data);
|
||||
}
|
||||
//如果传currentIndex，会判断该条数据是否在可视区域，如果没有的话，则重新计算startIndex和endIndex
|
||||
if (currentIndex !== -1 && currentIndex !== this.currentIndex) {
|
||||
_this.setStartAndEndIndex(currentIndex, dataLen);
|
||||
}
|
||||
};
|
||||
|
||||
BigData.prototype.componentDidMount = function componentDidMount() {
|
||||
var _this3 = this;
|
||||
var data = this.props.data;
|
||||
|
||||
var isTreeType = this.checkIsTreeType();
|
||||
if (isTreeType) {
|
||||
var data = this.props.data;
|
||||
this.computeCachedRowParentIndex(data);
|
||||
};
|
||||
|
||||
data.forEach(function (item, index) {
|
||||
_this3.firstLevelKey[index] = _this3.getRowKey(item, index);
|
||||
_this3.cachedRowParentIndex[treeTypeIndex] = index;
|
||||
//保存所有的keys跟小标对应起来
|
||||
_this3.keys[treeTypeIndex] = _this3.getRowKey(item, index);
|
||||
treeTypeIndex++;
|
||||
if (item.children) {
|
||||
_this3.getData(item.children, index);
|
||||
}
|
||||
});
|
||||
/**
|
||||
*设置data中每个元素的parentIndex
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
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) {
|
||||
var rowKey = this.props.rowKey;
|
||||
var key = typeof rowKey === 'function' ? rowKey(record, index) : record[rowKey];
|
||||
(0, _utils.warningOnce)(key !== undefined, 'Each record in table should have a unique `key` prop,' + 'or set `rowKey` to an unique primary key.');
|
||||
var key = typeof rowKey === "function" ? rowKey(record, index) : record[rowKey];
|
||||
|
||||
return key;
|
||||
};
|
||||
/**
|
||||
|
|
@ -127,14 +161,14 @@ function bigData(Table) {
|
|||
};
|
||||
|
||||
BigData.prototype.getData = function getData(data, parentIndex) {
|
||||
var _this4 = this;
|
||||
var _this3 = this;
|
||||
|
||||
data.forEach(function (subItem, subIndex) {
|
||||
_this4.cachedRowParentIndex[treeTypeIndex] = parentIndex;
|
||||
_this4.keys[treeTypeIndex] = _this4.getRowKey(subItem, subIndex);
|
||||
_this3.cachedRowParentIndex[treeTypeIndex] = parentIndex;
|
||||
_this3.keys[treeTypeIndex] = _this3.getRowKey(subItem, subIndex);
|
||||
treeTypeIndex++;
|
||||
if (subItem.children) {
|
||||
_this4.getData(subItem.children, parentIndex);
|
||||
_this3.getData(subItem.children, parentIndex);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
@ -192,7 +226,7 @@ function bigData(Table) {
|
|||
};
|
||||
|
||||
BigData.prototype.setRowParentIndex = function setRowParentIndex(parentIndex, index) {}
|
||||
// this.cachedRowParentIndex[index] = parentIndex;
|
||||
// this.cachedRowParentIndex[index] = parentIndex;
|
||||
|
||||
/**
|
||||
*
|
||||
|
|
@ -258,7 +292,7 @@ function bigData(Table) {
|
|||
return _react2["default"].createElement(Table, _extends({}, this.props, {
|
||||
data: data.slice(startIndex, endIndex),
|
||||
lazyLoad: lazyLoad,
|
||||
handleScroll: this.handleScroll,
|
||||
handleScrollY: this.handleScrollY,
|
||||
scrollTop: scrollTop,
|
||||
setRowHeight: this.setRowHeight,
|
||||
setRowParentIndex: this.setRowParentIndex,
|
||||
|
|
@ -272,18 +306,38 @@ function bigData(Table) {
|
|||
}(_react.Component), _class.defaultProps = {
|
||||
data: [],
|
||||
loadBuffer: 5,
|
||||
rowKey: 'key'
|
||||
rowKey: "key",
|
||||
onExpand: function onExpand() {},
|
||||
|
||||
scroll: {},
|
||||
currentIndex: -1
|
||||
}, _class.propTypes = {
|
||||
loadBuffer: _propTypes2["default"].number
|
||||
}, _initialiseProps = function _initialiseProps() {
|
||||
var _this5 = this;
|
||||
var _this4 = this;
|
||||
|
||||
this.handleScroll = function (nextScrollTop, treeType) {
|
||||
this.computeCachedRowParentIndex = function (data) {
|
||||
var isTreeType = _this4.checkIsTreeType();
|
||||
if (isTreeType) {
|
||||
data.forEach(function (item, index) {
|
||||
_this4.firstLevelKey[index] = _this4.getRowKey(item, index);
|
||||
_this4.cachedRowParentIndex[treeTypeIndex] = index;
|
||||
//保存所有的keys跟小标对应起来
|
||||
_this4.keys[treeTypeIndex] = _this4.getRowKey(item, index);
|
||||
treeTypeIndex++;
|
||||
if (item.children) {
|
||||
_this4.getData(item.children, index);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
this.handleScrollY = function (nextScrollTop, treeType) {
|
||||
//树表逻辑
|
||||
// 关键点是动态的获取startIndex和endIndex
|
||||
// 法子一：子节点也看成普通tr，最开始需要设置一共有多少行，哪行显示哪行不显示如何确定
|
||||
// 动态取start = current+buffer对应的父节点、end = start+loadCount+row的height为0的行数 展开节点的下一个节点作为end值，
|
||||
var _this = _this5;
|
||||
var _this = _this4;
|
||||
var _this$props = _this.props,
|
||||
data = _this$props.data,
|
||||
height = _this$props.height,
|
||||
|
|
@ -332,12 +386,12 @@ function bigData(Table) {
|
|||
var temp = nextScrollTop;
|
||||
var currentKey = void 0;
|
||||
while (temp > 0) {
|
||||
var currentRowHeight = _this5.cachedRowHeight[index];
|
||||
var currentRowHeight = _this4.cachedRowHeight[index];
|
||||
if (currentRowHeight === undefined) {
|
||||
if (_this5.treeType) {
|
||||
currentKey = _this5.keys[index];
|
||||
if (_this4.treeType) {
|
||||
currentKey = _this4.keys[index];
|
||||
currentRowHeight = 0;
|
||||
if (_this5.firstLevelKey.indexOf(currentKey) >= 0 || _this5.expandChildRowKeys.indexOf(currentKey) >= 0) {
|
||||
if (_this4.firstLevelKey.indexOf(currentKey) >= 0 || _this4.expandChildRowKeys.indexOf(currentKey) >= 0) {
|
||||
currentRowHeight = rowHeight;
|
||||
}
|
||||
} else {
|
||||
|
|
@ -362,9 +416,9 @@ function bigData(Table) {
|
|||
if (viewHeight) {
|
||||
//有时滚动过快时this.cachedRowHeight[rowsInView + index]为undifined
|
||||
|
||||
while (rowsHeight < viewHeight && tempIndex < _this5.cachedRowHeight.length) {
|
||||
if (_this5.cachedRowHeight[tempIndex]) {
|
||||
rowsHeight += _this5.cachedRowHeight[tempIndex];
|
||||
while (rowsHeight < viewHeight && tempIndex < _this4.cachedRowHeight.length) {
|
||||
if (_this4.cachedRowHeight[tempIndex]) {
|
||||
rowsHeight += _this4.cachedRowHeight[tempIndex];
|
||||
if (treeType && _this.cachedRowParentIndex[tempIndex] !== tempIndex || !treeType) {
|
||||
rowsInView++;
|
||||
}
|
||||
|
|
@ -376,7 +430,7 @@ function bigData(Table) {
|
|||
index = _this.cachedRowParentIndex[treeIndex];
|
||||
if (index === undefined) {
|
||||
// console.log('index is undefined********'+treeIndex);
|
||||
index = _this5.getParentIndex(treeIndex);
|
||||
index = _this4.getParentIndex(treeIndex);
|
||||
// console.log("getParentIndex****"+index);
|
||||
}
|
||||
}
|
||||
|
|
@ -384,7 +438,6 @@ function bigData(Table) {
|
|||
// 如果rowsInView 小于 缓存的数据则重新render
|
||||
// 向下滚动 下临界值超出缓存的endIndex则重新渲染
|
||||
if (rowsInView + index > endIndex - rowDiff && isOrder) {
|
||||
|
||||
startIndex = index - loadBuffer > 0 ? index - loadBuffer : 0;
|
||||
endIndex = startIndex + loadCount;
|
||||
//树状结构则根据当前的节点重新计算startIndex和endIndex
|
||||
|
|
@ -401,10 +454,10 @@ function bigData(Table) {
|
|||
if (endIndex > data.length) {
|
||||
endIndex = data.length;
|
||||
}
|
||||
if (startIndex !== _this5.startIndex || endIndex !== _this5.endIndex) {
|
||||
_this5.startIndex = startIndex;
|
||||
_this5.endIndex = endIndex;
|
||||
_this5.setState({ needRender: !needRender });
|
||||
if (startIndex !== _this4.startIndex || endIndex !== _this4.endIndex) {
|
||||
_this4.startIndex = startIndex;
|
||||
_this4.endIndex = endIndex;
|
||||
_this4.setState({ needRender: !needRender });
|
||||
}
|
||||
// console.log(
|
||||
// "===================",
|
||||
|
|
@ -419,10 +472,10 @@ function bigData(Table) {
|
|||
if (startIndex < 0) {
|
||||
startIndex = 0;
|
||||
}
|
||||
if (startIndex !== _this5.startIndex || endIndex !== _this5.endIndex) {
|
||||
_this5.startIndex = startIndex;
|
||||
_this5.endIndex = _this5.startIndex + loadCount;
|
||||
_this5.setState({ needRender: !needRender });
|
||||
if (startIndex !== _this4.startIndex || endIndex !== _this4.endIndex) {
|
||||
_this4.startIndex = startIndex;
|
||||
_this4.endIndex = _this4.startIndex + loadCount;
|
||||
_this4.setState({ needRender: !needRender });
|
||||
}
|
||||
// console.log(
|
||||
// "**index**" + index,
|
||||
|
|
@ -435,7 +488,7 @@ function bigData(Table) {
|
|||
};
|
||||
|
||||
this.onExpand = function (expandState, record) {
|
||||
var _this = _this5;
|
||||
var _this = _this4;
|
||||
// 展开
|
||||
if (expandState) {
|
||||
record.children && record.children.forEach(function (item, index) {
|
||||
|
|
@ -449,6 +502,8 @@ function bigData(Table) {
|
|||
}), 1);
|
||||
});
|
||||
}
|
||||
|
||||
_this.props.onExpand(expandState, record);
|
||||
};
|
||||
}, _temp;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -57,21 +57,29 @@ function dragColumn(Table) {
|
|||
dragTarg = data.dragTarg;
|
||||
var columns = _this.state.columns;
|
||||
|
||||
var dragSourceColum = columns.find(function (da, i) {
|
||||
var sourceIndex = -1,
|
||||
targetIndex = -1;
|
||||
|
||||
sourceIndex = columns.findIndex(function (da, i) {
|
||||
return da.key == dragSource.key;
|
||||
});
|
||||
var dragTargColum = columns.find(function (da, i) {
|
||||
targetIndex = columns.findIndex(function (da, i) {
|
||||
return da.key == dragTarg.key;
|
||||
});
|
||||
for (var index = 0; index < columns.length; index++) {
|
||||
var da = columns[index];
|
||||
if (da.key === dragSource.key) {
|
||||
columns[index] = dragTargColum;
|
||||
}
|
||||
if (da.key === dragTarg.key) {
|
||||
columns[index] = dragSourceColum;
|
||||
}
|
||||
// for (let index = 0; index < columns.length; index++) {
|
||||
// const da = columns[index];
|
||||
// if(da.key === dragSource.key){
|
||||
// columns[index] = dragTargColum;
|
||||
// }
|
||||
// if(da.key === dragTarg.key){
|
||||
// columns[index] = dragSourceColum;
|
||||
// }
|
||||
// }
|
||||
// 向前移动
|
||||
if (targetIndex < sourceIndex) {
|
||||
targetIndex = targetIndex + 1;
|
||||
}
|
||||
columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
|
||||
_this.setState({
|
||||
columns: cloneDeep(columns)
|
||||
});
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ var _beeIcon2 = _interopRequireDefault(_beeIcon);
|
|||
|
||||
var _util = require("./util");
|
||||
|
||||
var _i18n = require("../i18n");
|
||||
var _i18n = require("./i18n");
|
||||
|
||||
var _i18n2 = _interopRequireDefault(_i18n);
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|||
* @param {*} Icon
|
||||
*/
|
||||
function sort(Table, Icon) {
|
||||
var _class, _temp;
|
||||
var _class, _temp, _initialiseProps;
|
||||
|
||||
var IconType = [{
|
||||
'type': 'flat',
|
||||
|
|
@ -50,214 +50,20 @@ function sort(Table, Icon) {
|
|||
function SortTable(props) {
|
||||
_classCallCheck(this, SortTable);
|
||||
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
var _this2 = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
|
||||
_this.getOrderNum = function () {
|
||||
var orderNum = 0;
|
||||
_this.state.columns.forEach(function (item, index) {
|
||||
if (item.order == 'ascend' || item.order == 'descend') {
|
||||
orderNum++;
|
||||
}
|
||||
});
|
||||
return orderNum ? orderNum : 1;
|
||||
};
|
||||
_initialiseProps.call(_this2);
|
||||
|
||||
_this.changeOrderNum = function (column) {
|
||||
var columns = _this.state.columns;
|
||||
var flatColumns = [];
|
||||
_this2._toFlatColumn(props.columns, -1, flatColumns);
|
||||
_this2.state = { data: _this2.props.data, columns: props.columns, flatColumns: flatColumns };
|
||||
|
||||
columns.forEach(function (col) {
|
||||
if (col.orderNum > column.orderNum) {
|
||||
col.orderNum--;
|
||||
}
|
||||
if (column.key == col.key) {
|
||||
col.orderNum = '';
|
||||
}
|
||||
});
|
||||
_this.setState({ columns: columns });
|
||||
};
|
||||
|
||||
_this.getOrderCols = function (columns) {
|
||||
var orderCols = [];
|
||||
columns.forEach(function (item) {
|
||||
if (item.order == 'ascend' || item.order == 'descend') {
|
||||
orderCols.push({ order: item.order,
|
||||
field: item.dataIndex,
|
||||
orderNum: item.orderNum
|
||||
});
|
||||
}
|
||||
});
|
||||
return orderCols;
|
||||
};
|
||||
|
||||
_this._sortBy = function (pre, after, orderCols, orderColslen, currentIndex) {
|
||||
var preKey = pre[orderCols[currentIndex].key];
|
||||
var afterKey = after[orderCols[currentIndex].key];
|
||||
if (preKey == afterKey && currentIndex + 1 <= orderColslen) {
|
||||
return _this._sortBy(pre, after, orderCols, orderColslen, currentIndex + 1);
|
||||
}
|
||||
if (orderCols[currentIndex].order == 'ascend') {
|
||||
return preKey - afterKey;
|
||||
} else {
|
||||
return afterKey - preKey;
|
||||
}
|
||||
};
|
||||
|
||||
_this.multiSort = function (columns) {
|
||||
var _this$state = _this.state,
|
||||
data = _this$state.data,
|
||||
oldData = _this$state.oldData;
|
||||
|
||||
var self = _this;
|
||||
var orderCols = {},
|
||||
orderColslen = 0;
|
||||
columns.forEach(function (item) {
|
||||
if (item.orderNum) {
|
||||
orderColslen++;
|
||||
orderCols[item.orderNum] = item;
|
||||
}
|
||||
});
|
||||
if (orderColslen > 0) {
|
||||
data = data.sort(function (a, b) {
|
||||
return self._sortBy(a, b, orderCols, orderColslen, 1);
|
||||
});
|
||||
} else {
|
||||
data = oldData.concat();
|
||||
}
|
||||
return data;
|
||||
};
|
||||
|
||||
_this.toggleSortOrder = function (order, column) {
|
||||
var _this$state2 = _this.state,
|
||||
data = _this$state2.data,
|
||||
oldData = _this$state2.oldData,
|
||||
columns = _this$state2.columns;
|
||||
var sort = _this.props.sort;
|
||||
|
||||
var seleObj = void 0;
|
||||
if (!oldData) {
|
||||
oldData = data.concat();
|
||||
}
|
||||
//单列排序，清空其他列的排序
|
||||
if (sort.mode == 'single') {
|
||||
columns.forEach(function (da) {
|
||||
if (da.key == column.key) {
|
||||
seleObj = da;
|
||||
} else {
|
||||
if (da.order) {
|
||||
da.order = 'flatscend';
|
||||
}
|
||||
}
|
||||
});
|
||||
seleObj.order = order;
|
||||
//通过后端请求
|
||||
if (sort.backSource && typeof sort.sortFun === "function") {
|
||||
//获取排序的字段和方式
|
||||
sort.sortFun([{
|
||||
order: order,
|
||||
field: seleObj.dataIndex
|
||||
}]);
|
||||
} else {
|
||||
if (order === "ascend") {
|
||||
data = data.sort(function (a, b) {
|
||||
return column.sorter(a, b);
|
||||
});
|
||||
} else if (order === "descend") {
|
||||
data = data.sort(function (a, b) {
|
||||
return column.sorter(b, a);
|
||||
});
|
||||
} else {
|
||||
data = oldData.concat();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
seleObj = columns.find(function (da) {
|
||||
return da.key == column.key;
|
||||
});
|
||||
seleObj.order = order;
|
||||
if (order === "flatscend") {
|
||||
_this.changeOrderNum(column);
|
||||
}
|
||||
if (!seleObj.orderNum && (order == 'ascend' || order == 'descend')) {
|
||||
seleObj.orderNum = _this.getOrderNum();
|
||||
}
|
||||
if (sort.backSource && typeof sort.sortFun === "function") {
|
||||
sort.sortFun(_this.getOrderCols(columns));
|
||||
} else {
|
||||
data = _this.multiSort(columns);
|
||||
}
|
||||
}
|
||||
_this.setState({
|
||||
data: data,
|
||||
oldData: oldData,
|
||||
columns: columns
|
||||
});
|
||||
};
|
||||
|
||||
_this.renderColumnsDropdown = function (columns) {
|
||||
var prefixCls = "bee-table";
|
||||
var mode = _this.props.sort.mode;
|
||||
|
||||
return columns.map(function (originColumn) {
|
||||
var iconTypeIndex = 0;
|
||||
var column = _extends({}, originColumn);
|
||||
var sorterClass = 'flat';
|
||||
|
||||
if (column.order === "ascend") {
|
||||
iconTypeIndex = 1;
|
||||
sorterClass = 'up';
|
||||
} else if (column.order === "descend") {
|
||||
iconTypeIndex = 2;
|
||||
sorterClass = 'down';
|
||||
}
|
||||
|
||||
var sortButton = void 0;
|
||||
if (column.sorter) {
|
||||
//大于0说明不是升序就是降序，判断orderNum有没有值，没有值赋值
|
||||
if (iconTypeIndex > 0 && !column.orderNum && mode == 'multiple') {
|
||||
column.orderNum = _this.getOrderNum();
|
||||
}
|
||||
sortButton = _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: prefixCls + '-column-sorter' },
|
||||
_react2["default"].createElement(
|
||||
'span',
|
||||
{
|
||||
className: prefixCls + '-column-sorter-' + sorterClass,
|
||||
onClick: function onClick() {
|
||||
_this.toggleSortOrder(IconType[iconTypeIndex == 2 ? 0 : iconTypeIndex + 1].order, column);
|
||||
|
||||
if (column.sorterClick) {
|
||||
column.sorterClick(column, IconType[iconTypeIndex].type);
|
||||
}
|
||||
}
|
||||
},
|
||||
_react2["default"].createElement(Icon, { type: IconType[iconTypeIndex].icon }),
|
||||
_react2["default"].createElement(
|
||||
'span',
|
||||
null,
|
||||
column.orderNum
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
column.title = _react2["default"].createElement(
|
||||
'span',
|
||||
null,
|
||||
column.title,
|
||||
sortButton
|
||||
);
|
||||
return column;
|
||||
});
|
||||
};
|
||||
|
||||
_this.state = {
|
||||
data: _this.props.data,
|
||||
columns: props.columns
|
||||
};
|
||||
return _this;
|
||||
return _this2;
|
||||
}
|
||||
|
||||
//默认是前端排序，值为true为后端排序
|
||||
SortTable.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
|
||||
if (nextProps.data !== this.props.data) {
|
||||
this.setState({
|
||||
data: nextProps.data,
|
||||
|
|
@ -265,11 +71,34 @@ function sort(Table, Icon) {
|
|||
});
|
||||
}
|
||||
if (nextProps.columns !== this.props.columns) {
|
||||
this.setState({
|
||||
columns: nextProps.columns
|
||||
});
|
||||
var flatColumns = [];
|
||||
this._toFlatColumn(nextProps.columns, -1, flatColumns);
|
||||
this.setState({ columns: nextProps.columns, flatColumns: flatColumns });
|
||||
}
|
||||
};
|
||||
/**
|
||||
*column扁平化处理，适应多表头避免递归操作
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
SortTable.prototype._toFlatColumn = function _toFlatColumn(columns) {
|
||||
var parentIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1;
|
||||
var flatColumns = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
|
||||
|
||||
var _this = this;
|
||||
var children = [];
|
||||
// const flatColumns = _this.state;
|
||||
columns.forEach(function (item, index) {
|
||||
item.parentIndex = parentIndex;
|
||||
children = item.children;
|
||||
flatColumns.push(item);
|
||||
if (children) {
|
||||
item.children = [];
|
||||
_this._toFlatColumn(children, flatColumns.length - 1, flatColumns);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* column 当前的排序的列
|
||||
|
|
@ -296,17 +125,238 @@ function sort(Table, Icon) {
|
|||
//点击置为“”时，动态的设置相关column的orderNum值。并排序
|
||||
|
||||
|
||||
SortTable.prototype._flatToColumn = function _flatToColumn(flatColumns) {
|
||||
var colLen = flatColumns.length;
|
||||
var parentIndex = void 0,
|
||||
rsColumns = [];
|
||||
//每次渲染需要将父类的children置空，避免重复
|
||||
flatColumns.forEach(function (item) {
|
||||
if (item.children) {
|
||||
item.children = [];
|
||||
}
|
||||
});
|
||||
for (var i = colLen - 1; i >= 0; i--) {
|
||||
parentIndex = flatColumns[i].parentIndex;
|
||||
if (parentIndex >= 0) {
|
||||
flatColumns[parentIndex].children.unshift(flatColumns[i]);
|
||||
}
|
||||
}
|
||||
rsColumns = flatColumns.filter(function (item) {
|
||||
return item.parentIndex == -1;
|
||||
});
|
||||
return rsColumns;
|
||||
};
|
||||
|
||||
SortTable.prototype.render = function render() {
|
||||
var columns = this.renderColumnsDropdown(this.state.columns.concat());
|
||||
var columns = this.renderColumnsDropdown(this.state.flatColumns.concat());
|
||||
return _react2["default"].createElement(Table, _extends({}, this.props, { columns: columns, data: this.state.data }));
|
||||
};
|
||||
|
||||
return SortTable;
|
||||
}(_react.Component), _class.defaultProps = {
|
||||
sort: {
|
||||
mode: 'single',
|
||||
backSource: false //默认是前端排序，值为true为后端排序
|
||||
}
|
||||
}(_react.Component), _class.defaultProps = { sort: { mode: "single", backSource: false } }, _initialiseProps = function _initialiseProps() {
|
||||
var _this3 = this;
|
||||
|
||||
this.getOrderNum = function () {
|
||||
var orderNum = 0;
|
||||
//todo 1
|
||||
_this3.state.flatColumns.forEach(function (item, index) {
|
||||
if (item.order == "ascend" || item.order == "descend") {
|
||||
orderNum++;
|
||||
}
|
||||
});
|
||||
return orderNum ? orderNum : 1;
|
||||
};
|
||||
|
||||
this.changeOrderNum = function (column) {
|
||||
var flatColumns = _this3.state.flatColumns;
|
||||
//todo 2
|
||||
|
||||
flatColumns.forEach(function (col) {
|
||||
if (col.orderNum > column.orderNum) {
|
||||
col.orderNum--;
|
||||
}
|
||||
if (column.key == col.key) {
|
||||
col.orderNum = "";
|
||||
}
|
||||
});
|
||||
_this3.setState({ flatColumns: flatColumns });
|
||||
};
|
||||
|
||||
this.getOrderCols = function (columns) {
|
||||
var orderCols = [];
|
||||
//todo 3
|
||||
columns.forEach(function (item) {
|
||||
if (item.order == "ascend" || item.order == "descend") {
|
||||
orderCols.push({
|
||||
order: item.order,
|
||||
field: item.dataIndex,
|
||||
orderNum: item.orderNum
|
||||
});
|
||||
}
|
||||
});
|
||||
return orderCols;
|
||||
};
|
||||
|
||||
this._sortBy = function (pre, after, orderCols, orderColslen, currentIndex) {
|
||||
var preKey = pre[orderCols[currentIndex].key];
|
||||
var afterKey = after[orderCols[currentIndex].key];
|
||||
if (preKey == afterKey && currentIndex + 1 <= orderColslen) {
|
||||
return _this3._sortBy(pre, after, orderCols, orderColslen, currentIndex + 1);
|
||||
}
|
||||
if (orderCols[currentIndex].order == "ascend") {
|
||||
return preKey - afterKey;
|
||||
} else {
|
||||
return afterKey - preKey;
|
||||
}
|
||||
};
|
||||
|
||||
this.multiSort = function (columns) {
|
||||
var _state = _this3.state,
|
||||
data = _state.data,
|
||||
oldData = _state.oldData;
|
||||
|
||||
var self = _this3;
|
||||
var orderCols = {},
|
||||
orderColslen = 0;
|
||||
//todo 4
|
||||
columns.forEach(function (item) {
|
||||
if (item.orderNum) {
|
||||
orderColslen++;
|
||||
orderCols[item.orderNum] = item;
|
||||
}
|
||||
});
|
||||
if (orderColslen > 0) {
|
||||
data = data.sort(function (a, b) {
|
||||
return self._sortBy(a, b, orderCols, orderColslen, 1);
|
||||
});
|
||||
} else {
|
||||
data = oldData.concat();
|
||||
}
|
||||
return data;
|
||||
};
|
||||
|
||||
this.toggleSortOrder = function (order, column) {
|
||||
var _state2 = _this3.state,
|
||||
data = _state2.data,
|
||||
oldData = _state2.oldData,
|
||||
flatColumns = _state2.flatColumns;
|
||||
var sort = _this3.props.sort;
|
||||
|
||||
var seleObj = void 0;
|
||||
if (!oldData) {
|
||||
oldData = data.concat();
|
||||
}
|
||||
//单列排序，清空其他列的排序
|
||||
if (sort.mode == "single") {
|
||||
//todo 5
|
||||
flatColumns.forEach(function (da) {
|
||||
if (da.key == column.key) {
|
||||
seleObj = da;
|
||||
} else {
|
||||
if (da.order) {
|
||||
da.order = "flatscend";
|
||||
}
|
||||
}
|
||||
});
|
||||
seleObj.order = order;
|
||||
//通过后端请求
|
||||
if (sort.backSource && typeof sort.sortFun === "function") {
|
||||
//获取排序的字段和方式
|
||||
sort.sortFun([{ order: order, field: seleObj.dataIndex }]);
|
||||
} else {
|
||||
if (order === "ascend") {
|
||||
data = data.sort(function (a, b) {
|
||||
return column.sorter(a, b);
|
||||
});
|
||||
} else if (order === "descend") {
|
||||
data = data.sort(function (a, b) {
|
||||
return column.sorter(b, a);
|
||||
});
|
||||
} else {
|
||||
data = oldData.concat();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
seleObj = flatColumns.find(function (da) {
|
||||
return da.key == column.key;
|
||||
});
|
||||
seleObj.order = order;
|
||||
if (order === "flatscend") {
|
||||
_this3.changeOrderNum(column);
|
||||
}
|
||||
if (!seleObj.orderNum && (order == "ascend" || order == "descend")) {
|
||||
seleObj.orderNum = _this3.getOrderNum();
|
||||
}
|
||||
if (sort.backSource && typeof sort.sortFun === "function") {
|
||||
sort.sortFun(_this3.getOrderCols(flatColumns));
|
||||
} else {
|
||||
data = _this3.multiSort(flatColumns);
|
||||
}
|
||||
}
|
||||
_this3.setState({ data: data, oldData: oldData, flatColumns: flatColumns });
|
||||
};
|
||||
|
||||
this.renderColumnsDropdown = function (columns) {
|
||||
var tempColumns = [],
|
||||
rsColumns = [];
|
||||
tempColumns = columns.map(function (originColumn) {
|
||||
var column = _extends({}, originColumn);
|
||||
return _this3.sortColumn(column);
|
||||
});
|
||||
rsColumns = _this3._flatToColumn(tempColumns);
|
||||
return rsColumns;
|
||||
};
|
||||
|
||||
this.sortColumn = function (column) {
|
||||
var mode = _this3.props.sort.mode;
|
||||
|
||||
var prefixCls = "bee-table";
|
||||
var iconTypeIndex = 0;
|
||||
var sorterClass = "flat";
|
||||
|
||||
if (column.order === "ascend") {
|
||||
iconTypeIndex = 1;
|
||||
sorterClass = "up";
|
||||
} else if (column.order === "descend") {
|
||||
iconTypeIndex = 2;
|
||||
sorterClass = "down";
|
||||
}
|
||||
|
||||
var sortButton = void 0;
|
||||
if (column.sorter) {
|
||||
//大于0说明不是升序就是降序，判断orderNum有没有值，没有值赋值
|
||||
if (iconTypeIndex > 0 && !column.orderNum && mode == "multiple") {
|
||||
column.orderNum = _this3.getOrderNum();
|
||||
}
|
||||
sortButton = _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: prefixCls + '-column-sorter' },
|
||||
_react2["default"].createElement(
|
||||
'span',
|
||||
{ className: prefixCls + '-column-sorter-' + sorterClass, onClick: function onClick() {
|
||||
_this3.toggleSortOrder(IconType[iconTypeIndex == 2 ? 0 : iconTypeIndex + 1].order, column);
|
||||
|
||||
if (column.sorterClick) {
|
||||
column.sorterClick(column, IconType[iconTypeIndex].type);
|
||||
}
|
||||
} },
|
||||
_react2["default"].createElement('i', { className: 'uf ' + IconType[iconTypeIndex].icon }),
|
||||
_react2["default"].createElement(
|
||||
'span',
|
||||
null,
|
||||
column.orderNum
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
column.title = _react2["default"].createElement(
|
||||
'span',
|
||||
null,
|
||||
column.title,
|
||||
sortButton
|
||||
);
|
||||
return column;
|
||||
};
|
||||
}, _temp;
|
||||
}
|
||||
module.exports = exports['default'];
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
/**
|
||||
*
|
||||
* @description column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据，c代表比较当前对象的字段名称
|
||||
* @title 列排序
|
||||
*
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -86,7 +86,6 @@ class Demo30 extends Component {
|
|||
<BigDataTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
parentNodeId='parent'
|
||||
scroll={{y:300}}
|
||||
height={40}
|
||||
onRowClick={(record, index, indent) => {
|
||||
|
|
@ -99,4 +98,4 @@ class Demo30 extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default Demo30;
|
||||
export default Demo30;
|
||||
|
|
@ -107,6 +107,7 @@ class Demo33 extends Component {
|
|||
onKeyDown={this.onKeyDown}
|
||||
onTableKeyDown={this.onTableKeyDown}
|
||||
scroll={{ x: "110%", y: 140 }}
|
||||
focusable = {true}
|
||||
/>
|
||||
<input />
|
||||
</div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -8452,6 +8452,11 @@ ul {
|
|||
word-break: break-all; }
|
||||
.u-table tr th:last-child {
|
||||
overflow: hidden; }
|
||||
.u-table tr.filterable th {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px; }
|
||||
.u-table tr.filterable th .filterContext {
|
||||
height: 35px; }
|
||||
.u-table-row-hover {
|
||||
background: #e3f2fd; }
|
||||
.u-table-scroll {
|
||||
|
|
@ -8706,6 +8711,9 @@ ul {
|
|||
.u-table-row-fixed-columns-in-body {
|
||||
display: none;
|
||||
pointer-events: none; }
|
||||
.u-table .u-checkbox {
|
||||
height: 16px;
|
||||
line-height: 16px; }
|
||||
|
||||
.u-table:focus {
|
||||
outline: none;
|
||||
|
|
@ -8890,10 +8898,6 @@ ul {
|
|||
padding: 0px 16px 0 16px;
|
||||
cursor: pointer; }
|
||||
|
||||
.u-checkbox {
|
||||
height: 16px;
|
||||
line-height: 16px; }
|
||||
|
||||
/* FormGroup */
|
||||
/* Navlayout */
|
||||
/* FormGroup */
|
||||
|
|
|
|||
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
|
|
@ -45,7 +45,7 @@ import 'bee-table/build/Table.css';
|
|||
| expandedRowRender | 额外的展开行 | Function(record, index, indent):node | - |
|
||||
| expandIconAsCell | 展开按钮是否单独作为一个单元格 | bool | false |
|
||||
| expandRowByClick | 设置展开行是否通过点击行触发，此参数需要与上面参数搭配使用（默认是通过点击行前面的加号展开行 | bool | false |
|
||||
| footerScroll | 表尾和body是否公用同一个横向滚动条。（ 如果footer中也是一个table组件，并且也具有滚动条，那么也需要加入footerScroll参数。 ） | bool | false |
|
||||
| footerScroll | 表尾和body是否公用同一个横向滚动条。（ 如果footer中也是一个table组件，并且也具有滚动条，那么也需要加入footerScroll参数，内层表格的footerScroll设置成false。 ） | bool | false |
|
||||
| loading | 表格是否加载中 | bool|object(详情可以参考上面示例) | false |
|
||||
| haveExpandIcon | 控制是否显示行展开icon.**注：该参数只有在和expandedRowRender同时使用才生效** | Function(record, index):bool | () =>false |
|
||||
| filterable | 是否开启根据条件来过滤数据 | bool | false
|
||||
|
|
@ -74,7 +74,7 @@ import 'bee-table/build/Table.css';
|
|||
|dataIndex| 显示数据记录的字段|String|-|
|
||||
|width|宽度的特定比例根据列的宽度计算|String/Number|-|
|
||||
|fixed| 当表水平滚动时，此列将被固定：true或'left'或'right'| true/'left'/'right'|-|
|
||||
|sorter|前端列排序方法，只要列上有此属性就说明这列可排序。**注：默认是前端排序**| function|-|
|
||||
|sorter|前端列排序方法，只要列上有此属性就说明这列可排序。**注：默认是前端排序,排序方法书写时注意有些字段可能是undefined的情况，需要转换成0**| function|-|
|
||||
|sorterClick|排序的回调函数|function|-|
|
||||
|render|cell的render函数有三个参数：这个单元格的文本，这行的记录，这行的索引，它返回一个对象：{children：value，props：{colSpan：1，rowSpan：1}} ==>'children'是这个单元格的文本，props是这个单元格的一些设置，可以设置单元格行/列合并|-|
|
||||
|onCellClick|单击列的单元格时调用|Function(row, event)|-|
|
||||
|
|
@ -88,12 +88,14 @@ import 'bee-table/build/Table.css';
|
|||
| filterDropdownType | 下拉条件类型，分为 string 和 number 条件类型 | string | string
|
||||
| filterDropdownIncludeKeys | 能够设置指定的下拉条件项，通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有
|
||||
| filterInputNumberOptions | 数值框接收的props，具体属性参考bee-input-number | object | null
|
||||
| textAlign | 内容对齐方式，默认是左对齐（'left、right、center'） | string |
|
||||
|
||||
|
||||
## 快捷键API
|
||||
|
||||
| 快捷键 | 快捷键说明 | 类型 | 默认值 |
|
||||
| --- | :--- | --- |--- |
|
||||
| focusable | 是否开启快捷键功能 | bool | -
|
||||
| onKeyTab | tab快捷键，可以处理默认选中第一条数据 | function| -
|
||||
| onKeyUp | ↑(上箭) 快捷键，可以处理table的上一条数据 | function| -
|
||||
| onKeyDown | ↓(下箭)快捷键，可以处理table的下一条数据 | function| -
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "1.6.28",
|
||||
"version": "1.6.32",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
"bee-input-number": "^1.1.15",
|
||||
"bee-loading": "^1.0.3",
|
||||
"bee-locale": "0.0.11",
|
||||
"bee-menus": "^1.0.7",
|
||||
"bee-menus": "1.0.7",
|
||||
"bee-modal": "^1.0.9",
|
||||
"bee-popover": "^1.0.2",
|
||||
"bee-select": "^1.0.21",
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import Dropdown from 'bee-dropdown';
|
|||
import Menu from 'bee-menus';
|
||||
import Button from 'bee-button';
|
||||
import Icon from 'bee-icon';
|
||||
import i18n from './i18n';
|
||||
import i18n from './lib/i18n';
|
||||
import { getComponentLocale } from 'bee-locale/build/tool';
|
||||
const { Item } = Menu;
|
||||
|
||||
|
|
|
|||
21
src/Table.js
21
src/Table.js
|
|
@ -184,7 +184,7 @@ class Table extends Component {
|
|||
}
|
||||
//适配lazyload
|
||||
if(nextProps.scrollTop){
|
||||
this.refs.bodyTable.scrollTop = nextProps.scrollTop;
|
||||
// this.refs.bodyTable.scrollTop = nextProps.scrollTop;
|
||||
this.scrollTop = nextProps.scrollTop;
|
||||
}
|
||||
if (!nextProps.originWidth) {
|
||||
|
|
@ -209,6 +209,7 @@ class Table extends Component {
|
|||
if(this.scrollTop){
|
||||
this.refs.fixedColumnsBodyLeft && ( this.refs.fixedColumnsBodyLeft.scrollTop = this.scrollTop);
|
||||
this.refs.fixedColumnsBodyRight && ( this.refs.fixedColumnsBodyRight.scrollTop = this.scrollTop);
|
||||
this.refs.bodyTable.scrollTop = this.scrollTop;
|
||||
this.scrollTop = 0;
|
||||
}
|
||||
|
||||
|
|
@ -310,6 +311,8 @@ class Table extends Component {
|
|||
'or set `rowKey` to an unique primary key.'
|
||||
);
|
||||
return key;
|
||||
|
||||
|
||||
}
|
||||
|
||||
getExpandedRows() {
|
||||
|
|
@ -392,7 +395,8 @@ class Table extends Component {
|
|||
drgHover: column.drgHover,
|
||||
fixed: column.fixed,
|
||||
width: width,
|
||||
dataindex:column.dataIndex
|
||||
dataindex:column.dataIndex,
|
||||
textAlign:column.textAlign
|
||||
};
|
||||
if (column.onHeadCellClick) {
|
||||
cell.onClick = column.onHeadCellClick;
|
||||
|
|
@ -980,7 +984,7 @@ class Table extends Component {
|
|||
|
||||
handleBodyScroll(e) {
|
||||
|
||||
const { scroll = {},clsPrefix,handleScroll } = this.props;
|
||||
const { scroll = {},clsPrefix,handleScrollY, handleScrollX} = this.props;
|
||||
const { headTable, bodyTable, fixedColumnsBodyLeft, fixedColumnsBodyRight } = this.refs;
|
||||
// Prevent scrollTop setter trigger onScroll event
|
||||
// http://stackoverflow.com/q/1386696
|
||||
|
|
@ -1008,6 +1012,11 @@ class Table extends Component {
|
|||
.remove(new RegExp(`^${clsPrefix}-scroll-position-.+$`))
|
||||
.add(`${clsPrefix}-scroll-position-${position}`);
|
||||
}
|
||||
if(handleScrollX){
|
||||
debounce(
|
||||
handleScrollX(e.target.scrollLeft,this.treeType),
|
||||
300)
|
||||
}
|
||||
}
|
||||
// console.log('lastScrollTop--'+this.lastScrollTop+'--eventScrollTop--'+ e.target.scrollTop);
|
||||
if (scroll.y && this.lastScrollTop != e.target.scrollTop) {
|
||||
|
|
@ -1021,9 +1030,9 @@ class Table extends Component {
|
|||
bodyTable.scrollTop = e.target.scrollTop;
|
||||
}
|
||||
this.lastScrollTop = e.target.scrollTop;
|
||||
if(handleScroll){
|
||||
if(handleScrollY){
|
||||
debounce(
|
||||
handleScroll(this.lastScrollTop,this.treeType),
|
||||
handleScrollY(this.lastScrollTop,this.treeType),
|
||||
300)
|
||||
}
|
||||
}
|
||||
|
|
@ -1091,7 +1100,7 @@ class Table extends Component {
|
|||
|
||||
return (
|
||||
<div className={className} style={props.style} ref={el => this.contentTable = el}
|
||||
tabIndex={props.tabIndex?props.tabIndex:'0'} >
|
||||
tabIndex={props.focusable && (props.tabIndex?props.tabIndex:'0')} >
|
||||
{this.getTitle()}
|
||||
<div className={`${clsPrefix}-content`}>
|
||||
|
||||
|
|
|
|||
|
|
@ -80,6 +80,15 @@ $checkbox-height:16px;
|
|||
th:last-child{ //拖拽tag影响了表格整体宽度
|
||||
overflow: hidden;
|
||||
}
|
||||
&.filterable{
|
||||
th{
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
.filterContext{
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-row-hover {
|
||||
background: rgb(227, 242, 253);
|
||||
|
|
@ -476,6 +485,11 @@ $checkbox-height:16px;
|
|||
display:none;
|
||||
pointer-events: none;
|
||||
}
|
||||
//固定列含有checkbox 样式复写
|
||||
.u-checkbox {
|
||||
height: $checkbox-height;
|
||||
line-height: $checkbox-height;
|
||||
}
|
||||
}
|
||||
.u-table:focus{
|
||||
outline: none;
|
||||
|
|
@ -721,10 +735,6 @@ $checkbox-height:16px;
|
|||
}
|
||||
}
|
||||
|
||||
//固定列含有checkbox 样式复写
|
||||
.u-checkbox {
|
||||
height: $checkbox-height;
|
||||
line-height: $checkbox-height;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -68,6 +68,9 @@ class TableCell extends Component{
|
|||
if(column.fixed && !fixed){
|
||||
className = className+` ${clsPrefix}-fixed-columns-in-body`;
|
||||
}
|
||||
if(column.textAlign){
|
||||
className = className+` text-${column.textAlign}`;
|
||||
}
|
||||
return (
|
||||
<td
|
||||
colSpan={colSpan}
|
||||
|
|
|
|||
|
|
@ -536,11 +536,10 @@ class TableHeader extends Component {
|
|||
} = this.props;
|
||||
|
||||
let attr = dragborder ? { id: `u-table-drag-thead-${this.theadKey}` } : {};
|
||||
|
||||
return (
|
||||
<thead className={`${clsPrefix}-thead`} {...attr} data-theader-fixed='scroll' ref={_thead=>this._thead = _thead} >
|
||||
{rows.map((row, index) => (
|
||||
<tr style={rowStyle} className={(filterable && index == rows.length - 1)?'filterable':''}>
|
||||
<tr key={index} style={rowStyle} className={(filterable && index == rows.length - 1)?'filterable':''}>
|
||||
{row.map((da, columIndex, arr) => {
|
||||
let thHover = da.drgHover
|
||||
? ` ${clsPrefix}-thead th-drag-hover`
|
||||
|
|
@ -556,17 +555,31 @@ class TableHeader extends Component {
|
|||
if (lastShowIndex == columIndex) {
|
||||
canDotDrag = "th-can-not-drag";
|
||||
}
|
||||
let thClassName = `${da.className}`?`${da.className}`:'';
|
||||
if(da.textAlign){
|
||||
thClassName += ` text-${da.textAlign} `;
|
||||
}
|
||||
delete da.textAlign;
|
||||
const keyTemp = {};
|
||||
//避免key为undefined
|
||||
// if(da.dataindex && da.key ===undefined ){
|
||||
keyTemp.key = da.key || da.dataindex || index+'-'+columIndex
|
||||
|
||||
// }
|
||||
if (filterable && index == rows.length - 1) {
|
||||
da.children = this.filterRenderType(
|
||||
da["filtertype"],
|
||||
da.dataindex,
|
||||
columIndex
|
||||
);
|
||||
if(da.key ===undefined ){
|
||||
keyTemp.key = keyTemp.key + '-filterable'
|
||||
}
|
||||
delete da.filterdropdownfocus;
|
||||
}
|
||||
|
||||
let thDefaultObj = {};
|
||||
let thClassName = `${da.className}`?`${da.className}`:'';
|
||||
|
||||
if(draggable){
|
||||
thClassName += `${clsPrefix}-thead th-drag ${thHover} `;
|
||||
}
|
||||
|
|
@ -574,25 +587,26 @@ class TableHeader extends Component {
|
|||
thClassName += `${clsPrefix}-thead-th ${canDotDrag}`;
|
||||
}
|
||||
thClassName += ` ${fixedStyle}`;
|
||||
|
||||
if(!da.fixed){
|
||||
return (<th {...da} key={'table-header-th-'+da.dataindex} className={thClassName} data-th-fixed={da.fixed}
|
||||
|
||||
return (<th {...da} {...keyTemp} className={thClassName} data-th-fixed={da.fixed}
|
||||
data-line-key={da.key} data-line-index={columIndex} data-th-width={da.width} >
|
||||
{da.children}
|
||||
{
|
||||
dragborder ? <div ref={el => (this.gap = el)} data-line-key={da.key}
|
||||
data-line-index={columIndex} data-th-width={da.width}
|
||||
data-type="online" className = {`${clsPrefix}-thead-th-drag-gap`}>
|
||||
<div id='th-online' className='online' data-line-key={da.key} data-line-index={columIndex} data-th-width={da.width} /></div>:""
|
||||
}
|
||||
</th>)
|
||||
{da.children}
|
||||
{
|
||||
dragborder ? <div ref={el => (this.gap = el)} data-line-key={da.key}
|
||||
data-line-index={columIndex} data-th-width={da.width}
|
||||
data-type="online" className = {`${clsPrefix}-thead-th-drag-gap`}>
|
||||
<div id='th-online' className='online' data-line-key={da.key} data-line-index={columIndex} data-th-width={da.width} /></div>:""
|
||||
}
|
||||
</th>)
|
||||
}else{
|
||||
thDefaultObj = {
|
||||
...da,
|
||||
className:`${da.className} ${fixedStyle}`,
|
||||
key:columIndex
|
||||
className:`${thClassName} ${fixedStyle}`,
|
||||
};
|
||||
da.onClick ?thDefaultObj.onClick = (e)=>{da.onClick(da, e)}:"";
|
||||
return (<th {...thDefaultObj} data-th-fixed={da.fixed} />)
|
||||
return (<th {...thDefaultObj} {...keyTemp} data-th-fixed={da.fixed} />)
|
||||
}
|
||||
})}
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -79,14 +79,8 @@ class TableRow extends Component{
|
|||
componentDidUpdate(prevProps) {
|
||||
if(this.props.treeType){
|
||||
this.setRowParentIndex();
|
||||
this.setRowHeight()
|
||||
// if(this.props.fixedIndex!== prevProps.fixedIndex){
|
||||
// this.setRowHeight()
|
||||
// }
|
||||
}else if(this.props.index !== prevProps.index){
|
||||
this.setRowHeight()
|
||||
}
|
||||
|
||||
this.setRowHeight()
|
||||
}
|
||||
componentWillUnmount() {
|
||||
const { record, onDestroy, index } = this.props;
|
||||
|
|
@ -162,7 +156,7 @@ class TableRow extends Component{
|
|||
const {
|
||||
clsPrefix, columns, record, height, visible, index,
|
||||
expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,
|
||||
expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,
|
||||
expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,hoverKey
|
||||
} = this.props;
|
||||
let showSum = false;
|
||||
let { className } = this.props;
|
||||
|
|
@ -210,7 +204,7 @@ class TableRow extends Component{
|
|||
indent={indent}
|
||||
index={index}
|
||||
column={columns[i]}
|
||||
key={columns[i].key}
|
||||
key={columns[i].key || columns[i].dataIndex || i}
|
||||
fixed= {fixed}
|
||||
showSum={showSum}
|
||||
expandIcon={(isColumnHaveExpandIcon) ? expandIcon : null}
|
||||
|
|
@ -221,8 +215,7 @@ class TableRow extends Component{
|
|||
if (!visible) {
|
||||
style.display = 'none';
|
||||
}
|
||||
|
||||
return (
|
||||
return (
|
||||
<tr
|
||||
onClick={this.onRowClick}
|
||||
onDoubleClick={this.onRowDoubleClick}
|
||||
|
|
@ -230,6 +223,7 @@ class TableRow extends Component{
|
|||
onMouseLeave={this.onMouseLeave}
|
||||
className={`${clsPrefix} ${className} ${clsPrefix}-level-${indent}`}
|
||||
style={style}
|
||||
// key={hoverKey}
|
||||
ref={this.bindElement}
|
||||
>
|
||||
{cells.length>0?cells:<td></td>}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import React, { Component } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { warningOnce } from '../utils';
|
||||
const defaultHeight = 40;
|
||||
const rowDiff = 3; //行差值
|
||||
let treeTypeIndex = 0;
|
||||
|
|
@ -9,7 +8,10 @@ export default function bigData(Table) {
|
|||
static defaultProps = {
|
||||
data: [],
|
||||
loadBuffer: 5,
|
||||
rowKey: 'key',
|
||||
rowKey: "key",
|
||||
onExpand() {},
|
||||
scroll: {},
|
||||
currentIndex:-1
|
||||
};
|
||||
static propTypes = {
|
||||
loadBuffer: PropTypes.number
|
||||
|
|
@ -29,10 +31,10 @@ export default function bigData(Table) {
|
|||
? this.rowsInView + props.loadBuffer * 2
|
||||
: 26; //一次加载多少数据
|
||||
this.cachedRowHeight = []; //缓存每行的高度
|
||||
this.cachedRowParentIndex=[];
|
||||
this.expandChildRowKeys=[];
|
||||
this.firstLevelKey=[];
|
||||
this.keys=[];
|
||||
this.cachedRowParentIndex = [];
|
||||
this.expandChildRowKeys = [];
|
||||
this.firstLevelKey = [];
|
||||
this.keys = [];
|
||||
this.lastScrollTop = 0;
|
||||
this.currentScrollTop = 0;
|
||||
this.startIndex = this.currentIndex; //数据开始位置
|
||||
|
|
@ -40,77 +42,121 @@ export default function bigData(Table) {
|
|||
this.setRowHeight = this.setRowHeight.bind(this);
|
||||
this.setRowParentIndex = this.setRowParentIndex.bind(this);
|
||||
}
|
||||
componentWillReceiveProps(nextProps){
|
||||
if(nextProps.scroll.y !== this.props.scroll.y){
|
||||
const scrollY = nextProps.scroll.y ? parseInt(nextProps.scroll.y) : 0;
|
||||
this.rowsInView = scrollY ? Math.ceil(scrollY / rowHeight) : 20;
|
||||
this.loadCount = props.loadBuffer
|
||||
? this.rowsInView + props.loadBuffer * 2
|
||||
: 26; //一次加载多少数据
|
||||
this.currentIndex = 0;
|
||||
this.startIndex = this.currentIndex; //数据开始位置
|
||||
this.endIndex = this.currentIndex + this.loadCount; //数据结束位置
|
||||
}
|
||||
componentWillReceiveProps(nextProps) {
|
||||
const props = this.props;
|
||||
const {currentIndex ,data} = nextProps;
|
||||
const _this = this,dataLen = data.length;
|
||||
if (nextProps.scroll.y !== props.scroll.y) {
|
||||
const rowHeight = nextProps.height ? nextProps.height : defaultHeight;
|
||||
const scrollY = nextProps.scroll.y ? parseInt(nextProps.scroll.y) : 0;
|
||||
_this.rowsInView = scrollY ? Math.ceil(scrollY / rowHeight) : 20;
|
||||
_this.loadCount = props.loadBuffer
|
||||
? _this.rowsInView + props.loadBuffer * 2
|
||||
: 26; //一次加载多少数据
|
||||
_this.currentIndex = 0;
|
||||
_this.startIndex = _this.currentIndex; //数据开始位置
|
||||
_this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置
|
||||
if(_this.endIndex > dataLen){
|
||||
_this.endIndex = dataLen;
|
||||
}
|
||||
}
|
||||
if (nextProps.data !== props.data) {
|
||||
_this.computeCachedRowParentIndex(nextProps.data);
|
||||
}
|
||||
//如果传currentIndex，会判断该条数据是否在可视区域，如果没有的话，则重新计算startIndex和endIndex
|
||||
if(currentIndex!==-1 && currentIndex !== this.currentIndex){
|
||||
_this.setStartAndEndIndex(currentIndex,dataLen);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
componentDidMount() {
|
||||
const { data } = this.props;
|
||||
this.computeCachedRowParentIndex(data);
|
||||
}
|
||||
|
||||
/**
|
||||
*设置data中每个元素的parentIndex
|
||||
*
|
||||
*/
|
||||
computeCachedRowParentIndex = data => {
|
||||
const isTreeType = this.checkIsTreeType();
|
||||
if(isTreeType){
|
||||
const {data} = this.props;
|
||||
data.forEach((item,index)=>{
|
||||
this.firstLevelKey[index] = this.getRowKey(item,index);
|
||||
if (isTreeType) {
|
||||
data.forEach((item, index) => {
|
||||
this.firstLevelKey[index] = this.getRowKey(item, index);
|
||||
this.cachedRowParentIndex[treeTypeIndex] = index;
|
||||
//保存所有的keys跟小标对应起来
|
||||
this.keys[treeTypeIndex] = this.getRowKey(item,index);
|
||||
this.keys[treeTypeIndex] = this.getRowKey(item, index);
|
||||
treeTypeIndex++;
|
||||
if(item.children){
|
||||
this.getData(item.children,index);
|
||||
if (item.children) {
|
||||
this.getData(item.children, index);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
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) {
|
||||
const rowKey = this.props.rowKey;
|
||||
const key = (typeof rowKey === 'function') ?
|
||||
rowKey(record, index) : record[rowKey];
|
||||
warningOnce(
|
||||
key !== undefined,
|
||||
'Each record in table should have a unique `key` prop,' +
|
||||
'or set `rowKey` to an unique primary key.'
|
||||
);
|
||||
const key =
|
||||
typeof rowKey === "function" ? rowKey(record, index) : record[rowKey];
|
||||
|
||||
return key;
|
||||
}
|
||||
/**
|
||||
*判断是否是树形结构
|
||||
*
|
||||
*/
|
||||
checkIsTreeType(){
|
||||
const {data} = this.props;
|
||||
checkIsTreeType() {
|
||||
const { data } = this.props;
|
||||
let rs = false;
|
||||
const len = data.length>30?30: data.length;
|
||||
const len = data.length > 30 ? 30 : data.length;
|
||||
//取前三十个看看是否有children属性，有则为树形结构
|
||||
for(let i = 0 ;i<len;i++){
|
||||
if(data[i].children){
|
||||
for (let i = 0; i < len; i++) {
|
||||
if (data[i].children) {
|
||||
rs = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return rs;
|
||||
}
|
||||
getData(data,parentIndex){
|
||||
data.forEach((subItem,subIndex)=>{
|
||||
this.cachedRowParentIndex[treeTypeIndex] = parentIndex;
|
||||
this.keys[treeTypeIndex] = this.getRowKey(subItem,subIndex);
|
||||
treeTypeIndex++;
|
||||
if(subItem.children){
|
||||
this.getData(subItem.children,parentIndex);
|
||||
|
||||
}
|
||||
})
|
||||
getData(data, parentIndex) {
|
||||
data.forEach((subItem, subIndex) => {
|
||||
this.cachedRowParentIndex[treeTypeIndex] = parentIndex;
|
||||
this.keys[treeTypeIndex] = this.getRowKey(subItem, subIndex);
|
||||
treeTypeIndex++;
|
||||
if (subItem.children) {
|
||||
this.getData(subItem.children, parentIndex);
|
||||
}
|
||||
});
|
||||
}
|
||||
componentWillUnmount(){
|
||||
componentWillUnmount() {
|
||||
this.cachedRowHeight = [];
|
||||
this.cachedRowParentIndex = [];
|
||||
}
|
||||
|
|
@ -127,31 +173,36 @@ export default function bigData(Table) {
|
|||
getSumHeight(start, end) {
|
||||
const { height } = this.props;
|
||||
let rowHeight = height ? height : defaultHeight;
|
||||
let sumHeight = 0,currentKey,currentRowHeight=rowHeight;
|
||||
let sumHeight = 0,
|
||||
currentKey,
|
||||
currentRowHeight = rowHeight;
|
||||
|
||||
for (let i = start; i < end; i++) {
|
||||
if(this.cachedRowHeight[i] == undefined){
|
||||
if(this.treeType){
|
||||
if (this.cachedRowHeight[i] == undefined) {
|
||||
if (this.treeType) {
|
||||
currentKey = this.keys[i];
|
||||
currentRowHeight = 0;
|
||||
if(this.firstLevelKey.indexOf(currentKey)>=0 || this.expandChildRowKeys.indexOf(currentKey)>=0){
|
||||
if (
|
||||
this.firstLevelKey.indexOf(currentKey) >= 0 ||
|
||||
this.expandChildRowKeys.indexOf(currentKey) >= 0
|
||||
) {
|
||||
currentRowHeight = rowHeight;
|
||||
}
|
||||
}
|
||||
sumHeight += currentRowHeight;
|
||||
}else{
|
||||
sumHeight += this.cachedRowHeight[i]
|
||||
} else {
|
||||
sumHeight += this.cachedRowHeight[i];
|
||||
}
|
||||
}
|
||||
return sumHeight;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
*@description 根据返回的scrollTop计算当前的索引。此处做了两次缓存一个是根据上一次的currentIndex计算当前currentIndex。另一个是根据当前内容区的数据是否在缓存中如果在则不重新render页面
|
||||
*@param 最新一次滚动的scrollTop
|
||||
*@param treeType是否是树状表
|
||||
*/
|
||||
handleScroll = (nextScrollTop, treeType) => {
|
||||
handleScrollY = (nextScrollTop, treeType) => {
|
||||
//树表逻辑
|
||||
// 关键点是动态的获取startIndex和endIndex
|
||||
// 法子一：子节点也看成普通tr，最开始需要设置一共有多少行，哪行显示哪行不显示如何确定
|
||||
|
|
@ -197,19 +248,21 @@ export default function bigData(Table) {
|
|||
let index = 0;
|
||||
let temp = nextScrollTop;
|
||||
let currentKey;
|
||||
while (temp >0) {
|
||||
while (temp > 0) {
|
||||
let currentRowHeight = this.cachedRowHeight[index];
|
||||
if(currentRowHeight === undefined){
|
||||
if(this.treeType){
|
||||
if (currentRowHeight === undefined) {
|
||||
if (this.treeType) {
|
||||
currentKey = this.keys[index];
|
||||
currentRowHeight = 0;
|
||||
if(this.firstLevelKey.indexOf(currentKey)>=0 || this.expandChildRowKeys.indexOf(currentKey)>=0){
|
||||
if (
|
||||
this.firstLevelKey.indexOf(currentKey) >= 0 ||
|
||||
this.expandChildRowKeys.indexOf(currentKey) >= 0
|
||||
) {
|
||||
currentRowHeight = rowHeight;
|
||||
}
|
||||
}else{
|
||||
} else {
|
||||
currentRowHeight = rowHeight;
|
||||
}
|
||||
|
||||
}
|
||||
temp -= currentRowHeight;
|
||||
if (temp > 0) {
|
||||
|
|
@ -224,39 +277,42 @@ export default function bigData(Table) {
|
|||
_this.currentIndex = index;
|
||||
let rowsInView = 0; //可视区域显示多少行
|
||||
let rowsHeight = 0; //可视区域内容高度
|
||||
let tempIndex = index;
|
||||
let tempIndex = index;
|
||||
//如果可视区域中需要展示的数据已经在缓存中则不重现render。
|
||||
if (viewHeight) {
|
||||
//有时滚动过快时this.cachedRowHeight[rowsInView + index]为undifined
|
||||
|
||||
while (rowsHeight < viewHeight && tempIndex<this.cachedRowHeight.length) {
|
||||
if(this.cachedRowHeight[tempIndex]){
|
||||
rowsHeight += this.cachedRowHeight[tempIndex];
|
||||
if(treeType && _this.cachedRowParentIndex[tempIndex] !== tempIndex ||!treeType){
|
||||
rowsInView++;
|
||||
}
|
||||
|
||||
|
||||
while (
|
||||
rowsHeight < viewHeight &&
|
||||
tempIndex < this.cachedRowHeight.length
|
||||
) {
|
||||
if (this.cachedRowHeight[tempIndex]) {
|
||||
rowsHeight += this.cachedRowHeight[tempIndex];
|
||||
if (
|
||||
(treeType &&
|
||||
_this.cachedRowParentIndex[tempIndex] !== tempIndex) ||
|
||||
!treeType
|
||||
) {
|
||||
rowsInView++;
|
||||
}
|
||||
}
|
||||
tempIndex++;
|
||||
|
||||
}
|
||||
if(treeType){
|
||||
const treeIndex = index
|
||||
if (treeType) {
|
||||
const treeIndex = index;
|
||||
index = _this.cachedRowParentIndex[treeIndex];
|
||||
if(index === undefined){
|
||||
if (index === undefined) {
|
||||
// console.log('index is undefined********'+treeIndex);
|
||||
index = this.getParentIndex(treeIndex);
|
||||
// console.log("getParentIndex****"+index);
|
||||
}
|
||||
|
||||
}
|
||||
// console.log('parentIndex*********',index);
|
||||
// 如果rowsInView 小于 缓存的数据则重新render
|
||||
// 向下滚动 下临界值超出缓存的endIndex则重新渲染
|
||||
if (rowsInView + index > endIndex - rowDiff && isOrder) {
|
||||
|
||||
startIndex = index - loadBuffer>0?index - loadBuffer:0;
|
||||
endIndex = startIndex + loadCount;
|
||||
startIndex = index - loadBuffer > 0 ? index - loadBuffer : 0;
|
||||
endIndex = startIndex + loadCount;
|
||||
//树状结构则根据当前的节点重新计算startIndex和endIndex
|
||||
// if(treeType){
|
||||
// const currentParentIndex = _this.cachedRowParentIndex[index];
|
||||
|
|
@ -271,10 +327,10 @@ export default function bigData(Table) {
|
|||
if (endIndex > data.length) {
|
||||
endIndex = data.length;
|
||||
}
|
||||
if(startIndex!==this.startIndex||endIndex!==this.endIndex){
|
||||
this.startIndex = startIndex;
|
||||
this.endIndex = endIndex;
|
||||
this.setState({ needRender: !needRender });
|
||||
if (startIndex !== this.startIndex || endIndex !== this.endIndex) {
|
||||
this.startIndex = startIndex;
|
||||
this.endIndex = endIndex;
|
||||
this.setState({ needRender: !needRender });
|
||||
}
|
||||
// console.log(
|
||||
// "===================",
|
||||
|
|
@ -289,10 +345,10 @@ export default function bigData(Table) {
|
|||
if (startIndex < 0) {
|
||||
startIndex = 0;
|
||||
}
|
||||
if(startIndex!==this.startIndex||endIndex!==this.endIndex){
|
||||
this.startIndex = startIndex;
|
||||
this.endIndex = this.startIndex + loadCount;
|
||||
this.setState({ needRender: !needRender });
|
||||
if (startIndex !== this.startIndex || endIndex !== this.endIndex) {
|
||||
this.startIndex = startIndex;
|
||||
this.endIndex = this.startIndex + loadCount;
|
||||
this.setState({ needRender: !needRender });
|
||||
}
|
||||
// console.log(
|
||||
// "**index**" + index,
|
||||
|
|
@ -301,15 +357,14 @@ export default function bigData(Table) {
|
|||
// );
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
setRowHeight(height, index) {
|
||||
this.cachedRowHeight[index] = height;
|
||||
}
|
||||
setRowParentIndex(parentIndex,index){
|
||||
// this.cachedRowParentIndex[index] = parentIndex;
|
||||
setRowParentIndex(parentIndex, index) {
|
||||
// this.cachedRowParentIndex[index] = parentIndex;
|
||||
}
|
||||
/**
|
||||
*
|
||||
|
|
@ -317,68 +372,84 @@ export default function bigData(Table) {
|
|||
* @param {*} currentIndex 当前行号
|
||||
*/
|
||||
getParentIndex(targetIndex) {
|
||||
const {data} = this.props;
|
||||
let parentIndex = -1;
|
||||
parentIndex = this.getIndex(data,-1,targetIndex);
|
||||
if(parentIndex<0){//小于0说明没有展开的子节点
|
||||
parentIndex = targetIndex;
|
||||
}
|
||||
return parentIndex;
|
||||
|
||||
const { data } = this.props;
|
||||
let parentIndex = -1;
|
||||
parentIndex = this.getIndex(data, -1, targetIndex);
|
||||
if (parentIndex < 0) {
|
||||
//小于0说明没有展开的子节点
|
||||
parentIndex = targetIndex;
|
||||
}
|
||||
return parentIndex;
|
||||
}
|
||||
getIndex(data,index,targetIndex){
|
||||
const parentIndex = index;
|
||||
for(let i=0;i<data.length;i++){
|
||||
index++;
|
||||
if(targetIndex <=index){
|
||||
break;
|
||||
}
|
||||
if(data[i].children){
|
||||
this.getIndex(data[i].children,index,targetIndex);
|
||||
}
|
||||
|
||||
getIndex(data, index, targetIndex) {
|
||||
const parentIndex = index;
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
index++;
|
||||
if (targetIndex <= index) {
|
||||
break;
|
||||
}
|
||||
return parentIndex;
|
||||
if (data[i].children) {
|
||||
this.getIndex(data[i].children, index, targetIndex);
|
||||
}
|
||||
}
|
||||
return parentIndex;
|
||||
}
|
||||
|
||||
|
||||
onExpand = (expandState,record)=>{
|
||||
onExpand = (expandState, record) => {
|
||||
const _this = this;
|
||||
// 展开
|
||||
if(expandState){
|
||||
record.children && record.children.forEach((item,index)=>{
|
||||
_this.expandChildRowKeys.push( _this.getRowKey(item,index));
|
||||
})
|
||||
}else{
|
||||
// 收起
|
||||
record.children && record.children.forEach((item,index)=>{
|
||||
_this.expandChildRowKeys.splice(_this.expandChildRowKeys.findIndex(fitem => fitem.key === item.key), 1)
|
||||
})
|
||||
if (expandState) {
|
||||
record.children &&
|
||||
record.children.forEach((item, index) => {
|
||||
_this.expandChildRowKeys.push(_this.getRowKey(item, index));
|
||||
});
|
||||
} else {
|
||||
// 收起
|
||||
record.children &&
|
||||
record.children.forEach((item, index) => {
|
||||
_this.expandChildRowKeys.splice(
|
||||
_this.expandChildRowKeys.findIndex(
|
||||
fitem => fitem.key === item.key
|
||||
),
|
||||
1
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
_this.props.onExpand(expandState, record);
|
||||
};
|
||||
render() {
|
||||
|
||||
const { data } = this.props;
|
||||
const { scrollTop } = this;
|
||||
const { endIndex, startIndex } = this;
|
||||
const lazyLoad = {
|
||||
startIndex: startIndex,
|
||||
startParentIndex:startIndex,//为树状节点做准备
|
||||
startParentIndex: startIndex //为树状节点做准备
|
||||
};
|
||||
if(this.treeType){
|
||||
const preSubCounts = this.cachedRowParentIndex.findIndex(item=>{ return item==startIndex })
|
||||
const sufSubCounts = this.cachedRowParentIndex.findIndex(item=>{ return item==endIndex })
|
||||
lazyLoad.preHeight = this.getSumHeight(0,preSubCounts>-1?preSubCounts:0);
|
||||
lazyLoad.sufHeight = this.getSumHeight(sufSubCounts+1>0?sufSubCounts+1:this.cachedRowParentIndex.length,this.cachedRowParentIndex.length);
|
||||
|
||||
if(preSubCounts>0){
|
||||
if (this.treeType) {
|
||||
const preSubCounts = this.cachedRowParentIndex.findIndex(item => {
|
||||
return item == startIndex;
|
||||
});
|
||||
const sufSubCounts = this.cachedRowParentIndex.findIndex(item => {
|
||||
return item == endIndex;
|
||||
});
|
||||
lazyLoad.preHeight = this.getSumHeight(
|
||||
0,
|
||||
preSubCounts > -1 ? preSubCounts : 0
|
||||
);
|
||||
lazyLoad.sufHeight = this.getSumHeight(
|
||||
sufSubCounts + 1 > 0
|
||||
? sufSubCounts + 1
|
||||
: this.cachedRowParentIndex.length,
|
||||
this.cachedRowParentIndex.length
|
||||
);
|
||||
|
||||
if (preSubCounts > 0) {
|
||||
lazyLoad.startIndex = preSubCounts;
|
||||
}
|
||||
|
||||
}else{
|
||||
lazyLoad.preHeight = this.getSumHeight(0, startIndex)
|
||||
lazyLoad.sufHeight = this.getSumHeight(endIndex, data.length)
|
||||
|
||||
} else {
|
||||
lazyLoad.preHeight = this.getSumHeight(0, startIndex);
|
||||
lazyLoad.sufHeight = this.getSumHeight(endIndex, data.length);
|
||||
}
|
||||
// console.log('*******ScrollTop*****'+scrollTop);
|
||||
return (
|
||||
|
|
@ -386,12 +457,12 @@ export default function bigData(Table) {
|
|||
{...this.props}
|
||||
data={data.slice(startIndex, endIndex)}
|
||||
lazyLoad={lazyLoad}
|
||||
handleScroll={this.handleScroll}
|
||||
handleScrollY={this.handleScrollY}
|
||||
scrollTop={scrollTop}
|
||||
setRowHeight={this.setRowHeight}
|
||||
setRowParentIndex = {this.setRowParentIndex}
|
||||
onExpand = {this.onExpand}
|
||||
onExpandedRowsChange = {this.onExpandedRowsChange}
|
||||
setRowParentIndex={this.setRowParentIndex}
|
||||
onExpand={this.onExpand}
|
||||
onExpandedRowsChange={this.onExpandedRowsChange}
|
||||
// className={'lazy-table'}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -55,17 +55,28 @@ export default function dragColumn(Table) {
|
|||
onDrop=(event,data)=>{
|
||||
let {dragSource,dragTarg} = data;
|
||||
let {columns} = this.state;
|
||||
let dragSourceColum = columns.find((da,i)=>da.key == dragSource.key);
|
||||
let dragTargColum = columns.find((da,i)=>da.key == dragTarg.key);
|
||||
for (let index = 0; index < columns.length; index++) {
|
||||
const da = columns[index];
|
||||
if(da.key === dragSource.key){
|
||||
columns[index] = dragTargColum;
|
||||
}
|
||||
if(da.key === dragTarg.key){
|
||||
columns[index] = dragSourceColum;
|
||||
}
|
||||
}
|
||||
let sourceIndex = -1,targetIndex = -1;
|
||||
|
||||
sourceIndex = columns.findIndex((da,i)=>da.key == dragSource.key);
|
||||
targetIndex = columns.findIndex((da,i)=>da.key == dragTarg.key);
|
||||
// for (let index = 0; index < columns.length; index++) {
|
||||
// const da = columns[index];
|
||||
// if(da.key === dragSource.key){
|
||||
// columns[index] = dragTargColum;
|
||||
// }
|
||||
// if(da.key === dragTarg.key){
|
||||
// columns[index] = dragSourceColum;
|
||||
// }
|
||||
// }
|
||||
// 向前移动
|
||||
if(targetIndex < sourceIndex){
|
||||
targetIndex = targetIndex + 1;
|
||||
}
|
||||
columns.splice(
|
||||
targetIndex,
|
||||
0,
|
||||
columns.splice(sourceIndex, 1)[0]
|
||||
);
|
||||
this.setState({
|
||||
columns:cloneDeep(columns)
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React, { Component } from "react";
|
|||
import Checkbox from "bee-checkbox";
|
||||
import Icon from "bee-icon";
|
||||
import { ObjectAssign } from "./util";
|
||||
import i18n from "../i18n";
|
||||
import i18n from "./i18n";
|
||||
import { getComponentLocale } from "bee-locale/build/tool";
|
||||
|
||||
function noop() {}
|
||||
|
|
|
|||
327
src/lib/sort.js
327
src/lib/sort.js
|
|
@ -24,141 +24,158 @@ export default function sort(Table, Icon) {
|
|||
return class SortTable extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: this.props.data,
|
||||
columns:props.columns,
|
||||
};
|
||||
let flatColumns = [];
|
||||
this._toFlatColumn(props.columns,-1,flatColumns);
|
||||
this.state = { data: this.props.data, columns: props.columns,flatColumns:flatColumns };
|
||||
|
||||
}
|
||||
static defaultProps = {
|
||||
sort: {
|
||||
mode:'single',
|
||||
backSource:false //默认是前端排序，值为true为后端排序
|
||||
}
|
||||
};
|
||||
componentWillReceiveProps(nextProps){
|
||||
if(nextProps.data !== this.props.data){
|
||||
this.setState({
|
||||
data: nextProps.data,
|
||||
oldData: nextProps.data.concat(),
|
||||
});
|
||||
}
|
||||
if(nextProps.columns !== this.props.columns){
|
||||
static defaultProps = { sort: { mode: "single", backSource: false } }; //默认是前端排序，值为true为后端排序
|
||||
componentWillReceiveProps(nextProps) {
|
||||
|
||||
if (nextProps.data !== this.props.data) {
|
||||
this.setState({
|
||||
columns: nextProps.columns,
|
||||
data: nextProps.data,
|
||||
oldData: nextProps.data.concat()
|
||||
});
|
||||
}
|
||||
if (nextProps.columns !== this.props.columns) {
|
||||
let flatColumns = [];
|
||||
this._toFlatColumn(nextProps.columns,-1,flatColumns);
|
||||
this.setState({ columns: nextProps.columns ,flatColumns});
|
||||
|
||||
}
|
||||
}
|
||||
getOrderNum =()=>{
|
||||
let orderNum=0 ;
|
||||
this.state.columns.forEach((item,index)=>{
|
||||
if(item.order=='ascend' || item.order=='descend'){
|
||||
/**
|
||||
*column扁平化处理，适应多表头避免递归操作
|
||||
*
|
||||
*/
|
||||
_toFlatColumn(columns,parentIndex = -1,flatColumns=[]) {
|
||||
const _this = this;
|
||||
let children = [];
|
||||
// const flatColumns = _this.state;
|
||||
columns.forEach((item,index)=>{
|
||||
item.parentIndex = parentIndex;
|
||||
children = item.children;
|
||||
flatColumns.push(item);
|
||||
if(children){
|
||||
item.children = [];
|
||||
_this._toFlatColumn(children,flatColumns.length - 1,flatColumns);
|
||||
}
|
||||
});
|
||||
}
|
||||
getOrderNum = () => {
|
||||
let orderNum = 0;
|
||||
//todo 1
|
||||
this.state.flatColumns.forEach((item, index) => {
|
||||
if (item.order == "ascend" || item.order == "descend") {
|
||||
orderNum++;
|
||||
}
|
||||
})
|
||||
return orderNum?orderNum:1;
|
||||
}
|
||||
|
||||
});
|
||||
return orderNum ? orderNum : 1;
|
||||
};
|
||||
|
||||
/**
|
||||
* column 当前的排序的列
|
||||
* 当有的列不排序时，将该列的orderNum置为‘’，并动态的修改其他列的orderNum。
|
||||
*/
|
||||
changeOrderNum = (column)=>{
|
||||
let {columns} = this.state;
|
||||
columns.forEach((col)=>{
|
||||
if(col.orderNum>column.orderNum){
|
||||
changeOrderNum = column => {
|
||||
let { flatColumns } = this.state;
|
||||
//todo 2
|
||||
flatColumns.forEach(col => {
|
||||
if (col.orderNum > column.orderNum) {
|
||||
col.orderNum--;
|
||||
}
|
||||
if(column.key == col.key){
|
||||
col.orderNum = '';
|
||||
if (column.key == col.key) {
|
||||
col.orderNum = "";
|
||||
}
|
||||
})
|
||||
this.setState({columns});
|
||||
|
||||
}
|
||||
});
|
||||
this.setState({ flatColumns });
|
||||
};
|
||||
/**
|
||||
* 获取排序字段
|
||||
*/
|
||||
getOrderCols = (columns)=>{
|
||||
getOrderCols = columns => {
|
||||
let orderCols = [];
|
||||
columns.forEach(item=>{
|
||||
if(item.order=='ascend'||item.order=='descend'){
|
||||
orderCols.push({order:item.order,
|
||||
field:item.dataIndex,
|
||||
orderNum:item.orderNum
|
||||
//todo 3
|
||||
columns.forEach(item => {
|
||||
if (item.order == "ascend" || item.order == "descend") {
|
||||
orderCols.push({
|
||||
order: item.order,
|
||||
field: item.dataIndex,
|
||||
orderNum: item.orderNum
|
||||
});
|
||||
}
|
||||
})
|
||||
});
|
||||
return orderCols;
|
||||
}
|
||||
|
||||
/**
|
||||
* pre：前一条数据
|
||||
* after:后一条数据
|
||||
* orderType:升序、降序
|
||||
*/
|
||||
_sortBy=(pre,after,orderCols,orderColslen,currentIndex)=>{
|
||||
};
|
||||
|
||||
/**
|
||||
* pre：前一条数据
|
||||
* after:后一条数据
|
||||
* orderType:升序、降序
|
||||
*/
|
||||
_sortBy = (pre, after, orderCols, orderColslen, currentIndex) => {
|
||||
const preKey = pre[orderCols[currentIndex].key];
|
||||
const afterKey = after[orderCols[currentIndex].key];
|
||||
if(preKey == afterKey && currentIndex+1<=orderColslen){
|
||||
return this._sortBy(pre,after,orderCols,orderColslen,currentIndex+1);
|
||||
if (preKey == afterKey && currentIndex + 1 <= orderColslen) {
|
||||
return this._sortBy(pre, after, orderCols, orderColslen, currentIndex + 1);
|
||||
}
|
||||
if(orderCols[currentIndex].order=='ascend'){
|
||||
return preKey - afterKey
|
||||
}else{
|
||||
return afterKey - preKey
|
||||
if (orderCols[currentIndex].order == "ascend") {
|
||||
return preKey - afterKey;
|
||||
} else {
|
||||
return afterKey - preKey;
|
||||
}
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 多列排序 先排order为1的，其他的基于已排序的数据排
|
||||
*/
|
||||
multiSort = (columns)=>{
|
||||
let {data, oldData} = this.state;
|
||||
multiSort = columns => {
|
||||
let { data, oldData } = this.state;
|
||||
const self = this;
|
||||
let orderCols = {},orderColslen=0;
|
||||
columns.forEach(item=>{
|
||||
if(item.orderNum){
|
||||
let orderCols = {},
|
||||
orderColslen = 0;
|
||||
//todo 4
|
||||
columns.forEach(item => {
|
||||
if (item.orderNum) {
|
||||
orderColslen++;
|
||||
orderCols[item.orderNum] = item;
|
||||
}
|
||||
})
|
||||
if(orderColslen>0){
|
||||
});
|
||||
if (orderColslen > 0) {
|
||||
data = data.sort(function(a, b) {
|
||||
return self._sortBy(a,b,orderCols,orderColslen,1);
|
||||
return self._sortBy(a, b, orderCols, orderColslen, 1);
|
||||
});
|
||||
}else{
|
||||
} else {
|
||||
data = oldData.concat();
|
||||
}
|
||||
return data;
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
toggleSortOrder = (order, column) => {
|
||||
let { data, oldData ,columns} = this.state;
|
||||
let {sort} = this.props;
|
||||
let { data, oldData, flatColumns } = this.state;
|
||||
let { sort } = this.props;
|
||||
let seleObj;
|
||||
if (!oldData) {
|
||||
oldData = data.concat();
|
||||
}
|
||||
//单列排序，清空其他列的排序
|
||||
if(sort.mode == 'single'){
|
||||
columns.forEach(da=>{
|
||||
if(da.key == column.key){
|
||||
if (sort.mode == "single") {
|
||||
//todo 5
|
||||
flatColumns.forEach(da => {
|
||||
if (da.key == column.key) {
|
||||
seleObj = da;
|
||||
}else{
|
||||
if(da.order){
|
||||
da.order = 'flatscend';
|
||||
} else {
|
||||
if (da.order) {
|
||||
da.order = "flatscend";
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
seleObj.order = order;
|
||||
//通过后端请求
|
||||
if(sort.backSource && typeof sort.sortFun === "function"){
|
||||
if (sort.backSource && typeof sort.sortFun === "function") {
|
||||
//获取排序的字段和方式
|
||||
sort.sortFun([{
|
||||
order:order,
|
||||
field:seleObj.dataIndex
|
||||
}]);
|
||||
}else{
|
||||
sort.sortFun([{ order: order, field: seleObj.dataIndex }]);
|
||||
} else {
|
||||
if (order === "ascend") {
|
||||
data = data.sort(function(a, b) {
|
||||
return column.sorter(a, b);
|
||||
|
|
@ -171,83 +188,99 @@ export default function sort(Table, Icon) {
|
|||
data = oldData.concat();
|
||||
}
|
||||
}
|
||||
}else{
|
||||
seleObj = columns.find(da=>da.key == column.key);
|
||||
} else {
|
||||
seleObj = flatColumns.find(da => da.key == column.key);
|
||||
seleObj.order = order;
|
||||
if(order === "flatscend"){
|
||||
if (order === "flatscend") {
|
||||
this.changeOrderNum(column);
|
||||
}
|
||||
if(!seleObj.orderNum && (order=='ascend'||order=='descend')){
|
||||
if (!seleObj.orderNum && (order == "ascend" || order == "descend")) {
|
||||
seleObj.orderNum = this.getOrderNum();
|
||||
}
|
||||
if(sort.backSource && typeof sort.sortFun === "function"){
|
||||
sort.sortFun(this.getOrderCols(columns));
|
||||
}else{
|
||||
data = this.multiSort(columns);
|
||||
if (sort.backSource && typeof sort.sortFun === "function") {
|
||||
sort.sortFun(this.getOrderCols(flatColumns));
|
||||
} else {
|
||||
data = this.multiSort(flatColumns);
|
||||
}
|
||||
|
||||
}
|
||||
this.setState({
|
||||
data,
|
||||
oldData,
|
||||
columns
|
||||
});
|
||||
this.setState({ data, oldData, flatColumns });
|
||||
};
|
||||
//每个column上添加orderNum属性，不排序时为“”。
|
||||
//点击时orderNum有值则不重新赋值，如果没有值，则取当前column下的有oderNum的length值。并排序
|
||||
//点击置为“”时，动态的设置相关column的orderNum值。并排序
|
||||
renderColumnsDropdown=(columns)=>{
|
||||
const prefixCls = "bee-table";
|
||||
const {mode} = this.props.sort;
|
||||
return columns.map(originColumn => {
|
||||
let iconTypeIndex = 0;
|
||||
renderColumnsDropdown = columns => {
|
||||
let tempColumns = [],rsColumns = [];
|
||||
tempColumns = columns.map(originColumn => {
|
||||
let column = Object.assign({}, originColumn);
|
||||
let sorterClass = 'flat';
|
||||
|
||||
if(column.order === "ascend"){
|
||||
iconTypeIndex = 1;
|
||||
sorterClass = 'up'
|
||||
}else if(column.order === "descend"){
|
||||
iconTypeIndex = 2;
|
||||
sorterClass = 'down'
|
||||
}
|
||||
|
||||
let sortButton;
|
||||
if (column.sorter) {
|
||||
//大于0说明不是升序就是降序，判断orderNum有没有值，没有值赋值
|
||||
if(iconTypeIndex>0 && !column.orderNum && mode=='multiple'){
|
||||
column.orderNum = this.getOrderNum();
|
||||
}
|
||||
sortButton = (
|
||||
<div className={`${prefixCls}-column-sorter`}>
|
||||
<span
|
||||
className={`${prefixCls}-column-sorter-${sorterClass}`}
|
||||
onClick={() =>{
|
||||
this.toggleSortOrder(IconType[iconTypeIndex==2?0:iconTypeIndex+1].order, column);
|
||||
|
||||
if(column.sorterClick){
|
||||
column.sorterClick(column,IconType[iconTypeIndex].type);
|
||||
}
|
||||
} }
|
||||
>
|
||||
<Icon type={IconType[iconTypeIndex].icon} />
|
||||
<span >{column.orderNum}</span>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
column.title = (
|
||||
<span>
|
||||
{column.title}
|
||||
{sortButton}
|
||||
</span>
|
||||
);
|
||||
return column;
|
||||
return this.sortColumn(column);
|
||||
});
|
||||
rsColumns = this._flatToColumn(tempColumns);
|
||||
return rsColumns;
|
||||
};
|
||||
|
||||
sortColumn = column => {
|
||||
const { mode } = this.props.sort;
|
||||
const prefixCls = "bee-table";
|
||||
let iconTypeIndex = 0;
|
||||
let sorterClass = "flat";
|
||||
|
||||
if (column.order === "ascend") {
|
||||
iconTypeIndex = 1;
|
||||
sorterClass = "up";
|
||||
} else if (column.order === "descend") {
|
||||
iconTypeIndex = 2;
|
||||
sorterClass = "down";
|
||||
}
|
||||
|
||||
let sortButton;
|
||||
if (column.sorter) {
|
||||
//大于0说明不是升序就是降序，判断orderNum有没有值，没有值赋值
|
||||
if (iconTypeIndex > 0 && !column.orderNum && mode == "multiple") {
|
||||
column.orderNum = this.getOrderNum();
|
||||
}
|
||||
sortButton = <div className={`${prefixCls}-column-sorter`}>
|
||||
<span className={`${prefixCls}-column-sorter-${sorterClass}`} onClick={() => {
|
||||
this.toggleSortOrder(IconType[iconTypeIndex == 2 ? 0 : iconTypeIndex + 1].order, column);
|
||||
|
||||
if (column.sorterClick) {
|
||||
column.sorterClick(column, IconType[iconTypeIndex].type);
|
||||
}
|
||||
}}>
|
||||
{/* <Icon type='{IconType[iconTypeIndex].icon}' /> */}
|
||||
<i className={`uf ${IconType[iconTypeIndex].icon}`} />
|
||||
<span>{column.orderNum}</span>
|
||||
</span>
|
||||
</div>;
|
||||
}
|
||||
column.title = <span>
|
||||
{column.title}
|
||||
{sortButton}
|
||||
</span>;
|
||||
return column;
|
||||
};
|
||||
|
||||
_flatToColumn(flatColumns){
|
||||
const colLen = flatColumns.length;
|
||||
let parentIndex,rsColumns = [];
|
||||
//每次渲染需要将父类的children置空，避免重复
|
||||
flatColumns.forEach(item=>{
|
||||
if(item.children){
|
||||
item.children = [];
|
||||
}
|
||||
})
|
||||
for(let i = colLen-1;i>=0;i--){
|
||||
parentIndex = flatColumns[i].parentIndex;
|
||||
if(parentIndex >= 0){
|
||||
flatColumns[parentIndex].children.unshift(flatColumns[i]);
|
||||
}
|
||||
}
|
||||
rsColumns = flatColumns.filter(item=>{
|
||||
return item.parentIndex == -1
|
||||
})
|
||||
return rsColumns;
|
||||
}
|
||||
render() {
|
||||
let columns = this.renderColumnsDropdown(this.state.columns.concat());
|
||||
let columns = this.renderColumnsDropdown(this.state.flatColumns.concat());
|
||||
return <Table {...this.props} columns={columns} data={this.state.data} />;
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue