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

Merge branch 'master' of github.com:tinper-bee/bee-table

This commit is contained in:
jonyshi 2019-01-23 11:50:16 +08:00
parent 2560ff4697 54d5ccf359
commit 043150368d
33 changed files with 1504 additions and 1023 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
CHANGELOG.md
View File

@ -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> <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) ## [1.6.28](https://github.com/tinper-bee/bee-table/compare/v1.6.27...v1.6.28) (2019-01-09)

2
build/FilterDropDown.js
View File

@ -28,7 +28,7 @@ var _beeIcon = require('bee-icon');
var _beeIcon2 = _interopRequireDefault(_beeIcon); var _beeIcon2 = _interopRequireDefault(_beeIcon);
var _i18n = require('./i18n'); var _i18n = require('./lib/i18n');
var _i18n2 = _interopRequireDefault(_i18n); var _i18n2 = _interopRequireDefault(_i18n);

12
build/Table.css
View File

@ -191,6 +191,11 @@
word-break: break-all; } word-break: break-all; }
.u-table tr th:last-child { .u-table tr th:last-child {
overflow: hidden; } 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 { .u-table-row-hover {
background: #e3f2fd; } background: #e3f2fd; }
.u-table-scroll { .u-table-scroll {
@ -443,6 +448,9 @@
.u-table-row-fixed-columns-in-body { .u-table-row-fixed-columns-in-body {
display: none; display: none;
pointer-events: none; } pointer-events: none; }
.u-table .u-checkbox {
height: 16px;
line-height: 16px; }
.u-table:focus { .u-table:focus {
outline: none; outline: none;
@ -626,7 +634,3 @@
height: 32px; height: 32px;
padding: 0px 16px 0 16px; padding: 0px 16px 0 16px;
cursor: pointer; } cursor: pointer; }
.u-checkbox {
height: 16px;
line-height: 16px; }

18
build/Table.js
View File

@ -284,7 +284,7 @@ var Table = function (_Component) {
} }
//适配lazyload //适配lazyload
if (nextProps.scrollTop) { if (nextProps.scrollTop) {
this.refs.bodyTable.scrollTop = nextProps.scrollTop; // this.refs.bodyTable.scrollTop = nextProps.scrollTop;
this.scrollTop = nextProps.scrollTop; this.scrollTop = nextProps.scrollTop;
} }
if (!nextProps.originWidth) { if (!nextProps.originWidth) {
@ -308,6 +308,7 @@ var Table = function (_Component) {
if (this.scrollTop) { if (this.scrollTop) {
this.refs.fixedColumnsBodyLeft && (this.refs.fixedColumnsBodyLeft.scrollTop = this.scrollTop); this.refs.fixedColumnsBodyLeft && (this.refs.fixedColumnsBodyLeft.scrollTop = this.scrollTop);
this.refs.fixedColumnsBodyRight && (this.refs.fixedColumnsBodyRight.scrollTop = this.scrollTop); this.refs.fixedColumnsBodyRight && (this.refs.fixedColumnsBodyRight.scrollTop = this.scrollTop);
this.refs.bodyTable.scrollTop = this.scrollTop;
this.scrollTop = 0; this.scrollTop = 0;
} }
}; };
@ -511,7 +512,8 @@ var Table = function (_Component) {
drgHover: column.drgHover, drgHover: column.drgHover,
fixed: column.fixed, fixed: column.fixed,
width: width, width: width,
dataindex: column.dataIndex dataindex: column.dataIndex,
textAlign: column.textAlign
}; };
if (column.onHeadCellClick) { if (column.onHeadCellClick) {
cell.onClick = column.onHeadCellClick; cell.onClick = column.onHeadCellClick;
@ -1132,7 +1134,8 @@ var Table = function (_Component) {
_props8$scroll = _props8.scroll, _props8$scroll = _props8.scroll,
scroll = _props8$scroll === undefined ? {} : _props8$scroll, scroll = _props8$scroll === undefined ? {} : _props8$scroll,
clsPrefix = _props8.clsPrefix, clsPrefix = _props8.clsPrefix,
handleScroll = _props8.handleScroll; handleScrollY = _props8.handleScrollY,
handleScrollX = _props8.handleScrollX;
var _refs = this.refs, var _refs = this.refs,
headTable = _refs.headTable, headTable = _refs.headTable,
bodyTable = _refs.bodyTable, bodyTable = _refs.bodyTable,
@ -1161,6 +1164,9 @@ var Table = function (_Component) {
if (position) { if (position) {
(0, _componentClasses2["default"])(this.contentTable).remove(new RegExp('^' + clsPrefix + '-scroll-position-.+$')).add(clsPrefix + '-scroll-position-' + 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); // console.log('lastScrollTop--'+this.lastScrollTop+'--eventScrollTop--'+ e.target.scrollTop);
if (scroll.y && this.lastScrollTop != e.target.scrollTop) { if (scroll.y && this.lastScrollTop != e.target.scrollTop) {
@ -1174,8 +1180,8 @@ var Table = function (_Component) {
bodyTable.scrollTop = e.target.scrollTop; bodyTable.scrollTop = e.target.scrollTop;
} }
this.lastScrollTop = e.target.scrollTop; this.lastScrollTop = e.target.scrollTop;
if (handleScroll) { if (handleScrollY) {
(0, _utils.debounce)(handleScroll(this.lastScrollTop, this.treeType), 300); (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) { { className: className, style: props.style, ref: function ref(el) {
return _this6.contentTable = el; return _this6.contentTable = el;
}, },
tabIndex: props.tabIndex ? props.tabIndex : '0' }, tabIndex: props.focusable && (props.tabIndex ? props.tabIndex : '0') },
this.getTitle(), this.getTitle(),
_react2["default"].createElement( _react2["default"].createElement(
'div', 'div',

3
build/TableCell.js
View File

@ -111,6 +111,9 @@ var TableCell = function (_Component) {
if (column.fixed && !fixed) { if (column.fixed && !fixed) {
className = className + (' ' + clsPrefix + '-fixed-columns-in-body'); className = className + (' ' + clsPrefix + '-fixed-columns-in-body');
} }
if (column.textAlign) {
className = className + (' text-' + column.textAlign);
}
return _react2["default"].createElement( return _react2["default"].createElement(
'td', 'td',
{ {

28
build/TableHeader.js
View File

@ -614,7 +614,6 @@ var TableHeader = function (_Component) {
var attr = dragborder ? { id: "u-table-drag-thead-" + this.theadKey } : {}; var attr = dragborder ? { id: "u-table-drag-thead-" + this.theadKey } : {};
return _react2["default"].createElement( return _react2["default"].createElement(
"thead", "thead",
_extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll", ref: function ref(_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) { rows.map(function (row, index) {
return _react2["default"].createElement( return _react2["default"].createElement(
"tr", "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) { row.map(function (da, columIndex, arr) {
var thHover = da.drgHover ? " " + clsPrefix + "-thead th-drag-hover" : ""; var thHover = da.drgHover ? " " + clsPrefix + "-thead th-drag-hover" : "";
delete da.drgHover; delete da.drgHover;
@ -637,13 +636,27 @@ var TableHeader = function (_Component) {
if (lastShowIndex == columIndex) { if (lastShowIndex == columIndex) {
canDotDrag = "th-can-not-drag"; 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) { if (filterable && index == rows.length - 1) {
da.children = _this2.filterRenderType(da["filtertype"], da.dataindex, columIndex); da.children = _this2.filterRenderType(da["filtertype"], da.dataindex, columIndex);
if (da.key === undefined) {
keyTemp.key = keyTemp.key + '-filterable';
}
delete da.filterdropdownfocus; delete da.filterdropdownfocus;
} }
var thDefaultObj = {}; var thDefaultObj = {};
var thClassName = "" + da.className ? "" + da.className : '';
if (draggable) { if (draggable) {
thClassName += clsPrefix + "-thead th-drag " + thHover + " "; thClassName += clsPrefix + "-thead th-drag " + thHover + " ";
} }
@ -651,10 +664,12 @@ var TableHeader = function (_Component) {
thClassName += clsPrefix + "-thead-th " + canDotDrag; thClassName += clsPrefix + "-thead-th " + canDotDrag;
} }
thClassName += " " + fixedStyle; thClassName += " " + fixedStyle;
if (!da.fixed) { if (!da.fixed) {
return _react2["default"].createElement( return _react2["default"].createElement(
"th", "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 }), "data-line-key": da.key, "data-line-index": columIndex, "data-th-width": da.width }),
da.children, da.children,
dragborder ? _react2["default"].createElement( dragborder ? _react2["default"].createElement(
@ -669,13 +684,12 @@ var TableHeader = function (_Component) {
); );
} else { } else {
thDefaultObj = _extends({}, da, { thDefaultObj = _extends({}, da, {
className: da.className + " " + fixedStyle, className: thClassName + " " + fixedStyle
key: columIndex
}); });
da.onClick ? thDefaultObj.onClick = function (e) { da.onClick ? thDefaultObj.onClick = function (e) {
da.onClick(da, 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 }));
} }
}) })
); );

18
build/TableRow.js
View File

@ -128,13 +128,8 @@ var TableRow = function (_Component) {
TableRow.prototype.componentDidUpdate = function componentDidUpdate(prevProps) { TableRow.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
if (this.props.treeType) { if (this.props.treeType) {
this.setRowParentIndex(); 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() { TableRow.prototype.componentWillUnmount = function componentWillUnmount() {
@ -234,7 +229,8 @@ var TableRow = function (_Component) {
indent = _props9.indent, indent = _props9.indent,
indentSize = _props9.indentSize, indentSize = _props9.indentSize,
isHiddenExpandIcon = _props9.isHiddenExpandIcon, isHiddenExpandIcon = _props9.isHiddenExpandIcon,
fixed = _props9.fixed; fixed = _props9.fixed,
hoverKey = _props9.hoverKey;
var showSum = false; var showSum = false;
var className = this.props.className; var className = this.props.className;
@ -279,7 +275,7 @@ var TableRow = function (_Component) {
indent: indent, indent: indent,
index: index, index: index,
column: columns[i], column: columns[i],
key: columns[i].key, key: columns[i].key || columns[i].dataIndex || i,
fixed: fixed, fixed: fixed,
showSum: showSum, showSum: showSum,
expandIcon: isColumnHaveExpandIcon ? expandIcon : null expandIcon: isColumnHaveExpandIcon ? expandIcon : null
@ -289,7 +285,6 @@ var TableRow = function (_Component) {
if (!visible) { if (!visible) {
style.display = 'none'; style.display = 'none';
} }
return _react2["default"].createElement( return _react2["default"].createElement(
'tr', 'tr',
{ {
@ -298,8 +293,9 @@ var TableRow = function (_Component) {
onMouseEnter: this.onMouseEnter, onMouseEnter: this.onMouseEnter,
onMouseLeave: this.onMouseLeave, onMouseLeave: this.onMouseLeave,
className: clsPrefix + ' ' + className + ' ' + clsPrefix + '-level-' + indent, className: clsPrefix + ' ' + className + ' ' + clsPrefix + '-level-' + indent,
style: style, style: style
ref: this.bindElement // key={hoverKey}
, ref: this.bindElement
}, },
cells.length > 0 ? cells : _react2["default"].createElement('td', null) cells.length > 0 ? cells : _react2["default"].createElement('td', null)
); );

159
build/lib/bigData.js
View File

@ -16,8 +16,6 @@ var _propTypes = require("prop-types");
var _propTypes2 = _interopRequireDefault(_propTypes); var _propTypes2 = _interopRequireDefault(_propTypes);
var _utils = require("../utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } 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; } 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) { 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; var scrollY = nextProps.scroll.y ? parseInt(nextProps.scroll.y) : 0;
this.rowsInView = scrollY ? Math.ceil(scrollY / rowHeight) : 20; _this.rowsInView = scrollY ? Math.ceil(scrollY / rowHeight) : 20;
this.loadCount = props.loadBuffer ? this.rowsInView + props.loadBuffer * 2 : 26; //一次加载多少数据 _this.loadCount = props.loadBuffer ? _this.rowsInView + props.loadBuffer * 2 : 26; //一次加载多少数据
this.currentIndex = 0; _this.currentIndex = 0;
this.startIndex = this.currentIndex; //数据开始位置 _this.startIndex = _this.currentIndex; //数据开始位置
this.endIndex = this.currentIndex + this.loadCount; //数据结束位置 _this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置
if (_this.endIndex > dataLen) {
_this.endIndex = dataLen;
}
}
if (nextProps.data !== props.data) {
_this.computeCachedRowParentIndex(nextProps.data);
}
//如果传currentIndex，会判断该条数据是否在可视区域，如果没有的话，则重新计算startIndex和endIndex
if (currentIndex !== -1 && currentIndex !== this.currentIndex) {
_this.setStartAndEndIndex(currentIndex, dataLen);
} }
}; };
BigData.prototype.componentDidMount = function componentDidMount() { BigData.prototype.componentDidMount = function componentDidMount() {
var _this3 = this; var data = this.props.data;
var isTreeType = this.checkIsTreeType(); this.computeCachedRowParentIndex(data);
if (isTreeType) { };
var data = this.props.data;
data.forEach(function (item, index) { /**
_this3.firstLevelKey[index] = _this3.getRowKey(item, index); *设置data中每个元素的parentIndex
_this3.cachedRowParentIndex[treeTypeIndex] = index; *
//保存所有的keys跟小标对应起来 */
_this3.keys[treeTypeIndex] = _this3.getRowKey(item, index);
treeTypeIndex++;
if (item.children) { BigData.prototype.setStartAndEndIndex = function setStartAndEndIndex(currentIndex, dataLen) {
_this3.getData(item.children, index); var _this = this;
} if (currentIndex > _this.endIndex) {
}); _this.currentIndex = currentIndex;
_this.endIndex = _this.currentIndex; //数据开始位置
_this.startIndex = _this.currentIndex - _this.loadCount; //数据结束位置
if (_this.endIndex > dataLen) {
_this.endIndex = dataLen;
}
if (_this.startIndex < 0) {
_this.startIndex = 0;
}
} else if (currentIndex < _this.startIndex) {
_this.currentIndex = currentIndex;
_this.startIndex = currentIndex;
_this.endIndex = currentIndex + _this.loadCount;
if (_this.endIndex > dataLen) {
_this.endIndex = dataLen;
}
if (_this.startIndex < 0) {
_this.startIndex = 0;
}
} }
//重新设定scrollTop值
_this.scrollTop = _this.getSumHeight(0, _this.endIndex - _this.rowsInView + 2);
}; };
BigData.prototype.getRowKey = function getRowKey(record, index) { BigData.prototype.getRowKey = function getRowKey(record, index) {
var rowKey = this.props.rowKey; var rowKey = this.props.rowKey;
var key = typeof rowKey === 'function' ? rowKey(record, index) : record[rowKey]; var key = typeof rowKey === "function" ? rowKey(record, index) : record[rowKey];
(0, _utils.warningOnce)(key !== undefined, 'Each record in table should have a unique `key` prop,' + 'or set `rowKey` to an unique primary key.');
return key; return key;
}; };
/** /**
@ -127,14 +161,14 @@ function bigData(Table) {
}; };
BigData.prototype.getData = function getData(data, parentIndex) { BigData.prototype.getData = function getData(data, parentIndex) {
var _this4 = this; var _this3 = this;
data.forEach(function (subItem, subIndex) { data.forEach(function (subItem, subIndex) {
_this4.cachedRowParentIndex[treeTypeIndex] = parentIndex; _this3.cachedRowParentIndex[treeTypeIndex] = parentIndex;
_this4.keys[treeTypeIndex] = _this4.getRowKey(subItem, subIndex); _this3.keys[treeTypeIndex] = _this3.getRowKey(subItem, subIndex);
treeTypeIndex++; treeTypeIndex++;
if (subItem.children) { 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) {} 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, { return _react2["default"].createElement(Table, _extends({}, this.props, {
data: data.slice(startIndex, endIndex), data: data.slice(startIndex, endIndex),
lazyLoad: lazyLoad, lazyLoad: lazyLoad,
handleScroll: this.handleScroll, handleScrollY: this.handleScrollY,
scrollTop: scrollTop, scrollTop: scrollTop,
setRowHeight: this.setRowHeight, setRowHeight: this.setRowHeight,
setRowParentIndex: this.setRowParentIndex, setRowParentIndex: this.setRowParentIndex,
@ -272,18 +306,38 @@ function bigData(Table) {
}(_react.Component), _class.defaultProps = { }(_react.Component), _class.defaultProps = {
data: [], data: [],
loadBuffer: 5, loadBuffer: 5,
rowKey: 'key' rowKey: "key",
onExpand: function onExpand() {},
scroll: {},
currentIndex: -1
}, _class.propTypes = { }, _class.propTypes = {
loadBuffer: _propTypes2["default"].number loadBuffer: _propTypes2["default"].number
}, _initialiseProps = function _initialiseProps() { }, _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 // 关键点是动态的获取startIndex和endIndex
// 法子一：子节点也看成普通tr，最开始需要设置一共有多少行，哪行显示哪行不显示如何确定 // 法子一：子节点也看成普通tr，最开始需要设置一共有多少行，哪行显示哪行不显示如何确定
// 动态取start = current+buffer对应的父节点、end = start+loadCount+row的height为0的行数 展开节点的下一个节点作为end值， // 动态取start = current+buffer对应的父节点、end = start+loadCount+row的height为0的行数 展开节点的下一个节点作为end值，
var _this = _this5; var _this = _this4;
var _this$props = _this.props, var _this$props = _this.props,
data = _this$props.data, data = _this$props.data,
height = _this$props.height, height = _this$props.height,
@ -332,12 +386,12 @@ function bigData(Table) {
var temp = nextScrollTop; var temp = nextScrollTop;
var currentKey = void 0; var currentKey = void 0;
while (temp > 0) { while (temp > 0) {
var currentRowHeight = _this5.cachedRowHeight[index]; var currentRowHeight = _this4.cachedRowHeight[index];
if (currentRowHeight === undefined) { if (currentRowHeight === undefined) {
if (_this5.treeType) { if (_this4.treeType) {
currentKey = _this5.keys[index]; currentKey = _this4.keys[index];
currentRowHeight = 0; 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; currentRowHeight = rowHeight;
} }
} else { } else {
@ -362,9 +416,9 @@ function bigData(Table) {
if (viewHeight) { if (viewHeight) {
//有时滚动过快时this.cachedRowHeight[rowsInView + index]为undifined //有时滚动过快时this.cachedRowHeight[rowsInView + index]为undifined
while (rowsHeight < viewHeight && tempIndex < _this5.cachedRowHeight.length) { while (rowsHeight < viewHeight && tempIndex < _this4.cachedRowHeight.length) {
if (_this5.cachedRowHeight[tempIndex]) { if (_this4.cachedRowHeight[tempIndex]) {
rowsHeight += _this5.cachedRowHeight[tempIndex]; rowsHeight += _this4.cachedRowHeight[tempIndex];
if (treeType && _this.cachedRowParentIndex[tempIndex] !== tempIndex || !treeType) { if (treeType && _this.cachedRowParentIndex[tempIndex] !== tempIndex || !treeType) {
rowsInView++; rowsInView++;
} }
@ -376,7 +430,7 @@ function bigData(Table) {
index = _this.cachedRowParentIndex[treeIndex]; index = _this.cachedRowParentIndex[treeIndex];
if (index === undefined) { if (index === undefined) {
// console.log('index is undefined********'+treeIndex); // console.log('index is undefined********'+treeIndex);
index = _this5.getParentIndex(treeIndex); index = _this4.getParentIndex(treeIndex);
// console.log("getParentIndex****"+index); // console.log("getParentIndex****"+index);
} }
} }
@ -384,7 +438,6 @@ function bigData(Table) {
// 如果rowsInView 小于 缓存的数据则重新render // 如果rowsInView 小于 缓存的数据则重新render
// 向下滚动 下临界值超出缓存的endIndex则重新渲染 // 向下滚动 下临界值超出缓存的endIndex则重新渲染
if (rowsInView + index > endIndex - rowDiff && isOrder) { if (rowsInView + index > endIndex - rowDiff && isOrder) {
startIndex = index - loadBuffer > 0 ? index - loadBuffer : 0; startIndex = index - loadBuffer > 0 ? index - loadBuffer : 0;
endIndex = startIndex + loadCount; endIndex = startIndex + loadCount;
//树状结构则根据当前的节点重新计算startIndex和endIndex //树状结构则根据当前的节点重新计算startIndex和endIndex
@ -401,10 +454,10 @@ function bigData(Table) {
if (endIndex > data.length) { if (endIndex > data.length) {
endIndex = data.length; endIndex = data.length;
} }
if (startIndex !== _this5.startIndex || endIndex !== _this5.endIndex) { if (startIndex !== _this4.startIndex || endIndex !== _this4.endIndex) {
_this5.startIndex = startIndex; _this4.startIndex = startIndex;
_this5.endIndex = endIndex; _this4.endIndex = endIndex;
_this5.setState({ needRender: !needRender }); _this4.setState({ needRender: !needRender });
} }
// console.log( // console.log(
// "===================", // "===================",
@ -419,10 +472,10 @@ function bigData(Table) {
if (startIndex < 0) { if (startIndex < 0) {
startIndex = 0; startIndex = 0;
} }
if (startIndex !== _this5.startIndex || endIndex !== _this5.endIndex) { if (startIndex !== _this4.startIndex || endIndex !== _this4.endIndex) {
_this5.startIndex = startIndex; _this4.startIndex = startIndex;
_this5.endIndex = _this5.startIndex + loadCount; _this4.endIndex = _this4.startIndex + loadCount;
_this5.setState({ needRender: !needRender }); _this4.setState({ needRender: !needRender });
} }
// console.log( // console.log(
// "**index**" + index, // "**index**" + index,
@ -435,7 +488,7 @@ function bigData(Table) {
}; };
this.onExpand = function (expandState, record) { this.onExpand = function (expandState, record) {
var _this = _this5; var _this = _this4;
// 展开 // 展开
if (expandState) { if (expandState) {
record.children && record.children.forEach(function (item, index) { record.children && record.children.forEach(function (item, index) {
@ -449,6 +502,8 @@ function bigData(Table) {
}), 1); }), 1);
}); });
} }
_this.props.onExpand(expandState, record);
}; };
}, _temp; }, _temp;
} }

28
build/lib/dragColumn.js
View File

@ -57,21 +57,29 @@ function dragColumn(Table) {
dragTarg = data.dragTarg; dragTarg = data.dragTarg;
var columns = _this.state.columns; 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; return da.key == dragSource.key;
}); });
var dragTargColum = columns.find(function (da, i) { targetIndex = columns.findIndex(function (da, i) {
return da.key == dragTarg.key; return da.key == dragTarg.key;
}); });
for (var index = 0; index < columns.length; index++) { // for (let index = 0; index < columns.length; index++) {
var da = columns[index]; // const da = columns[index];
if (da.key === dragSource.key) { // if(da.key === dragSource.key){
columns[index] = dragTargColum; // columns[index] = dragTargColum;
} // }
if (da.key === dragTarg.key) { // if(da.key === dragTarg.key){
columns[index] = dragSourceColum; // columns[index] = dragSourceColum;
} // }
// }
// 向前移动
if (targetIndex < sourceIndex) {
targetIndex = targetIndex + 1;
} }
columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
_this.setState({ _this.setState({
columns: cloneDeep(columns) columns: cloneDeep(columns)
}); });

2
build/lib/filterColumn.js
View File

@ -22,7 +22,7 @@ var _beeIcon2 = _interopRequireDefault(_beeIcon);
var _util = require("./util"); var _util = require("./util");
var _i18n = require("../i18n"); var _i18n = require("./i18n");
var _i18n2 = _interopRequireDefault(_i18n); var _i18n2 = _interopRequireDefault(_i18n);

0
build/i18n.js → build/lib/i18n.js
View File

474
build/lib/sort.js
View File

@ -28,7 +28,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
* @param {*} Icon * @param {*} Icon
*/ */
function sort(Table, Icon) { function sort(Table, Icon) {
var _class, _temp; var _class, _temp, _initialiseProps;
var IconType = [{ var IconType = [{
'type': 'flat', 'type': 'flat',
@ -50,214 +50,20 @@ function sort(Table, Icon) {
function SortTable(props) { function SortTable(props) {
_classCallCheck(this, SortTable); _classCallCheck(this, SortTable);
var _this = _possibleConstructorReturn(this, _Component.call(this, props)); var _this2 = _possibleConstructorReturn(this, _Component.call(this, props));
_this.getOrderNum = function () { _initialiseProps.call(_this2);
var orderNum = 0;
_this.state.columns.forEach(function (item, index) {
if (item.order == 'ascend' || item.order == 'descend') {
orderNum++;
}
});
return orderNum ? orderNum : 1;
};
_this.changeOrderNum = function (column) { var flatColumns = [];
var columns = _this.state.columns; _this2._toFlatColumn(props.columns, -1, flatColumns);
_this2.state = { data: _this2.props.data, columns: props.columns, flatColumns: flatColumns };
columns.forEach(function (col) { return _this2;
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;
} }
//默认是前端排序，值为true为后端排序
SortTable.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) { SortTable.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (nextProps.data !== this.props.data) { if (nextProps.data !== this.props.data) {
this.setState({ this.setState({
data: nextProps.data, data: nextProps.data,
@ -265,11 +71,34 @@ function sort(Table, Icon) {
}); });
} }
if (nextProps.columns !== this.props.columns) { if (nextProps.columns !== this.props.columns) {
this.setState({ var flatColumns = [];
columns: nextProps.columns 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 当前的排序的列 * column 当前的排序的列
@ -296,17 +125,238 @@ function sort(Table, Icon) {
//点击置为“”时，动态的设置相关column的orderNum值。并排序 //点击置为“”时，动态的设置相关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() { 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 _react2["default"].createElement(Table, _extends({}, this.props, { columns: columns, data: this.state.data }));
}; };
return SortTable; return SortTable;
}(_react.Component), _class.defaultProps = { }(_react.Component), _class.defaultProps = { sort: { mode: "single", backSource: false } }, _initialiseProps = function _initialiseProps() {
sort: { var _this3 = this;
mode: 'single',
backSource: false //默认是前端排序，值为true为后端排序 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; }, _temp;
} }
module.exports = exports['default']; module.exports = exports['default'];

2
demo/demolist/Demo11.js
View File

@ -1,5 +1,5 @@
/** /**
* * @description column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据，c代表比较当前对象的字段名称
* @title 列排序 * @title 列排序
* *
*/ */

3
demo/demolist/Demo30.js
View File

@ -86,7 +86,6 @@ class Demo30 extends Component {
<BigDataTable <BigDataTable
columns={columns} columns={columns}
data={data} data={data}
parentNodeId='parent'
scroll={{y:300}} scroll={{y:300}}
height={40} height={40}
onRowClick={(record, index, indent) => { onRowClick={(record, index, indent) => {
@ -99,4 +98,4 @@ class Demo30 extends Component {
} }
} }
export default Demo30; export default Demo30;

1
demo/demolist/Demo33.js
View File

@ -107,6 +107,7 @@ class Demo33 extends Component {
onKeyDown={this.onKeyDown} onKeyDown={this.onKeyDown}
onTableKeyDown={this.onTableKeyDown} onTableKeyDown={this.onTableKeyDown}
scroll={{ x: "110%", y: 140 }} scroll={{ x: "110%", y: 140 }}
focusable = {true}
/> />
<input /> <input />
</div> </div>

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

12
dist/demo.css vendored
View File

@ -8452,6 +8452,11 @@ ul {
word-break: break-all; } word-break: break-all; }
.u-table tr th:last-child { .u-table tr th:last-child {
overflow: hidden; } 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 { .u-table-row-hover {
background: #e3f2fd; } background: #e3f2fd; }
.u-table-scroll { .u-table-scroll {
@ -8706,6 +8711,9 @@ ul {
.u-table-row-fixed-columns-in-body { .u-table-row-fixed-columns-in-body {
display: none; display: none;
pointer-events: none; } pointer-events: none; }
.u-table .u-checkbox {
height: 16px;
line-height: 16px; }
.u-table:focus { .u-table:focus {
outline: none; outline: none;
@ -8890,10 +8898,6 @@ ul {
padding: 0px 16px 0 16px; padding: 0px 16px 0 16px;
cursor: pointer; } cursor: pointer; }
.u-checkbox {
height: 16px;
line-height: 16px; }
/* FormGroup */ /* FormGroup */
/* Navlayout */ /* Navlayout */
/* FormGroup */ /* FormGroup */

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

908
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

6
docs/api.md
View File

@ -45,7 +45,7 @@ import 'bee-table/build/Table.css';
| expandedRowRender | 额外的展开行 | Function(record, index, indent):node | - | | expandedRowRender | 额外的展开行 | Function(record, index, indent):node | - |
| expandIconAsCell | 展开按钮是否单独作为一个单元格 | bool | false | | expandIconAsCell | 展开按钮是否单独作为一个单元格 | bool | false |
| expandRowByClick | 设置展开行是否通过点击行触发，此参数需要与上面参数搭配使用（默认是通过点击行前面的加号展开行 | 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 | | loading | 表格是否加载中 | bool|object(详情可以参考上面示例) | false |
| haveExpandIcon | 控制是否显示行展开icon.**注：该参数只有在和expandedRowRender同时使用才生效** | Function(record, index):bool | () =>false | | haveExpandIcon | 控制是否显示行展开icon.**注：该参数只有在和expandedRowRender同时使用才生效** | Function(record, index):bool | () =>false |
| filterable | 是否开启根据条件来过滤数据 | bool | false | filterable | 是否开启根据条件来过滤数据 | bool | false
@ -74,7 +74,7 @@ import 'bee-table/build/Table.css';
|dataIndex| 显示数据记录的字段|String|-| |dataIndex| 显示数据记录的字段|String|-|
|width|宽度的特定比例根据列的宽度计算|String/Number|-| |width|宽度的特定比例根据列的宽度计算|String/Number|-|
|fixed| 当表水平滚动时，此列将被固定：true或'left'或'right'| true/'left'/'right'|-| |fixed| 当表水平滚动时，此列将被固定：true或'left'或'right'| true/'left'/'right'|-|
|sorter|前端列排序方法，只要列上有此属性就说明这列可排序。**注：默认是前端排序**| function|-| |sorter|前端列排序方法，只要列上有此属性就说明这列可排序。**注：默认是前端排序,排序方法书写时注意有些字段可能是undefined的情况，需要转换成0**| function|-|
|sorterClick|排序的回调函数|function|-| |sorterClick|排序的回调函数|function|-|
|render|cell的render函数有三个参数：这个单元格的文本，这行的记录，这行的索引，它返回一个对象：{children：value，props：{colSpan：1，rowSpan：1}} ==>'children'是这个单元格的文本，props是这个单元格的一些设置，可以设置单元格行/列合并|-| |render|cell的render函数有三个参数：这个单元格的文本，这行的记录，这行的索引，它返回一个对象：{children：value，props：{colSpan：1，rowSpan：1}} ==>'children'是这个单元格的文本，props是这个单元格的一些设置，可以设置单元格行/列合并|-|
|onCellClick|单击列的单元格时调用|Function(row, event)|-| |onCellClick|单击列的单元格时调用|Function(row, event)|-|
@ -88,12 +88,14 @@ import 'bee-table/build/Table.css';
| filterDropdownType | 下拉条件类型，分为 string 和 number 条件类型 | string | string | filterDropdownType | 下拉条件类型，分为 string 和 number 条件类型 | string | string
| filterDropdownIncludeKeys | 能够设置指定的下拉条件项，通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有 | filterDropdownIncludeKeys | 能够设置指定的下拉条件项，通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有
| filterInputNumberOptions | 数值框接收的props，具体属性参考bee-input-number | object | null | filterInputNumberOptions | 数值框接收的props，具体属性参考bee-input-number | object | null
| textAlign | 内容对齐方式，默认是左对齐（'left、right、center'） | string |
## 快捷键API ## 快捷键API
| 快捷键 | 快捷键说明 | 类型 | 默认值 | | 快捷键 | 快捷键说明 | 类型 | 默认值 |
| --- | :--- | --- |--- | | --- | :--- | --- |--- |
| focusable | 是否开启快捷键功能 | bool | -
| onKeyTab | tab快捷键，可以处理默认选中第一条数据 | function| - | onKeyTab | tab快捷键，可以处理默认选中第一条数据 | function| -
| onKeyUp | ↑(上箭) 快捷键，可以处理table的上一条数据 | function| - | onKeyUp | ↑(上箭) 快捷键，可以处理table的上一条数据 | function| -
| onKeyDown | ↓(下箭)快捷键，可以处理table的下一条数据 | function| - | onKeyDown | ↓(下箭)快捷键，可以处理table的下一条数据 | function| -

4
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "bee-table", "name": "bee-table",
"version": "1.6.28", "version": "1.6.32",
"description": "Table ui component for react", "description": "Table ui component for react",
"keywords": [ "keywords": [
"react", "react",
@ -55,7 +55,7 @@
"bee-input-number": "^1.1.15", "bee-input-number": "^1.1.15",
"bee-loading": "^1.0.3", "bee-loading": "^1.0.3",
"bee-locale": "0.0.11", "bee-locale": "0.0.11",
"bee-menus": "^1.0.7", "bee-menus": "1.0.7",
"bee-modal": "^1.0.9", "bee-modal": "^1.0.9",
"bee-popover": "^1.0.2", "bee-popover": "^1.0.2",
"bee-select": "^1.0.21", "bee-select": "^1.0.21",

2
src/FilterDropDown.js
View File

@ -8,7 +8,7 @@ import Dropdown from 'bee-dropdown';
import Menu from 'bee-menus'; import Menu from 'bee-menus';
import Button from 'bee-button'; import Button from 'bee-button';
import Icon from 'bee-icon'; import Icon from 'bee-icon';
import i18n from './i18n'; import i18n from './lib/i18n';
import { getComponentLocale } from 'bee-locale/build/tool'; import { getComponentLocale } from 'bee-locale/build/tool';
const { Item } = Menu; const { Item } = Menu;

21
src/Table.js
View File

@ -184,7 +184,7 @@ class Table extends Component {
} }
//适配lazyload //适配lazyload
if(nextProps.scrollTop){ if(nextProps.scrollTop){
this.refs.bodyTable.scrollTop = nextProps.scrollTop; // this.refs.bodyTable.scrollTop = nextProps.scrollTop;
this.scrollTop = nextProps.scrollTop; this.scrollTop = nextProps.scrollTop;
} }
if (!nextProps.originWidth) { if (!nextProps.originWidth) {
@ -209,6 +209,7 @@ class Table extends Component {
if(this.scrollTop){ if(this.scrollTop){
this.refs.fixedColumnsBodyLeft && ( this.refs.fixedColumnsBodyLeft.scrollTop = this.scrollTop); this.refs.fixedColumnsBodyLeft && ( this.refs.fixedColumnsBodyLeft.scrollTop = this.scrollTop);
this.refs.fixedColumnsBodyRight && ( this.refs.fixedColumnsBodyRight.scrollTop = this.scrollTop); this.refs.fixedColumnsBodyRight && ( this.refs.fixedColumnsBodyRight.scrollTop = this.scrollTop);
this.refs.bodyTable.scrollTop = this.scrollTop;
this.scrollTop = 0; this.scrollTop = 0;
} }
@ -310,6 +311,8 @@ class Table extends Component {
'or set `rowKey` to an unique primary key.' 'or set `rowKey` to an unique primary key.'
); );
return key; return key;
} }
getExpandedRows() { getExpandedRows() {
@ -392,7 +395,8 @@ class Table extends Component {
drgHover: column.drgHover, drgHover: column.drgHover,
fixed: column.fixed, fixed: column.fixed,
width: width, width: width,
dataindex:column.dataIndex dataindex:column.dataIndex,
textAlign:column.textAlign
}; };
if (column.onHeadCellClick) { if (column.onHeadCellClick) {
cell.onClick = column.onHeadCellClick; cell.onClick = column.onHeadCellClick;
@ -980,7 +984,7 @@ class Table extends Component {
handleBodyScroll(e) { handleBodyScroll(e) {
const { scroll = {},clsPrefix,handleScroll } = this.props; const { scroll = {},clsPrefix,handleScrollY, handleScrollX} = this.props;
const { headTable, bodyTable, fixedColumnsBodyLeft, fixedColumnsBodyRight } = this.refs; const { headTable, bodyTable, fixedColumnsBodyLeft, fixedColumnsBodyRight } = this.refs;
// Prevent scrollTop setter trigger onScroll event // Prevent scrollTop setter trigger onScroll event
// http://stackoverflow.com/q/1386696 // http://stackoverflow.com/q/1386696
@ -1008,6 +1012,11 @@ class Table extends Component {
.remove(new RegExp(`^${clsPrefix}-scroll-position-.+$`)) .remove(new RegExp(`^${clsPrefix}-scroll-position-.+$`))
.add(`${clsPrefix}-scroll-position-${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); // console.log('lastScrollTop--'+this.lastScrollTop+'--eventScrollTop--'+ e.target.scrollTop);
if (scroll.y && this.lastScrollTop != e.target.scrollTop) { if (scroll.y && this.lastScrollTop != e.target.scrollTop) {
@ -1021,9 +1030,9 @@ class Table extends Component {
bodyTable.scrollTop = e.target.scrollTop; bodyTable.scrollTop = e.target.scrollTop;
} }
this.lastScrollTop = e.target.scrollTop; this.lastScrollTop = e.target.scrollTop;
if(handleScroll){ if(handleScrollY){
debounce( debounce(
handleScroll(this.lastScrollTop,this.treeType), handleScrollY(this.lastScrollTop,this.treeType),
300) 300)
} }
} }
@ -1091,7 +1100,7 @@ class Table extends Component {
return ( return (
<div className={className} style={props.style} ref={el => this.contentTable = el} <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()} {this.getTitle()}
<div className={`${clsPrefix}-content`}> <div className={`${clsPrefix}-content`}>

20
src/Table.scss
View File

@ -80,6 +80,15 @@ $checkbox-height:16px;
th:last-child{ //拖拽tag影响了表格整体宽度 th:last-child{ //拖拽tag影响了表格整体宽度
overflow: hidden; overflow: hidden;
} }
&.filterable{
th{
padding-top: 4px;
padding-bottom: 4px;
.filterContext{
height: 35px;
}
}
}
} }
&-row-hover { &-row-hover {
background: rgb(227, 242, 253); background: rgb(227, 242, 253);
@ -476,6 +485,11 @@ $checkbox-height:16px;
display:none; display:none;
pointer-events: none; pointer-events: none;
} }
//固定列含有checkbox 样式复写
.u-checkbox {
height: $checkbox-height;
line-height: $checkbox-height;
}
} }
.u-table:focus{ .u-table:focus{
outline: none; outline: none;
@ -721,10 +735,6 @@ $checkbox-height:16px;
} }
} }
//固定列含有checkbox 样式复写
.u-checkbox {
height: $checkbox-height;
line-height: $checkbox-height;
}

3
src/TableCell.js
View File

@ -68,6 +68,9 @@ class TableCell extends Component{
if(column.fixed && !fixed){ if(column.fixed && !fixed){
className = className+` ${clsPrefix}-fixed-columns-in-body`; className = className+` ${clsPrefix}-fixed-columns-in-body`;
} }
if(column.textAlign){
className = className+` text-${column.textAlign}`;
}
return ( return (
<td <td
colSpan={colSpan} colSpan={colSpan}

44
src/TableHeader.js
View File

@ -536,11 +536,10 @@ class TableHeader extends Component {
} = this.props; } = this.props;
let attr = dragborder ? { id: `u-table-drag-thead-${this.theadKey}` } : {}; let attr = dragborder ? { id: `u-table-drag-thead-${this.theadKey}` } : {};
return ( return (
<thead className={`${clsPrefix}-thead`} {...attr} data-theader-fixed='scroll' ref={_thead=>this._thead = _thead} > <thead className={`${clsPrefix}-thead`} {...attr} data-theader-fixed='scroll' ref={_thead=>this._thead = _thead} >
{rows.map((row, index) => ( {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) => { {row.map((da, columIndex, arr) => {
let thHover = da.drgHover let thHover = da.drgHover
? ` ${clsPrefix}-thead th-drag-hover` ? ` ${clsPrefix}-thead th-drag-hover`
@ -556,17 +555,31 @@ class TableHeader extends Component {
if (lastShowIndex == columIndex) { if (lastShowIndex == columIndex) {
canDotDrag = "th-can-not-drag"; 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) { if (filterable && index == rows.length - 1) {
da.children = this.filterRenderType( da.children = this.filterRenderType(
da["filtertype"], da["filtertype"],
da.dataindex, da.dataindex,
columIndex columIndex
); );
if(da.key ===undefined ){
keyTemp.key = keyTemp.key + '-filterable'
}
delete da.filterdropdownfocus; delete da.filterdropdownfocus;
} }
let thDefaultObj = {}; let thDefaultObj = {};
let thClassName = `${da.className}`?`${da.className}`:'';
if(draggable){ if(draggable){
thClassName += `${clsPrefix}-thead th-drag ${thHover} `; thClassName += `${clsPrefix}-thead th-drag ${thHover} `;
} }
@ -574,25 +587,26 @@ class TableHeader extends Component {
thClassName += `${clsPrefix}-thead-th ${canDotDrag}`; thClassName += `${clsPrefix}-thead-th ${canDotDrag}`;
} }
thClassName += ` ${fixedStyle}`; thClassName += ` ${fixedStyle}`;
if(!da.fixed){ 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} > data-line-key={da.key} data-line-index={columIndex} data-th-width={da.width} >
{da.children} {da.children}
{ {
dragborder ? <div ref={el => (this.gap = el)} data-line-key={da.key} dragborder ? <div ref={el => (this.gap = el)} data-line-key={da.key}
data-line-index={columIndex} data-th-width={da.width} data-line-index={columIndex} data-th-width={da.width}
data-type="online" className = {`${clsPrefix}-thead-th-drag-gap`}> 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>:"" <div id='th-online' className='online' data-line-key={da.key} data-line-index={columIndex} data-th-width={da.width} /></div>:""
} }
</th>) </th>)
}else{ }else{
thDefaultObj = { thDefaultObj = {
...da, ...da,
className:`${da.className} ${fixedStyle}`, className:`${thClassName} ${fixedStyle}`,
key:columIndex
}; };
da.onClick ?thDefaultObj.onClick = (e)=>{da.onClick(da, e)}:""; 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> </tr>

16
src/TableRow.js
View File

@ -79,14 +79,8 @@ class TableRow extends Component{
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
if(this.props.treeType){ if(this.props.treeType){
this.setRowParentIndex(); this.setRowParentIndex();
this.setRowHeight()
// if(this.props.fixedIndex!== prevProps.fixedIndex){
// this.setRowHeight()
// }
}else if(this.props.index !== prevProps.index){
this.setRowHeight()
} }
this.setRowHeight()
} }
componentWillUnmount() { componentWillUnmount() {
const { record, onDestroy, index } = this.props; const { record, onDestroy, index } = this.props;
@ -162,7 +156,7 @@ class TableRow extends Component{
const { const {
clsPrefix, columns, record, height, visible, index, clsPrefix, columns, record, height, visible, index,
expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick, expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,
expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed, expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,hoverKey
} = this.props; } = this.props;
let showSum = false; let showSum = false;
let { className } = this.props; let { className } = this.props;
@ -210,7 +204,7 @@ class TableRow extends Component{
indent={indent} indent={indent}
index={index} index={index}
column={columns[i]} column={columns[i]}
key={columns[i].key} key={columns[i].key || columns[i].dataIndex || i}
fixed= {fixed} fixed= {fixed}
showSum={showSum} showSum={showSum}
expandIcon={(isColumnHaveExpandIcon) ? expandIcon : null} expandIcon={(isColumnHaveExpandIcon) ? expandIcon : null}
@ -221,8 +215,7 @@ class TableRow extends Component{
if (!visible) { if (!visible) {
style.display = 'none'; style.display = 'none';
} }
return (
return (
<tr <tr
onClick={this.onRowClick} onClick={this.onRowClick}
onDoubleClick={this.onRowDoubleClick} onDoubleClick={this.onRowDoubleClick}
@ -230,6 +223,7 @@ class TableRow extends Component{
onMouseLeave={this.onMouseLeave} onMouseLeave={this.onMouseLeave}
className={`${clsPrefix} ${className} ${clsPrefix}-level-${indent}`} className={`${clsPrefix} ${className} ${clsPrefix}-level-${indent}`}
style={style} style={style}
// key={hoverKey}
ref={this.bindElement} ref={this.bindElement}
> >
{cells.length>0?cells:<td></td>} {cells.length>0?cells:<td></td>}

353
src/lib/bigData.js
View File

@ -1,6 +1,5 @@
import React, { Component } from "react"; import React, { Component } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { warningOnce } from '../utils';
const defaultHeight = 40; const defaultHeight = 40;
const rowDiff = 3; //行差值 const rowDiff = 3; //行差值
let treeTypeIndex = 0; let treeTypeIndex = 0;
@ -9,7 +8,10 @@ export default function bigData(Table) {
static defaultProps = { static defaultProps = {
data: [], data: [],
loadBuffer: 5, loadBuffer: 5,
rowKey: 'key', rowKey: "key",
onExpand() {},
scroll: {},
currentIndex:-1
}; };
static propTypes = { static propTypes = {
loadBuffer: PropTypes.number loadBuffer: PropTypes.number
@ -29,10 +31,10 @@ export default function bigData(Table) {
? this.rowsInView + props.loadBuffer * 2 ? this.rowsInView + props.loadBuffer * 2
: 26; //一次加载多少数据 : 26; //一次加载多少数据
this.cachedRowHeight = []; //缓存每行的高度 this.cachedRowHeight = []; //缓存每行的高度
this.cachedRowParentIndex=[]; this.cachedRowParentIndex = [];
this.expandChildRowKeys=[]; this.expandChildRowKeys = [];
this.firstLevelKey=[]; this.firstLevelKey = [];
this.keys=[]; this.keys = [];
this.lastScrollTop = 0; this.lastScrollTop = 0;
this.currentScrollTop = 0; this.currentScrollTop = 0;
this.startIndex = this.currentIndex; //数据开始位置 this.startIndex = this.currentIndex; //数据开始位置
@ -40,77 +42,121 @@ export default function bigData(Table) {
this.setRowHeight = this.setRowHeight.bind(this); this.setRowHeight = this.setRowHeight.bind(this);
this.setRowParentIndex = this.setRowParentIndex.bind(this); this.setRowParentIndex = this.setRowParentIndex.bind(this);
} }
componentWillReceiveProps(nextProps){ componentWillReceiveProps(nextProps) {
if(nextProps.scroll.y !== this.props.scroll.y){ const props = this.props;
const scrollY = nextProps.scroll.y ? parseInt(nextProps.scroll.y) : 0; const {currentIndex ,data} = nextProps;
this.rowsInView = scrollY ? Math.ceil(scrollY / rowHeight) : 20; const _this = this,dataLen = data.length;
this.loadCount = props.loadBuffer if (nextProps.scroll.y !== props.scroll.y) {
? this.rowsInView + props.loadBuffer * 2 const rowHeight = nextProps.height ? nextProps.height : defaultHeight;
: 26; //一次加载多少数据 const scrollY = nextProps.scroll.y ? parseInt(nextProps.scroll.y) : 0;
this.currentIndex = 0; _this.rowsInView = scrollY ? Math.ceil(scrollY / rowHeight) : 20;
this.startIndex = this.currentIndex; //数据开始位置 _this.loadCount = props.loadBuffer
this.endIndex = this.currentIndex + this.loadCount; //数据结束位置 ? _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(); const isTreeType = this.checkIsTreeType();
if(isTreeType){ if (isTreeType) {
const {data} = this.props; data.forEach((item, index) => {
data.forEach((item,index)=>{ this.firstLevelKey[index] = this.getRowKey(item, index);
this.firstLevelKey[index] = this.getRowKey(item,index);
this.cachedRowParentIndex[treeTypeIndex] = index; this.cachedRowParentIndex[treeTypeIndex] = index;
//保存所有的keys跟小标对应起来 //保存所有的keys跟小标对应起来
this.keys[treeTypeIndex] = this.getRowKey(item,index); this.keys[treeTypeIndex] = this.getRowKey(item, index);
treeTypeIndex++; treeTypeIndex++;
if(item.children){ if (item.children) {
this.getData(item.children,index); 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) { getRowKey(record, index) {
const rowKey = this.props.rowKey; const rowKey = this.props.rowKey;
const key = (typeof rowKey === 'function') ? const key =
rowKey(record, index) : record[rowKey]; 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.'
);
return key; return key;
} }
/** /**
*判断是否是树形结构 *判断是否是树形结构
* *
*/ */
checkIsTreeType(){ checkIsTreeType() {
const {data} = this.props; const { data } = this.props;
let rs = false; let rs = false;
const len = data.length>30?30: data.length; const len = data.length > 30 ? 30 : data.length;
//取前三十个看看是否有children属性，有则为树形结构 //取前三十个看看是否有children属性，有则为树形结构
for(let i = 0 ;i<len;i++){ for (let i = 0; i < len; i++) {
if(data[i].children){ if (data[i].children) {
rs = true; rs = true;
break; break;
} }
} }
return rs; return rs;
} }
getData(data,parentIndex){ getData(data, parentIndex) {
data.forEach((subItem,subIndex)=>{ data.forEach((subItem, subIndex) => {
this.cachedRowParentIndex[treeTypeIndex] = parentIndex; this.cachedRowParentIndex[treeTypeIndex] = parentIndex;
this.keys[treeTypeIndex] = this.getRowKey(subItem,subIndex); this.keys[treeTypeIndex] = this.getRowKey(subItem, subIndex);
treeTypeIndex++; treeTypeIndex++;
if(subItem.children){ if (subItem.children) {
this.getData(subItem.children,parentIndex); this.getData(subItem.children, parentIndex);
}
} });
})
} }
componentWillUnmount(){ componentWillUnmount() {
this.cachedRowHeight = []; this.cachedRowHeight = [];
this.cachedRowParentIndex = []; this.cachedRowParentIndex = [];
} }
@ -127,31 +173,36 @@ export default function bigData(Table) {
getSumHeight(start, end) { getSumHeight(start, end) {
const { height } = this.props; const { height } = this.props;
let rowHeight = height ? height : defaultHeight; let rowHeight = height ? height : defaultHeight;
let sumHeight = 0,currentKey,currentRowHeight=rowHeight; let sumHeight = 0,
currentKey,
currentRowHeight = rowHeight;
for (let i = start; i < end; i++) { for (let i = start; i < end; i++) {
if(this.cachedRowHeight[i] == undefined){ if (this.cachedRowHeight[i] == undefined) {
if(this.treeType){ if (this.treeType) {
currentKey = this.keys[i]; currentKey = this.keys[i];
currentRowHeight = 0; 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; currentRowHeight = rowHeight;
} }
} }
sumHeight += currentRowHeight; sumHeight += currentRowHeight;
}else{ } else {
sumHeight += this.cachedRowHeight[i] sumHeight += this.cachedRowHeight[i];
} }
} }
return sumHeight; return sumHeight;
} }
/** /**
*@description 根据返回的scrollTop计算当前的索引。此处做了两次缓存一个是根据上一次的currentIndex计算当前currentIndex。另一个是根据当前内容区的数据是否在缓存中如果在则不重新render页面 *@description 根据返回的scrollTop计算当前的索引。此处做了两次缓存一个是根据上一次的currentIndex计算当前currentIndex。另一个是根据当前内容区的数据是否在缓存中如果在则不重新render页面
*@param 最新一次滚动的scrollTop *@param 最新一次滚动的scrollTop
*@param treeType是否是树状表 *@param treeType是否是树状表
*/ */
handleScroll = (nextScrollTop, treeType) => { handleScrollY = (nextScrollTop, treeType) => {
//树表逻辑 //树表逻辑
// 关键点是动态的获取startIndex和endIndex // 关键点是动态的获取startIndex和endIndex
// 法子一：子节点也看成普通tr，最开始需要设置一共有多少行，哪行显示哪行不显示如何确定 // 法子一：子节点也看成普通tr，最开始需要设置一共有多少行，哪行显示哪行不显示如何确定
@ -197,19 +248,21 @@ export default function bigData(Table) {
let index = 0; let index = 0;
let temp = nextScrollTop; let temp = nextScrollTop;
let currentKey; let currentKey;
while (temp >0) { while (temp > 0) {
let currentRowHeight = this.cachedRowHeight[index]; let currentRowHeight = this.cachedRowHeight[index];
if(currentRowHeight === undefined){ if (currentRowHeight === undefined) {
if(this.treeType){ if (this.treeType) {
currentKey = this.keys[index]; currentKey = this.keys[index];
currentRowHeight = 0; 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; currentRowHeight = rowHeight;
} }
}else{ } else {
currentRowHeight = rowHeight; currentRowHeight = rowHeight;
} }
} }
temp -= currentRowHeight; temp -= currentRowHeight;
if (temp > 0) { if (temp > 0) {
@ -224,39 +277,42 @@ export default function bigData(Table) {
_this.currentIndex = index; _this.currentIndex = index;
let rowsInView = 0; //可视区域显示多少行 let rowsInView = 0; //可视区域显示多少行
let rowsHeight = 0; //可视区域内容高度 let rowsHeight = 0; //可视区域内容高度
let tempIndex = index; let tempIndex = index;
//如果可视区域中需要展示的数据已经在缓存中则不重现render。 //如果可视区域中需要展示的数据已经在缓存中则不重现render。
if (viewHeight) { if (viewHeight) {
//有时滚动过快时this.cachedRowHeight[rowsInView + index]为undifined //有时滚动过快时this.cachedRowHeight[rowsInView + index]为undifined
while (rowsHeight < viewHeight && tempIndex<this.cachedRowHeight.length) { while (
if(this.cachedRowHeight[tempIndex]){ rowsHeight < viewHeight &&
rowsHeight += this.cachedRowHeight[tempIndex]; tempIndex < this.cachedRowHeight.length
if(treeType && _this.cachedRowParentIndex[tempIndex] !== tempIndex ||!treeType){ ) {
rowsInView++; if (this.cachedRowHeight[tempIndex]) {
} rowsHeight += this.cachedRowHeight[tempIndex];
if (
(treeType &&
_this.cachedRowParentIndex[tempIndex] !== tempIndex) ||
!treeType
) {
rowsInView++;
}
} }
tempIndex++; tempIndex++;
} }
if(treeType){ if (treeType) {
const treeIndex = index const treeIndex = index;
index = _this.cachedRowParentIndex[treeIndex]; index = _this.cachedRowParentIndex[treeIndex];
if(index === undefined){ if (index === undefined) {
// console.log('index is undefined********'+treeIndex); // console.log('index is undefined********'+treeIndex);
index = this.getParentIndex(treeIndex); index = this.getParentIndex(treeIndex);
// console.log("getParentIndex****"+index); // console.log("getParentIndex****"+index);
} }
} }
// console.log('parentIndex*********',index); // console.log('parentIndex*********',index);
// 如果rowsInView 小于 缓存的数据则重新render // 如果rowsInView 小于 缓存的数据则重新render
// 向下滚动 下临界值超出缓存的endIndex则重新渲染 // 向下滚动 下临界值超出缓存的endIndex则重新渲染
if (rowsInView + index > endIndex - rowDiff && isOrder) { if (rowsInView + index > endIndex - rowDiff && isOrder) {
startIndex = index - loadBuffer > 0 ? index - loadBuffer : 0;
startIndex = index - loadBuffer>0?index - loadBuffer:0; endIndex = startIndex + loadCount;
endIndex = startIndex + loadCount;
//树状结构则根据当前的节点重新计算startIndex和endIndex //树状结构则根据当前的节点重新计算startIndex和endIndex
// if(treeType){ // if(treeType){
// const currentParentIndex = _this.cachedRowParentIndex[index]; // const currentParentIndex = _this.cachedRowParentIndex[index];
@ -271,10 +327,10 @@ export default function bigData(Table) {
if (endIndex > data.length) { if (endIndex > data.length) {
endIndex = data.length; endIndex = data.length;
} }
if(startIndex!==this.startIndex||endIndex!==this.endIndex){ if (startIndex !== this.startIndex || endIndex !== this.endIndex) {
this.startIndex = startIndex; this.startIndex = startIndex;
this.endIndex = endIndex; this.endIndex = endIndex;
this.setState({ needRender: !needRender }); this.setState({ needRender: !needRender });
} }
// console.log( // console.log(
// "===================", // "===================",
@ -289,10 +345,10 @@ export default function bigData(Table) {
if (startIndex < 0) { if (startIndex < 0) {
startIndex = 0; startIndex = 0;
} }
if(startIndex!==this.startIndex||endIndex!==this.endIndex){ if (startIndex !== this.startIndex || endIndex !== this.endIndex) {
this.startIndex = startIndex; this.startIndex = startIndex;
this.endIndex = this.startIndex + loadCount; this.endIndex = this.startIndex + loadCount;
this.setState({ needRender: !needRender }); this.setState({ needRender: !needRender });
} }
// console.log( // console.log(
// "**index**" + index, // "**index**" + index,
@ -301,15 +357,14 @@ export default function bigData(Table) {
// ); // );
} }
} }
} }
}; };
setRowHeight(height, index) { setRowHeight(height, index) {
this.cachedRowHeight[index] = height; this.cachedRowHeight[index] = height;
} }
setRowParentIndex(parentIndex,index){ setRowParentIndex(parentIndex, index) {
// this.cachedRowParentIndex[index] = parentIndex; // this.cachedRowParentIndex[index] = parentIndex;
} }
/** /**
* *
@ -317,68 +372,84 @@ export default function bigData(Table) {
* @param {*} currentIndex 当前行号 * @param {*} currentIndex 当前行号
*/ */
getParentIndex(targetIndex) { getParentIndex(targetIndex) {
const {data} = this.props; const { data } = this.props;
let parentIndex = -1; let parentIndex = -1;
parentIndex = this.getIndex(data,-1,targetIndex); parentIndex = this.getIndex(data, -1, targetIndex);
if(parentIndex<0){//小于0说明没有展开的子节点 if (parentIndex < 0) {
parentIndex = targetIndex; //小于0说明没有展开的子节点
} parentIndex = targetIndex;
return parentIndex; }
return parentIndex;
} }
getIndex(data,index,targetIndex){ getIndex(data, index, targetIndex) {
const parentIndex = index; const parentIndex = index;
for(let i=0;i<data.length;i++){ for (let i = 0; i < data.length; i++) {
index++; index++;
if(targetIndex <=index){ if (targetIndex <= index) {
break; break;
}
if(data[i].children){
this.getIndex(data[i].children,index,targetIndex);
}
} }
return parentIndex; if (data[i].children) {
this.getIndex(data[i].children, index, targetIndex);
}
}
return parentIndex;
} }
onExpand = (expandState, record) => {
onExpand = (expandState,record)=>{
const _this = this; const _this = this;
// 展开 // 展开
if(expandState){ if (expandState) {
record.children && record.children.forEach((item,index)=>{ record.children &&
_this.expandChildRowKeys.push( _this.getRowKey(item,index)); record.children.forEach((item, index) => {
}) _this.expandChildRowKeys.push(_this.getRowKey(item, index));
}else{ });
// 收起 } else {
record.children && record.children.forEach((item,index)=>{ // 收起
_this.expandChildRowKeys.splice(_this.expandChildRowKeys.findIndex(fitem => fitem.key === item.key), 1) 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() { render() {
const { data } = this.props; const { data } = this.props;
const { scrollTop } = this; const { scrollTop } = this;
const { endIndex, startIndex } = this; const { endIndex, startIndex } = this;
const lazyLoad = { const lazyLoad = {
startIndex: startIndex, startIndex: startIndex,
startParentIndex:startIndex,//为树状节点做准备 startParentIndex: startIndex //为树状节点做准备
}; };
if(this.treeType){ if (this.treeType) {
const preSubCounts = this.cachedRowParentIndex.findIndex(item=>{ return item==startIndex }) const preSubCounts = this.cachedRowParentIndex.findIndex(item => {
const sufSubCounts = this.cachedRowParentIndex.findIndex(item=>{ return item==endIndex }) return item == startIndex;
lazyLoad.preHeight = this.getSumHeight(0,preSubCounts>-1?preSubCounts:0); });
lazyLoad.sufHeight = this.getSumHeight(sufSubCounts+1>0?sufSubCounts+1:this.cachedRowParentIndex.length,this.cachedRowParentIndex.length); const sufSubCounts = this.cachedRowParentIndex.findIndex(item => {
return item == endIndex;
if(preSubCounts>0){ });
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; lazyLoad.startIndex = preSubCounts;
} }
} else {
}else{ lazyLoad.preHeight = this.getSumHeight(0, startIndex);
lazyLoad.preHeight = this.getSumHeight(0, startIndex) lazyLoad.sufHeight = this.getSumHeight(endIndex, data.length);
lazyLoad.sufHeight = this.getSumHeight(endIndex, data.length)
} }
// console.log('*******ScrollTop*****'+scrollTop); // console.log('*******ScrollTop*****'+scrollTop);
return ( return (
@ -386,12 +457,12 @@ export default function bigData(Table) {
{...this.props} {...this.props}
data={data.slice(startIndex, endIndex)} data={data.slice(startIndex, endIndex)}
lazyLoad={lazyLoad} lazyLoad={lazyLoad}
handleScroll={this.handleScroll} handleScrollY={this.handleScrollY}
scrollTop={scrollTop} scrollTop={scrollTop}
setRowHeight={this.setRowHeight} setRowHeight={this.setRowHeight}
setRowParentIndex = {this.setRowParentIndex} setRowParentIndex={this.setRowParentIndex}
onExpand = {this.onExpand} onExpand={this.onExpand}
onExpandedRowsChange = {this.onExpandedRowsChange} onExpandedRowsChange={this.onExpandedRowsChange}
// className={'lazy-table'} // className={'lazy-table'}
/> />
); );

33
src/lib/dragColumn.js
View File

@ -55,17 +55,28 @@ export default function dragColumn(Table) {
onDrop=(event,data)=>{ onDrop=(event,data)=>{
let {dragSource,dragTarg} = data; let {dragSource,dragTarg} = data;
let {columns} = this.state; let {columns} = this.state;
let dragSourceColum = columns.find((da,i)=>da.key == dragSource.key); let sourceIndex = -1,targetIndex = -1;
let dragTargColum = columns.find((da,i)=>da.key == dragTarg.key);
for (let index = 0; index < columns.length; index++) { sourceIndex = columns.findIndex((da,i)=>da.key == dragSource.key);
const da = columns[index]; targetIndex = columns.findIndex((da,i)=>da.key == dragTarg.key);
if(da.key === dragSource.key){ // for (let index = 0; index < columns.length; index++) {
columns[index] = dragTargColum; // const da = columns[index];
} // if(da.key === dragSource.key){
if(da.key === dragTarg.key){ // columns[index] = dragTargColum;
columns[index] = dragSourceColum; // }
} // 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({ this.setState({
columns:cloneDeep(columns) columns:cloneDeep(columns)
}); });

2
src/lib/filterColumn.js
View File

@ -2,7 +2,7 @@ import React, { Component } from "react";
import Checkbox from "bee-checkbox"; import Checkbox from "bee-checkbox";
import Icon from "bee-icon"; import Icon from "bee-icon";
import { ObjectAssign } from "./util"; import { ObjectAssign } from "./util";
import i18n from "../i18n"; import i18n from "./i18n";
import { getComponentLocale } from "bee-locale/build/tool"; import { getComponentLocale } from "bee-locale/build/tool";
function noop() {} function noop() {}

0
src/i18n.js → src/lib/i18n.js
View File

327
src/lib/sort.js
View File

@ -24,141 +24,158 @@ export default function sort(Table, Icon) {
return class SortTable extends Component { return class SortTable extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { let flatColumns = [];
data: this.props.data, this._toFlatColumn(props.columns,-1,flatColumns);
columns:props.columns, this.state = { data: this.props.data, columns: props.columns,flatColumns:flatColumns };
};
} }
static defaultProps = { static defaultProps = { sort: { mode: "single", backSource: false } }; //默认是前端排序，值为true为后端排序
sort: { componentWillReceiveProps(nextProps) {
mode:'single',
backSource:false //默认是前端排序，值为true为后端排序 if (nextProps.data !== this.props.data) {
}
};
componentWillReceiveProps(nextProps){
if(nextProps.data !== this.props.data){
this.setState({
data: nextProps.data,
oldData: nextProps.data.concat(),
});
}
if(nextProps.columns !== this.props.columns){
this.setState({ 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 ; *column扁平化处理，适应多表头避免递归操作
this.state.columns.forEach((item,index)=>{ *
if(item.order=='ascend' || item.order=='descend'){ */
_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++; orderNum++;
} }
}) });
return orderNum?orderNum:1; return orderNum ? orderNum : 1;
} };
/** /**
* column 当前的排序的列 * column 当前的排序的列
* 当有的列不排序时，将该列的orderNum置为‘’，并动态的修改其他列的orderNum。 * 当有的列不排序时，将该列的orderNum置为‘’，并动态的修改其他列的orderNum。
*/ */
changeOrderNum = (column)=>{ changeOrderNum = column => {
let {columns} = this.state; let { flatColumns } = this.state;
columns.forEach((col)=>{ //todo 2
if(col.orderNum>column.orderNum){ flatColumns.forEach(col => {
if (col.orderNum > column.orderNum) {
col.orderNum--; col.orderNum--;
} }
if(column.key == col.key){ if (column.key == col.key) {
col.orderNum = ''; col.orderNum = "";
} }
}) });
this.setState({columns}); this.setState({ flatColumns });
};
}
/** /**
* 获取排序字段 * 获取排序字段
*/ */
getOrderCols = (columns)=>{ getOrderCols = columns => {
let orderCols = []; let orderCols = [];
columns.forEach(item=>{ //todo 3
if(item.order=='ascend'||item.order=='descend'){ columns.forEach(item => {
orderCols.push({order:item.order, if (item.order == "ascend" || item.order == "descend") {
field:item.dataIndex, orderCols.push({
orderNum:item.orderNum order: item.order,
field: item.dataIndex,
orderNum: item.orderNum
}); });
} }
}) });
return orderCols; return orderCols;
} };
/** /**
* pre：前一条数据 * pre：前一条数据
* after:后一条数据 * after:后一条数据
* orderType:升序、降序 * orderType:升序、降序
*/ */
_sortBy=(pre,after,orderCols,orderColslen,currentIndex)=>{ _sortBy = (pre, after, orderCols, orderColslen, currentIndex) => {
const preKey = pre[orderCols[currentIndex].key]; const preKey = pre[orderCols[currentIndex].key];
const afterKey = after[orderCols[currentIndex].key]; const afterKey = after[orderCols[currentIndex].key];
if(preKey == afterKey && currentIndex+1<=orderColslen){ if (preKey == afterKey && currentIndex + 1 <= orderColslen) {
return this._sortBy(pre,after,orderCols,orderColslen,currentIndex+1); return this._sortBy(pre, after, orderCols, orderColslen, currentIndex + 1);
} }
if(orderCols[currentIndex].order=='ascend'){ if (orderCols[currentIndex].order == "ascend") {
return preKey - afterKey return preKey - afterKey;
}else{ } else {
return afterKey - preKey return afterKey - preKey;
} }
} };
/** /**
* 多列排序 先排order为1的，其他的基于已排序的数据排 * 多列排序 先排order为1的，其他的基于已排序的数据排
*/ */
multiSort = (columns)=>{ multiSort = columns => {
let {data, oldData} = this.state; let { data, oldData } = this.state;
const self = this; const self = this;
let orderCols = {},orderColslen=0; let orderCols = {},
columns.forEach(item=>{ orderColslen = 0;
if(item.orderNum){ //todo 4
columns.forEach(item => {
if (item.orderNum) {
orderColslen++; orderColslen++;
orderCols[item.orderNum] = item; orderCols[item.orderNum] = item;
} }
}) });
if(orderColslen>0){ if (orderColslen > 0) {
data = data.sort(function(a, b) { 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(); data = oldData.concat();
} }
return data; return data;
};
}
toggleSortOrder = (order, column) => { toggleSortOrder = (order, column) => {
let { data, oldData ,columns} = this.state; let { data, oldData, flatColumns } = this.state;
let {sort} = this.props; let { sort } = this.props;
let seleObj; let seleObj;
if (!oldData) { if (!oldData) {
oldData = data.concat(); oldData = data.concat();
} }
//单列排序，清空其他列的排序 //单列排序，清空其他列的排序
if(sort.mode == 'single'){ if (sort.mode == "single") {
columns.forEach(da=>{ //todo 5
if(da.key == column.key){ flatColumns.forEach(da => {
if (da.key == column.key) {
seleObj = da; seleObj = da;
}else{ } else {
if(da.order){ if (da.order) {
da.order = 'flatscend'; da.order = "flatscend";
} }
} }
}) });
seleObj.order = order; seleObj.order = order;
//通过后端请求 //通过后端请求
if(sort.backSource && typeof sort.sortFun === "function"){ if (sort.backSource && typeof sort.sortFun === "function") {
//获取排序的字段和方式 //获取排序的字段和方式
sort.sortFun([{ sort.sortFun([{ order: order, field: seleObj.dataIndex }]);
order:order, } else {
field:seleObj.dataIndex
}]);
}else{
if (order === "ascend") { if (order === "ascend") {
data = data.sort(function(a, b) { data = data.sort(function(a, b) {
return column.sorter(a, b); return column.sorter(a, b);
@ -171,83 +188,99 @@ export default function sort(Table, Icon) {
data = oldData.concat(); data = oldData.concat();
} }
} }
}else{ } else {
seleObj = columns.find(da=>da.key == column.key); seleObj = flatColumns.find(da => da.key == column.key);
seleObj.order = order; seleObj.order = order;
if(order === "flatscend"){ if (order === "flatscend") {
this.changeOrderNum(column); this.changeOrderNum(column);
} }
if(!seleObj.orderNum && (order=='ascend'||order=='descend')){ if (!seleObj.orderNum && (order == "ascend" || order == "descend")) {
seleObj.orderNum = this.getOrderNum(); seleObj.orderNum = this.getOrderNum();
} }
if(sort.backSource && typeof sort.sortFun === "function"){ if (sort.backSource && typeof sort.sortFun === "function") {
sort.sortFun(this.getOrderCols(columns)); sort.sortFun(this.getOrderCols(flatColumns));
}else{ } else {
data = this.multiSort(columns); data = this.multiSort(flatColumns);
} }
} }
this.setState({ this.setState({ data, oldData, flatColumns });
data,
oldData,
columns
});
}; };
//每个column上添加orderNum属性，不排序时为“”。 //每个column上添加orderNum属性，不排序时为“”。
//点击时orderNum有值则不重新赋值，如果没有值，则取当前column下的有oderNum的length值。并排序 //点击时orderNum有值则不重新赋值，如果没有值，则取当前column下的有oderNum的length值。并排序
//点击置为“”时，动态的设置相关column的orderNum值。并排序 //点击置为“”时，动态的设置相关column的orderNum值。并排序
renderColumnsDropdown=(columns)=>{ renderColumnsDropdown = columns => {
const prefixCls = "bee-table"; let tempColumns = [],rsColumns = [];
const {mode} = this.props.sort; tempColumns = columns.map(originColumn => {
return columns.map(originColumn => {
let iconTypeIndex = 0;
let column = Object.assign({}, originColumn); let column = Object.assign({}, originColumn);
let sorterClass = 'flat'; return this.sortColumn(column);
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;
}); });
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() { 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} />; return <Table {...this.props} columns={columns} data={this.state.data} />;
} }
}; };