1888 lines
74 KiB
JavaScript
1888 lines
74 KiB
JavaScript
'use strict';
|
||
|
||
Object.defineProperty(exports, "__esModule", {
|
||
value: true
|
||
});
|
||
|
||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||
|
||
var _react = require('react');
|
||
|
||
var _react2 = _interopRequireDefault(_react);
|
||
|
||
var _propTypes = require('prop-types');
|
||
|
||
var _propTypes2 = _interopRequireDefault(_propTypes);
|
||
|
||
var _componentClasses = require('component-classes');
|
||
|
||
var _componentClasses2 = _interopRequireDefault(_componentClasses);
|
||
|
||
var _TableRow = require('./TableRow');
|
||
|
||
var _TableRow2 = _interopRequireDefault(_TableRow);
|
||
|
||
var _TableHeader = require('./TableHeader');
|
||
|
||
var _TableHeader2 = _interopRequireDefault(_TableHeader);
|
||
|
||
var _utils = require('./lib/utils');
|
||
|
||
var _shallowequal = require('shallowequal');
|
||
|
||
var _shallowequal2 = _interopRequireDefault(_shallowequal);
|
||
|
||
var _addEventListener = require('tinper-bee-core/lib/addEventListener');
|
||
|
||
var _addEventListener2 = _interopRequireDefault(_addEventListener);
|
||
|
||
var _ColumnManager = require('./ColumnManager');
|
||
|
||
var _ColumnManager2 = _interopRequireDefault(_ColumnManager);
|
||
|
||
var _createStore = require('./createStore');
|
||
|
||
var _createStore2 = _interopRequireDefault(_createStore);
|
||
|
||
var _beeLoading = require('bee-loading');
|
||
|
||
var _beeLoading2 = _interopRequireDefault(_beeLoading);
|
||
|
||
var _beeIcon = require('bee-icon');
|
||
|
||
var _beeIcon2 = _interopRequireDefault(_beeIcon);
|
||
|
||
var _i18n = require('./lib/i18n');
|
||
|
||
var _i18n2 = _interopRequireDefault(_i18n);
|
||
|
||
var _tool = require('bee-locale/build/tool');
|
||
|
||
var _resizeObserverPolyfill = require('resize-observer-polyfill');
|
||
|
||
var _resizeObserverPolyfill2 = _interopRequireDefault(_resizeObserverPolyfill);
|
||
|
||
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 _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
|
||
|
||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||
|
||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||
|
||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
||
|
||
var propTypes = {
|
||
data: _propTypes2["default"].array,
|
||
expandIconAsCell: _propTypes2["default"].bool,
|
||
defaultExpandAllRows: _propTypes2["default"].bool,
|
||
expandedRowKeys: _propTypes2["default"].array,
|
||
defaultExpandedRowKeys: _propTypes2["default"].array,
|
||
useFixedHeader: _propTypes2["default"].bool,
|
||
columns: _propTypes2["default"].array,
|
||
clsPrefix: _propTypes2["default"].string,
|
||
bodyStyle: _propTypes2["default"].object,
|
||
style: _propTypes2["default"].object,
|
||
//特殊的渲染规则的key值
|
||
rowKey: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].func]),
|
||
rowClassName: _propTypes2["default"].func,
|
||
//column的主键，和 column.key 作用相同
|
||
columnKey: _propTypes2["default"].string,
|
||
expandedRowClassName: _propTypes2["default"].func,
|
||
childrenColumnName: _propTypes2["default"].string,
|
||
onExpand: _propTypes2["default"].func,
|
||
onRowHover: _propTypes2["default"].func,
|
||
onExpandedRowsChange: _propTypes2["default"].func,
|
||
indentSize: _propTypes2["default"].number,
|
||
onRowClick: _propTypes2["default"].func,
|
||
onRowDoubleClick: _propTypes2["default"].func,
|
||
expandIconColumnIndex: _propTypes2["default"].number,
|
||
//是否显示表头
|
||
showHeader: _propTypes2["default"].bool,
|
||
title: _propTypes2["default"].func,
|
||
footer: _propTypes2["default"].func,
|
||
emptyText: _propTypes2["default"].func,
|
||
scroll: _propTypes2["default"].object,
|
||
rowRef: _propTypes2["default"].func,
|
||
getBodyWrapper: _propTypes2["default"].func,
|
||
children: _propTypes2["default"].node,
|
||
draggable: _propTypes2["default"].bool,
|
||
minColumnWidth: _propTypes2["default"].number,
|
||
filterable: _propTypes2["default"].bool,
|
||
filterDelay: _propTypes2["default"].number,
|
||
onFilterChange: _propTypes2["default"].func,
|
||
onFilterClear: _propTypes2["default"].func,
|
||
syncHover: _propTypes2["default"].bool,
|
||
tabIndex: _propTypes2["default"].string,
|
||
hoverContent: _propTypes2["default"].func,
|
||
size: _propTypes2["default"].oneOf(['sm', 'md', 'lg']),
|
||
rowDraggAble: _propTypes2["default"].bool,
|
||
hideDragHandle: _propTypes2["default"].bool, // 隐藏行拖拽把手
|
||
onDropRow: _propTypes2["default"].func,
|
||
onDragRowStart: _propTypes2["default"].func,
|
||
onBodyScroll: _propTypes2["default"].func,
|
||
bodyDisplayInRow: _propTypes2["default"].bool, // 表格内容超出列宽度时进行换行 or 以...形式展现
|
||
headerDisplayInRow: _propTypes2["default"].bool, // 表头内容超出列宽度时进行换行 or 以...形式展现
|
||
showRowNum: _propTypes2["default"].oneOfType([_propTypes2["default"].bool, _propTypes2["default"].object]), // 表格是否自动生成序号,格式为{base:number || 0,defaultKey:string || '_index',defaultName:string || '序号'}
|
||
onPaste: _propTypes2["default"].func,
|
||
onBodyMouseLeave: _propTypes2["default"].func
|
||
};
|
||
|
||
var defaultProps = {
|
||
data: [],
|
||
useFixedHeader: false,
|
||
expandIconAsCell: false,
|
||
defaultExpandAllRows: false,
|
||
defaultExpandedRowKeys: [],
|
||
columnKey: 'key',
|
||
rowKey: 'key',
|
||
rowClassName: function rowClassName() {
|
||
return '';
|
||
},
|
||
expandedRowClassName: function expandedRowClassName() {
|
||
return '';
|
||
},
|
||
onExpand: function onExpand() {},
|
||
onExpandedRowsChange: function onExpandedRowsChange() {},
|
||
onRowClick: function onRowClick() {},
|
||
|
||
// onRowDoubleClick() { },
|
||
clsPrefix: 'u-table',
|
||
bodyStyle: {},
|
||
style: {},
|
||
childrenColumnName: 'children',
|
||
indentSize: 15,
|
||
expandIconColumnIndex: 0,
|
||
showHeader: true,
|
||
scroll: {},
|
||
rowRef: function rowRef() {
|
||
return null;
|
||
},
|
||
getBodyWrapper: function getBodyWrapper(body) {
|
||
return body;
|
||
},
|
||
// emptyText: () => <div><Icon type="uf-nodata" className="table-nodata"></Icon><span>{locale["no_data"]}</span></div>,
|
||
columns: [],
|
||
minColumnWidth: 80,
|
||
locale: {},
|
||
syncHover: true,
|
||
// setRowHeight:()=>{},
|
||
setRowParentIndex: function setRowParentIndex() {},
|
||
tabIndex: '0',
|
||
heightConsistent: false,
|
||
syncFixedRowHeight: false,
|
||
size: 'md',
|
||
rowDraggAble: false,
|
||
hideDragHandle: false,
|
||
onDropRow: function onDropRow() {},
|
||
onDragRowStart: function onDragRowStart() {},
|
||
onBodyScroll: function onBodyScroll() {},
|
||
bodyDisplayInRow: true,
|
||
headerDisplayInRow: true,
|
||
showRowNum: false,
|
||
onPaste: function onPaste() {}
|
||
};
|
||
|
||
var expandIconCellWidth = Number(43);
|
||
|
||
var Table = function (_Component) {
|
||
_inherits(Table, _Component);
|
||
|
||
function Table(props) {
|
||
_classCallCheck(this, Table);
|
||
|
||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||
|
||
_this.resize = function () {
|
||
(0, _utils.debounce)(_this.syncFixedTableRowHeight, 150);
|
||
_this.computeTableWidth();
|
||
var renderFlag = _this.state.renderFlag;
|
||
_this.setState({
|
||
renderFlag: !renderFlag
|
||
});
|
||
};
|
||
|
||
_this.getTableUID = function () {
|
||
var uid = "_table_uid_" + new Date().getTime();
|
||
_this.tableUid = uid;
|
||
var div = document.createElement("div");
|
||
// div.className = "u-table-drag-hidden-cont";
|
||
div.className = "u-table-drag-hidden-cont";
|
||
div.id = uid;
|
||
_this.contentTable.appendChild(div);
|
||
};
|
||
|
||
_this.onDragRowStart = function (currentKey) {
|
||
var data = _this.state.data,
|
||
currentIndex = void 0,
|
||
record = void 0;
|
||
data.forEach(function (da, i) {
|
||
// tr 的唯一标识通过 data.key 或 rowKey 两种方式传进来
|
||
var trKey = da.key ? da.key : _this.getRowKey(da, i);
|
||
if (trKey == currentKey) {
|
||
currentIndex = i;
|
||
record = da;
|
||
}
|
||
});
|
||
_this.props.onDragRowStart && _this.props.onDragRowStart(record, currentIndex);
|
||
};
|
||
|
||
_this.onDragRow = function (currentKey, targetKey) {
|
||
var data = _this.state.data,
|
||
currentIndex = void 0,
|
||
targetIndex = void 0,
|
||
record = void 0;
|
||
data.forEach(function (da, i) {
|
||
// tr 的唯一标识通过 data.key 或 rowKey 两种方式传进来
|
||
var trKey = da.key ? da.key : _this.getRowKey(da, i);
|
||
if (trKey == currentKey) {
|
||
currentIndex = i;
|
||
record = da;
|
||
}
|
||
if (trKey == targetKey) {
|
||
targetIndex = i;
|
||
}
|
||
});
|
||
if (currentIndex > -1) {
|
||
if (_this.contentTable.dragType == 'top') {
|
||
targetIndex = targetIndex - 1;
|
||
}
|
||
data = _this.swapArray(data, currentIndex, targetIndex);
|
||
_this.props.onDropRow && _this.props.onDropRow(data, record, targetIndex);
|
||
_this.setState({
|
||
data: data
|
||
});
|
||
} else {
|
||
_this.props.onDropRow && _this.props.onDropRow(data, record, targetIndex);
|
||
}
|
||
};
|
||
|
||
_this.swapArray = function (arr, index1, index2) {
|
||
var value1 = arr[index1];
|
||
arr.splice(index1, 1);
|
||
if (index1 < index2) {
|
||
arr.splice(index2, 0, value1);
|
||
} else {
|
||
arr.splice(index2 + 1, 0, value1);
|
||
}
|
||
|
||
return arr;
|
||
};
|
||
|
||
_this.renderDragHideTable = function () {
|
||
var _this$props = _this.props,
|
||
columns = _this$props.columns,
|
||
dragborder = _this$props.dragborder,
|
||
dragborderKey = _this$props.dragborderKey;
|
||
|
||
if (!dragborder) return null;
|
||
var sum = 0;
|
||
return _react2["default"].createElement(
|
||
'div',
|
||
{ id: 'u-table-drag-hide-table-' + dragborderKey, className: _this.props.clsPrefix + '-hiden-drag' },
|
||
columns.map(function (da, i) {
|
||
sum += da.width ? da.width : 0;
|
||
return _react2["default"].createElement('div', { className: _this.props.clsPrefix + '-hiden-drag-li', key: da + "_hiden_" + i, style: { left: sum + "px" } });
|
||
})
|
||
);
|
||
};
|
||
|
||
_this.getTdPadding = function (td) {
|
||
var tdPaddingTop = _this.getStyle(td, 'paddingTop'),
|
||
tdPaddingBottom = _this.getStyle(td, 'paddingBottom'),
|
||
tdBorderTop = _this.getStyle(td, 'borderTopWidth'),
|
||
tdBorderBottom = _this.getStyle(td, 'borderBottomWidth');
|
||
return Number(tdPaddingTop.replace('px', '')) + Number(tdPaddingBottom.replace('px', '')) + Number(tdBorderTop.replace('px', '')) + Number(tdBorderBottom.replace('px', ''));
|
||
};
|
||
|
||
_this.getFlatRecords = function (data) {
|
||
var result = [];
|
||
for (var i = 0; i < data.length; i++) {
|
||
result.push(data[i]);
|
||
if ((data[i].children || []).length) {
|
||
result = result.concat(_this.getFlatRecords(data[i].children));
|
||
}
|
||
}
|
||
return result;
|
||
};
|
||
|
||
_this.clearBodyMouseLeaveTimer = function () {
|
||
if (_this.bodyMouseLeaveTimmer) {
|
||
clearTimeout(_this.bodyMouseLeaveTimmer);
|
||
_this.bodyMouseLeaveTimmer = null;
|
||
}
|
||
};
|
||
|
||
_this.onRowHoverMouseEnter = function () {
|
||
|
||
_this.store.setState({
|
||
currentHoverKey: _this.currentHoverKey
|
||
});
|
||
_this.hoverDom.style.display = 'block';
|
||
_this.clearBodyMouseLeaveTimer();
|
||
};
|
||
|
||
_this.onRowHoverMouseLeave = function () {};
|
||
|
||
_this.onFocus = function (e) {
|
||
_this.props.onKeyTab && _this.props.onKeyTab();
|
||
};
|
||
|
||
_this.onKeyDown = function (e) {
|
||
var event = _utils.Event.getEvent(e);
|
||
// event.preventDefault?event.preventDefault():event.returnValue = false;
|
||
if (event.keyCode === 38) {
|
||
//up
|
||
event.preventDefault && event.preventDefault();
|
||
_this.props.onKeyUp && _this.props.onKeyUp();
|
||
} else if (event.keyCode === 40) {
|
||
//down
|
||
event.preventDefault && event.preventDefault();
|
||
_this.props.onKeyDown && _this.props.onKeyDown();
|
||
}
|
||
_this.props.onTableKeyDown && _this.props.onTableKeyDown();
|
||
};
|
||
|
||
var expandedRowKeys = [];
|
||
var rows = [].concat(_toConsumableArray(props.data));
|
||
var showDragHandle = !props.hideDragHandle && props.rowDraggAble;
|
||
_this.columnManager = new _ColumnManager2["default"](props.columns, props.children, props.originWidth, showDragHandle, props.showRowNum); // 加入props.showRowNum参数
|
||
_this.store = (0, _createStore2["default"])({ currentHoverKey: null });
|
||
_this.firstDid = true;
|
||
_this.scrollYChanged = false;
|
||
if (props.defaultExpandAllRows) {
|
||
for (var i = 0; i < rows.length; i++) {
|
||
var row = rows[i];
|
||
expandedRowKeys.push(_this.getRowKey(row, i));
|
||
rows = rows.concat(row[props.childrenColumnName] || []);
|
||
}
|
||
} else {
|
||
expandedRowKeys = props.expandedRowKeys || props.defaultExpandedRowKeys;
|
||
}
|
||
|
||
_this.state = {
|
||
expandedRowKeys: expandedRowKeys,
|
||
data: props.data,
|
||
currentHoverKey: null,
|
||
scrollPosition: 'left',
|
||
fixedColumnsHeadRowsHeight: [],
|
||
fixedColumnsBodyRowsHeight: [],
|
||
fixedColumnsExpandedRowsHeight: {} //扩展行的高度
|
||
};
|
||
|
||
_this.onExpandedRowsChange = _this.onExpandedRowsChange.bind(_this);
|
||
_this.onExpanded = _this.onExpanded.bind(_this);
|
||
_this.onRowDestroy = _this.onRowDestroy.bind(_this);
|
||
_this.getRowKey = _this.getRowKey.bind(_this);
|
||
_this.getExpandedRows = _this.getExpandedRows.bind(_this);
|
||
_this.getHeader = _this.getHeader.bind(_this);
|
||
_this.getHeaderRows = _this.getHeaderRows.bind(_this);
|
||
_this.getExpandedRow = _this.getExpandedRow.bind(_this);
|
||
_this.getRowsByData = _this.getRowsByData.bind(_this);
|
||
_this.getRows = _this.getRows.bind(_this);
|
||
_this.getColGroup = _this.getColGroup.bind(_this);
|
||
_this.getLeftFixedTable = _this.getLeftFixedTable.bind(_this);
|
||
_this.getRightFixedTable = _this.getRightFixedTable.bind(_this);
|
||
_this.getTable = _this.getTable.bind(_this);
|
||
_this.getTitle = _this.getTitle.bind(_this);
|
||
_this.getFooter = _this.getFooter.bind(_this);
|
||
_this.getEmptyText = _this.getEmptyText.bind(_this);
|
||
_this.getHeaderRowStyle = _this.getHeaderRowStyle.bind(_this);
|
||
_this.manualSyncFixedTableRowHeight = _this.manualSyncFixedTableRowHeight.bind(_this);
|
||
_this.syncFixedTableRowHeight = _this.syncFixedTableRowHeight.bind(_this);
|
||
_this.resetScrollX = _this.resetScrollX.bind(_this);
|
||
_this.findExpandedRow = _this.findExpandedRow.bind(_this);
|
||
_this.isRowExpanded = _this.isRowExpanded.bind(_this);
|
||
_this.detectScrollTarget = _this.detectScrollTarget.bind(_this);
|
||
_this.handleBodyScroll = _this.handleBodyScroll.bind(_this);
|
||
_this.handleRowHover = _this.handleRowHover.bind(_this);
|
||
_this.computeTableWidth = _this.computeTableWidth.bind(_this);
|
||
_this.onBodyMouseLeave = _this.onBodyMouseLeave.bind(_this);
|
||
_this.tableUid = null;
|
||
_this.contentTable = null;
|
||
_this.leftColumnsLength; //左侧固定列的长度
|
||
_this.centerColumnsLength; //非固定列的长度
|
||
_this.columnsChildrenList = []; //复杂表头、所有叶子节点
|
||
_this.dataChanged = false; // 数据是否改变
|
||
return _this;
|
||
}
|
||
|
||
Table.prototype.componentWillMount = function componentWillMount() {
|
||
this.centerColumnsLength = this.columnManager.centerColumns().length;
|
||
this.leftColumnsLength = this.columnManager.leftColumns().length;
|
||
};
|
||
|
||
Table.prototype.componentDidMount = function componentDidMount() {
|
||
var _this2 = this;
|
||
|
||
this.getTableUID();
|
||
_utils.EventUtil.addHandler(this.contentTable, 'keydown', this.onKeyDown);
|
||
_utils.EventUtil.addHandler(this.contentTable, 'focus', this.onFocus);
|
||
setTimeout(this.resetScrollX, 300);
|
||
//含有纵向滚动条
|
||
// if(this.props.scroll.y){
|
||
this.scrollbarWidth = (0, _utils.measureScrollbar)();
|
||
// }
|
||
//后续也放在recevice里面
|
||
if (!this.props.originWidth) {
|
||
this.computeTableWidth();
|
||
}
|
||
if (this.columnManager.isAnyColumnsFixed()) {
|
||
this.syncFixedTableRowHeight();
|
||
|
||
var targetNode = this.contentTable;
|
||
if (targetNode) {
|
||
this.resizeObserver = new _resizeObserverPolyfill2["default"](function () {
|
||
_this2.resize();
|
||
});
|
||
this.resizeObserver.observe(targetNode);
|
||
}
|
||
}
|
||
};
|
||
|
||
Table.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||
var _props = this.props,
|
||
hideDragHandle = _props.hideDragHandle,
|
||
rowDraggAble = _props.rowDraggAble,
|
||
showRowNum = _props.showRowNum;
|
||
|
||
if ('data' in nextProps) {
|
||
this.setState({
|
||
data: nextProps.data
|
||
});
|
||
}
|
||
if ('expandedRowKeys' in nextProps) {
|
||
this.setState({
|
||
expandedRowKeys: nextProps.expandedRowKeys
|
||
});
|
||
}
|
||
if (nextProps.columns && nextProps.columns !== this.props.columns) {
|
||
this.columnManager.reset(nextProps.columns, null, showRowNum, !hideDragHandle && rowDraggAble); // 加入this.props.showRowNum参数
|
||
if (nextProps.columns.length !== this.props.columns.length && this.refs && this.bodyTable) {
|
||
this.scrollTop = this.bodyTable.scrollTop;
|
||
}
|
||
} else if (nextProps.children !== this.props.children) {
|
||
this.columnManager.reset(null, nextProps.children, showRowNum, !hideDragHandle && rowDraggAble); // 加入this.props.showRowNum参数
|
||
}
|
||
//适配lazyload
|
||
if (nextProps.scrollTop > -1) {
|
||
// this.bodyTable.scrollTop = nextProps.scrollTop;
|
||
this.scrollTop = nextProps.scrollTop;
|
||
}
|
||
// fix:模态框中使用table，计算的滚动条宽度为0的bug
|
||
// fix:表格首次渲染时 display:none，再显示时，未重新计算，导致表行出现错位的bug
|
||
if (this.scrollbarWidth <= 0 && this.props.scroll.y) {
|
||
this.scrollbarWidth = (0, _utils.measureScrollbar)();
|
||
}
|
||
if (!nextProps.originWidth) {
|
||
this.computeTableWidth();
|
||
this.firstDid = true; //避免重复update
|
||
}
|
||
if (nextProps.resetScroll) {
|
||
this.resetScrollX();
|
||
}
|
||
|
||
// console.log('this.scrollTop**********',this.scrollTop);
|
||
};
|
||
|
||
Table.prototype.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
|
||
// todo: IE 大数据渲染，行高不固定，且设置了 heightConsistent={true} 时，滚动加载操作会导致 ie11 浏览器崩溃
|
||
// https://github.com/tinper-bee/bee-table/commit/bd2092cdbaad236ff89477304e58dea93325bf09
|
||
if (this.columnManager.isAnyColumnsFixed()) {
|
||
this.syncFixedTableRowHeight();
|
||
}
|
||
|
||
//适应模态框中表格、以及父容器宽度变化的情况
|
||
if (typeof this.props.scroll.x !== 'number' && this.contentTable.getBoundingClientRect().width !== this.contentDomWidth && this.firstDid) {
|
||
this.computeTableWidth();
|
||
this.firstDid = false; //避免重复update
|
||
}
|
||
if (this.scrollTop > -1) {
|
||
this.refs.fixedColumnsBodyLeft && (this.refs.fixedColumnsBodyLeft.scrollTop = this.scrollTop);
|
||
this.refs.fixedColumnsBodyRight && (this.refs.fixedColumnsBodyRight.scrollTop = this.scrollTop);
|
||
this.bodyTable.scrollTop = this.scrollTop;
|
||
this.scrollTop = -1;
|
||
}
|
||
// 当表格没有数据时，重置滚动条位置，造成grid里面的表头列无法操作
|
||
// if (prevProps.data.length === 0 || this.props.data.length === 0 ) {
|
||
// this.resetScrollX();
|
||
// }
|
||
// 当懒加载手动设置的scroll.y发生变化时，滚动条回到顶部
|
||
var prevScrollY = prevProps.scroll.y;
|
||
var currentScrollY = this.props.scroll.y;
|
||
if (prevScrollY && currentScrollY && prevScrollY !== currentScrollY && this.props.lazyLoad && !this.props.ignoreScrollYChange) {
|
||
this.bodyTable.scrollTop = 0;
|
||
} else if (this.props.ignoreScrollYChange && currentScrollY && prevScrollY) {
|
||
if (prevScrollY !== currentScrollY) {
|
||
this.scrollYChanged = true;
|
||
var bodyScrollTop = this.bodyTable.scrollTop;
|
||
if (bodyScrollTop === 0) {
|
||
// 在顶部的时候，滚动条不用动
|
||
this.bodyTable.scrollTop = 0;
|
||
} else {
|
||
var distance = bodyScrollTop + currentScrollY - prevScrollY;
|
||
if (distance < 0) {
|
||
this.bodyTable.scrollTop = 0;
|
||
} else {
|
||
var _bodyTable = this.bodyTable,
|
||
scrollHeight = _bodyTable.scrollHeight,
|
||
scrollTop = _bodyTable.scrollTop;
|
||
|
||
var bottomDistance = Math.abs(scrollHeight - scrollTop - prevScrollY); // 在最底部的时候也不用滚动滚动条
|
||
if (bottomDistance < 5) {
|
||
// 有些dom计算不是十分精确，设置一个值来缓冲一下
|
||
this.bodyTable.scrollTop = scrollTop + prevScrollY - currentScrollY;
|
||
} else {
|
||
this.bodyTable.scrollTop = distance;
|
||
}
|
||
}
|
||
}
|
||
} else if (this.scrollYChanged) {
|
||
this.bodyTable.scrollTop += 1;
|
||
this.scrollYChanged = false;
|
||
}
|
||
}
|
||
// 是否传入 scroll中的y属性，如果传入判断是否是整数，如果是则进行比较 。bodyTable 的clientHeight进行判断
|
||
this.isShowScrollY();
|
||
if (this.bodyTable) {
|
||
var currentOverflowX = window.getComputedStyle(this.bodyTable).overflowX;
|
||
if (this.props.scroll.x && currentOverflowX !== 'scroll') {
|
||
// 此处应该对比一下实际的
|
||
if (this.computeWidth > this.contentDomWidth) {
|
||
this.bodyTable.style.overflowX = 'scroll';
|
||
}
|
||
}
|
||
}
|
||
var scrollContainerWidth = window.getComputedStyle(this.bodyTableOuter.querySelector('.scroll-container')).width; // scroll-container层元素的宽度
|
||
var scrollContainerTableWidth = this.bodyTableOuter.querySelector('.table-bordered').style.width; // scroll-container内层table元素的宽度
|
||
// 有左右固定列时，scroll-container因为有竖直滚动条，使得scroll-container实际宽度（不包括滚动条的宽度）小于内部table宽度出现水平方向滚动条，导致滚动到底部不对齐
|
||
if (parseFloat(scrollContainerWidth) >= parseFloat(scrollContainerTableWidth) && (this.columnManager.leftLeafColumns().length > 0 || this.columnManager.rightLeafColumns().length > 0)) {
|
||
this.bodyTable.style.overflowX = 'hidden';
|
||
} else {
|
||
this.bodyTable.style.overflowX = 'auto';
|
||
}
|
||
if (this.bodyTableOuter) {
|
||
// 隐藏几个不需要真正滚动的父元素的滚动条
|
||
this.bodyTableOuter.style.overflowY = 'hidden';
|
||
}
|
||
if (this.fixedColumnsBodyLeftOuter) {
|
||
this.fixedColumnsBodyLeftOuter.style.overflowY = 'hidden';
|
||
}
|
||
if (this.fixedColumnsBodyRightOuter) {
|
||
this.fixedColumnsBodyRightOuter.style.overflowY = 'hidden';
|
||
}
|
||
};
|
||
|
||
Table.prototype.componentWillUnmount = function componentWillUnmount() {
|
||
// 移除绑定事件,避免内存泄漏
|
||
this.contentTable = null;
|
||
_utils.EventUtil.removeHandler(this.contentTable, 'keydown', this.onKeyDown);
|
||
_utils.EventUtil.removeHandler(this.contentTable, 'focus', this.onFocus);
|
||
if (this.resizeObserver) {
|
||
this.resizeObserver.disconnect();
|
||
}
|
||
};
|
||
|
||
Table.prototype.computeTableWidth = function computeTableWidth() {
|
||
var expandIconAsCell = this.props.expandIconAsCell;
|
||
//如果用户传了scroll.x按用户传的为主
|
||
|
||
var setWidthParam = this.props.scroll.x;
|
||
|
||
if (typeof setWidthParam == 'number') {
|
||
var numSetWidthParam = parseInt(setWidthParam);
|
||
this.contentWidth = numSetWidthParam;
|
||
} else {
|
||
// this.preContentDomWidth = this.contentDomWidth;
|
||
//计算总表格宽度、根据表格宽度和各列的宽度和比较，重置最后一列
|
||
this.contentDomWidth = this.contentTable.getBoundingClientRect().width; //表格容器宽度
|
||
|
||
this.contentWidth = this.contentDomWidth; //默认与容器宽度一样
|
||
}
|
||
var computeObj = this.columnManager.getColumnWidth(this.contentWidth);
|
||
var expandColWidth = expandIconAsCell ? expandIconCellWidth : 0;
|
||
var lastShowIndex = computeObj.lastShowIndex;
|
||
this.computeWidth = computeObj.computeWidth + expandColWidth;
|
||
|
||
this.domWidthDiff = this.contentDomWidth - this.computeWidth;
|
||
if (typeof setWidthParam == 'string' && setWidthParam.indexOf('%')) {
|
||
this.contentWidth = this.contentWidth * parseInt(setWidthParam) / 100;
|
||
this.domWidthDiff = this.contentDomWidth - this.contentWidth;
|
||
}
|
||
|
||
if (this.computeWidth < this.contentWidth) {
|
||
var contentWidthDiff = this.scrollbarWidth ? this.contentWidth - this.computeWidth - this.scrollbarWidth : this.contentWidth - this.computeWidth;
|
||
//bordered的表格需要减去边框的差值1
|
||
if (this.props.bordered) {
|
||
contentWidthDiff = contentWidthDiff - 1;
|
||
}
|
||
this.setState({ contentWidthDiff: contentWidthDiff, lastShowIndex: lastShowIndex });
|
||
} else {
|
||
this.contentWidth = this.computeWidth;
|
||
this.setState({ contentWidthDiff: 0, lastShowIndex: lastShowIndex }); //重新渲染，为了显示滚动条
|
||
}
|
||
};
|
||
//根据内容动态的判断是否显示纵向滚动条
|
||
|
||
|
||
Table.prototype.isShowScrollY = function isShowScrollY() {
|
||
var props = this.props;
|
||
var y = props.scroll && props.scroll.y;
|
||
if (y) {
|
||
var bodyH = this.bodyTable.clientHeight;
|
||
var bodyContentH = this.bodyTable.querySelector('table').clientHeight;
|
||
var rightBodyTable = this.refs.fixedColumnsBodyRight;
|
||
// const leftBodyTable = this.refs.fixedColumnsBodyLeft;
|
||
var overflowy = bodyContentH <= bodyH ? 'auto' : 'scroll';
|
||
this.bodyTable.style.overflowY = overflowy;
|
||
|
||
this.headTable.style.overflowY = overflowy;
|
||
rightBodyTable && (rightBodyTable.style.overflowY = overflowy);
|
||
// 没有纵向滚动条时，表头横向滚动条根据内容动态显示 待验证
|
||
// if(overflowy == 'auto'){
|
||
// this.fixedHeadTable && (this.fixedHeadTable.style.overflowX = 'auto');
|
||
// rightBodyTable && (rightBodyTable.style.overflowX = 'auto');
|
||
// leftBodyTable && (leftBodyTable.style.overflowX = 'auto');
|
||
// }
|
||
|
||
}
|
||
};
|
||
|
||
Table.prototype.onExpandedRowsChange = function onExpandedRowsChange(expandedRowKeys) {
|
||
if (!this.props.expandedRowKeys) {
|
||
this.setState({ expandedRowKeys: expandedRowKeys });
|
||
}
|
||
this.props.onExpandedRowsChange(expandedRowKeys);
|
||
};
|
||
|
||
Table.prototype.onExpanded = function onExpanded(expanded, record, index, e) {
|
||
if (e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
}
|
||
var info = this.findExpandedRow(record);
|
||
if (typeof info !== 'undefined' && !expanded) {
|
||
this.onRowDestroy(record, index, true);
|
||
} else if (!info && expanded) {
|
||
var expandedRows = this.getExpandedRows().concat();
|
||
expandedRows.push(this.getRowKey(record, index));
|
||
this.onExpandedRowsChange(expandedRows);
|
||
}
|
||
this.props.onExpand(expanded, record, index);
|
||
};
|
||
|
||
Table.prototype.onRowDestroy = function onRowDestroy(record, rowIndex, isExpandOperation) {
|
||
var expandedRows = this.getExpandedRows().concat();
|
||
var rowKey = this.getRowKey(record, rowIndex);
|
||
var index = -1;
|
||
expandedRows.forEach(function (r, i) {
|
||
if (r === rowKey) {
|
||
index = i;
|
||
}
|
||
});
|
||
if (index !== -1) {
|
||
expandedRows.splice(index, 1);
|
||
}
|
||
//
|
||
if (this.currentHoverKey == rowKey && this.hoverDom) {
|
||
this.hoverDom.style.display = 'none';
|
||
}
|
||
// todo:如果是TableRow组件卸载触发的该方法，需要加判断，解决懒加载时，持续触发onExpandedRowsChange的问题
|
||
if (isExpandOperation) {
|
||
this.onExpandedRowsChange(expandedRows);
|
||
} else {
|
||
var info = this.findExpandedRow(record);
|
||
if (typeof info === 'undefined') {
|
||
this.onExpandedRowsChange(expandedRows);
|
||
}
|
||
}
|
||
};
|
||
|
||
Table.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.');
|
||
return key;
|
||
};
|
||
|
||
Table.prototype.getExpandedRows = function getExpandedRows() {
|
||
return this.props.expandedRowKeys || this.state.expandedRowKeys;
|
||
};
|
||
|
||
Table.prototype.getHeader = function getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
|
||
var lastShowIndex = this.state.lastShowIndex;
|
||
var _props2 = this.props,
|
||
filterDelay = _props2.filterDelay,
|
||
onFilterChange = _props2.onFilterChange,
|
||
onFilterClear = _props2.onFilterClear,
|
||
filterable = _props2.filterable,
|
||
showHeader = _props2.showHeader,
|
||
expandIconAsCell = _props2.expandIconAsCell,
|
||
clsPrefix = _props2.clsPrefix,
|
||
onDragStart = _props2.onDragStart,
|
||
onDragEnter = _props2.onDragEnter,
|
||
onDragOver = _props2.onDragOver,
|
||
onDrop = _props2.onDrop,
|
||
onDragEnd = _props2.onDragEnd,
|
||
draggable = _props2.draggable,
|
||
onMouseDown = _props2.onMouseDown,
|
||
onMouseMove = _props2.onMouseMove,
|
||
onMouseUp = _props2.onMouseUp,
|
||
dragborder = _props2.dragborder,
|
||
onThMouseMove = _props2.onThMouseMove,
|
||
dragborderKey = _props2.dragborderKey,
|
||
minColumnWidth = _props2.minColumnWidth,
|
||
headerHeight = _props2.headerHeight,
|
||
afterDragColWidth = _props2.afterDragColWidth,
|
||
headerScroll = _props2.headerScroll,
|
||
bordered = _props2.bordered,
|
||
onDropBorder = _props2.onDropBorder,
|
||
onDraggingBorder = _props2.onDraggingBorder,
|
||
bodyDisplayInRow = _props2.bodyDisplayInRow,
|
||
headerEventNoStop = _props2.headerEventNoStop,
|
||
onCopy = _props2.onCopy;
|
||
|
||
this.columnsChildrenList = []; //复杂表头拖拽，重新render表头前，将其置空
|
||
var rows = this.getHeaderRows(columns);
|
||
if (expandIconAsCell && fixed !== 'right') {
|
||
rows[0].unshift({
|
||
key: 'u-table-expandIconAsCell',
|
||
className: clsPrefix + '-expand-icon-th',
|
||
title: '',
|
||
rowSpan: rows.length,
|
||
width: expandIconCellWidth
|
||
});
|
||
this.columnsChildrenList.unshift({
|
||
className: "u-table-expand-icon-column",
|
||
key: "expand-icon"
|
||
});
|
||
}
|
||
var trStyle = headerHeight && !fixed ? { height: headerHeight } : fixed ? this.getHeaderRowStyle(columns, rows) : null;
|
||
var drop = draggable ? { onDragStart: onDragStart, onDragOver: onDragOver, onDrop: onDrop, onDragEnd: onDragEnd, onDragEnter: onDragEnter, draggable: draggable } : {};
|
||
var dragBorder = dragborder ? { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, dragborder: dragborder, onThMouseMove: onThMouseMove, dragborderKey: dragborderKey, onDropBorder: onDropBorder, onDraggingBorder: onDraggingBorder } : {};
|
||
var contentWidthDiff = 0;
|
||
//非固定表格,宽度不够时自动扩充
|
||
if (!fixed) {
|
||
contentWidthDiff = this.state.contentWidthDiff;
|
||
}
|
||
return showHeader ? _react2["default"].createElement(_TableHeader2["default"], _extends({}, drop, dragBorder, {
|
||
columnsChildrenList: this.columnsChildrenList,
|
||
locale: this.props.locale,
|
||
minColumnWidth: minColumnWidth,
|
||
contentWidthDiff: contentWidthDiff,
|
||
contentWidth: this.contentWidth,
|
||
lastShowIndex: expandIconAsCell ? parseInt(lastShowIndex) + 1 : lastShowIndex,
|
||
clsPrefix: clsPrefix,
|
||
rows: rows,
|
||
contentTable: this.contentTable,
|
||
rowStyle: trStyle,
|
||
fixed: fixed,
|
||
filterable: filterable,
|
||
onFilterChange: onFilterChange,
|
||
onFilterClear: onFilterClear,
|
||
filterDelay: filterDelay,
|
||
afterDragColWidth: afterDragColWidth,
|
||
contentDomWidth: this.contentDomWidth,
|
||
scrollbarWidth: this.scrollbarWidth,
|
||
headerScroll: headerScroll,
|
||
bordered: bordered,
|
||
leftFixedWidth: leftFixedWidth,
|
||
rightFixedWidth: rightFixedWidth,
|
||
bodyDisplayInRow: bodyDisplayInRow,
|
||
eventNoStop: headerEventNoStop,
|
||
onCopy: onCopy
|
||
})) : null;
|
||
};
|
||
|
||
Table.prototype.getHeaderRows = function getHeaderRows(columns) {
|
||
var _this3 = this;
|
||
|
||
var currentRow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
||
var rows = arguments[2];
|
||
var columnKey = this.props.columnKey;
|
||
var _state = this.state,
|
||
_state$contentWidthDi = _state.contentWidthDiff,
|
||
contentWidthDiff = _state$contentWidthDi === undefined ? 0 : _state$contentWidthDi,
|
||
_state$lastShowIndex = _state.lastShowIndex,
|
||
lastShowIndex = _state$lastShowIndex === undefined ? -1 : _state$lastShowIndex;
|
||
|
||
var filterCol = [];
|
||
rows = rows || [];
|
||
rows[currentRow] = rows[currentRow] || [];
|
||
|
||
columns.forEach(function (column, i) {
|
||
if (!column.key) {
|
||
column.key = column[columnKey];
|
||
}
|
||
if (column.rowSpan && rows.length < column.rowSpan) {
|
||
while (rows.length < column.rowSpan) {
|
||
rows.push([]);
|
||
}
|
||
}
|
||
var width = column.width;
|
||
if (typeof width == 'string' && width.indexOf('%') > -1 && _this3.contentWidth) {
|
||
width = parseInt(_this3.contentWidth * parseInt(width) / 100);
|
||
} else if (width) {
|
||
width = parseInt(width);
|
||
}
|
||
if (!column.fixed && lastShowIndex == i && width) {
|
||
width = width + contentWidthDiff;
|
||
}
|
||
var cell = {
|
||
key: column.key,
|
||
className: column.className || '',
|
||
children: column.title,
|
||
drgHover: column.drgHover,
|
||
fixed: column.fixed,
|
||
width: width,
|
||
dataindex: column.dataIndex,
|
||
textAlign: column.textAlign,
|
||
titleAlign: column.titleAlign, // 标题水平对齐方式
|
||
required: column.required // 标题是否展示必填标志
|
||
};
|
||
if (column.onHeadCellClick) {
|
||
cell.onClick = column.onHeadCellClick;
|
||
}
|
||
if (column.children) {
|
||
_this3.getHeaderRows(column.children, currentRow + 1, rows);
|
||
} else {
|
||
_this3.columnsChildrenList.push(column); //复杂表头拖拽，所有叶子节点
|
||
}
|
||
if ('colSpan' in column) {
|
||
cell.colSpan = column.colSpan;
|
||
}
|
||
if ('rowSpan' in column) {
|
||
cell.rowSpan = column.rowSpan;
|
||
}
|
||
if (cell.colSpan !== 0) {
|
||
rows[currentRow].push(cell);
|
||
}
|
||
//判断是否启用过滤
|
||
if (_this3.props.filterable) {
|
||
//组装Filter需要的Col
|
||
filterCol.push({
|
||
key: column.key,
|
||
children: "过滤渲染",
|
||
width: column.width,
|
||
filtertype: column.filterType, //下拉的类型 包括['text','dropdown','date','daterange','number']
|
||
dataindex: column.dataIndex, //field
|
||
datasource: _this3.props.data, //需要单独拿到数据处理
|
||
format: column.format, //设置日期的格式
|
||
filterdropdown: column.filterDropdown, //是否显示 show hide
|
||
filterdropdownauto: column.filterDropdownAuto, //是否自定义数据
|
||
filterdropdowndata: column.filterDropdownData, //自定义数据格式
|
||
filterdropdownfocus: column.filterDropdownFocus, //焦点触发函数回调
|
||
filterdropdowntype: column.filterDropdownType, //下拉的类型分为 String,Number 默认是String
|
||
filterdropdownincludekeys: column.filterDropdownIncludeKeys, //下拉条件按照指定的keys去显示
|
||
filterinputnumberoptions: column.filterInputNumberOptions //设置数值框内的详细属性
|
||
});
|
||
}
|
||
});
|
||
if (this.props.filterable) {
|
||
rows.push(filterCol);
|
||
}
|
||
return rows.filter(function (row) {
|
||
return row.length > 0;
|
||
});
|
||
};
|
||
|
||
Table.prototype.getExpandedRow = function getExpandedRow(key, content, visible, className, fixed) {
|
||
var _props3 = this.props,
|
||
clsPrefix = _props3.clsPrefix,
|
||
expandIconAsCell = _props3.expandIconAsCell,
|
||
onPaste = _props3.onPaste,
|
||
getCellClassName = _props3.getCellClassName;
|
||
|
||
var colCount = void 0;
|
||
if (fixed === 'left') {
|
||
colCount = this.columnManager.leftLeafColumns().length;
|
||
} else if (fixed === 'right') {
|
||
colCount = this.columnManager.rightLeafColumns().length;
|
||
} else {
|
||
colCount = this.columnManager.centerColumns().length; //计算非固定列的个数，fix: 嵌套表格场景，右侧列断开的问题
|
||
}
|
||
|
||
var expandedRowHeight = this.state.fixedColumnsExpandedRowsHeight[key] || 'auto';
|
||
function contentContainer() {
|
||
if (content && content.props && content.props.style) {
|
||
return _react2["default"].createElement('div', { style: { height: content.props.style.height } });
|
||
} else {
|
||
return ' ';
|
||
}
|
||
}
|
||
|
||
var columns = [{
|
||
key: 'extra-row',
|
||
render: function render() {
|
||
return {
|
||
props: {
|
||
colSpan: colCount
|
||
},
|
||
children: !fixed ? content : contentContainer()
|
||
};
|
||
}
|
||
}];
|
||
if (expandIconAsCell && fixed !== 'right') {
|
||
columns.unshift({
|
||
key: 'expand-icon-placeholder',
|
||
render: function render() {
|
||
return null;
|
||
}
|
||
});
|
||
}
|
||
return _react2["default"].createElement(_TableRow2["default"], {
|
||
onPaste: onPaste,
|
||
columns: columns,
|
||
visible: visible,
|
||
className: className,
|
||
key: key + '-extra-row',
|
||
clsPrefix: clsPrefix + '-expanded-row',
|
||
indent: 1,
|
||
expandable: false,
|
||
store: this.store,
|
||
dragborderKey: this.props.dragborderKey,
|
||
rowDraggAble: this.props.rowDraggAble,
|
||
useDragHandle: this.props.useDragHandle,
|
||
onDragRow: this.onDragRow,
|
||
onDragRowStart: this.onDragRowStart,
|
||
height: expandedRowHeight,
|
||
getCellClassName: getCellClassName
|
||
});
|
||
};
|
||
|
||
/**
|
||
* 行拖拽开始时触发
|
||
* @param currentKey 当前拖拽目标的key
|
||
*/
|
||
|
||
|
||
/**
|
||
* 行拖拽结束时触发
|
||
* @param currentKey 当前拖拽目标的key
|
||
* @param targetKey 拖拽结束时，目标位置的key
|
||
*/
|
||
|
||
/**
|
||
* 数组元素交换位置
|
||
* @param {array} arr 数组
|
||
* @param {number} index1 添加项目的位置
|
||
* @param {number} index2 删除项目的位置
|
||
*/
|
||
|
||
|
||
/**
|
||
*
|
||
*
|
||
* @param {*} data
|
||
* @param {*} visible
|
||
* @param {*} indent 层级
|
||
* @param {*} columns
|
||
* @param {*} fixed
|
||
* @param {number} [rootIndex=-1] 祖级节点
|
||
* @returns
|
||
* @memberof Table
|
||
*/
|
||
Table.prototype.getRowsByData = function getRowsByData(data, visible, indent, columns, fixed) {
|
||
var rootIndex = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : -1;
|
||
|
||
var props = this.props;
|
||
var childrenColumnName = props.childrenColumnName;
|
||
var expandedRowRender = props.expandedRowRender;
|
||
var expandRowByClick = props.expandRowByClick;
|
||
var onPaste = props.onPaste;
|
||
var fixedColumnsBodyRowsHeight = this.state.fixedColumnsBodyRowsHeight;
|
||
|
||
var rst = [];
|
||
var height = void 0;
|
||
var rowClassName = props.rowClassName;
|
||
var rowRef = props.rowRef;
|
||
var expandedRowClassName = props.expandedRowClassName;
|
||
var needIndentSpaced = props.data.some(function (record) {
|
||
return record[childrenColumnName];
|
||
});
|
||
var onRowClick = props.onRowClick;
|
||
var onRowDoubleClick = props.onRowDoubleClick;
|
||
|
||
var expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false;
|
||
var expandIconColumnIndex = props.expandIconColumnIndex;
|
||
if (props.lazyLoad && props.lazyLoad.preHeight && indent == 0) {
|
||
rst.push(_react2["default"].createElement(_TableRow2["default"], { onPaste: onPaste, containerWidth: this.contentDomWidth, isPre: true, height: props.lazyLoad.preHeight, columns: [], className: '', key: 'table_row_first', store: this.store, visible: true }));
|
||
}
|
||
var lazyCurrentIndex = props.lazyLoad && props.lazyLoad.startIndex ? props.lazyLoad.startIndex : 0;
|
||
var lazyParentIndex = props.lazyLoad && props.lazyLoad.startParentIndex ? props.lazyLoad.startParentIndex : 0;
|
||
var lazyEndIndex = props.lazyLoad && props.lazyLoad.endIndex ? props.lazyLoad.endIndex : -1;
|
||
for (var i = 0; i < data.length; i++) {
|
||
var isHiddenExpandIcon = void 0;
|
||
var record = data[i];
|
||
var key = this.getRowKey(record, i);
|
||
// 兼容 NCC 以前的业务逻辑，支持外部通过 record 中的 isleaf 字段，判断是否为叶子节点
|
||
typeof record['isleaf'] === 'boolean' && (record['_isLeaf'] = record['isleaf']);
|
||
// _isLeaf 字段是在 bigData 里添加的，只有层级树大数据场景需要该字段
|
||
// _isLeaf 有三种取值情况：true / false / null。（Table内部字段）
|
||
var _isLeaf = typeof record['_isLeaf'] === 'boolean' ? record['_isLeaf'] : null;
|
||
var childrenColumn = _isLeaf ? false : record[childrenColumnName];
|
||
var isRowExpanded = this.isRowExpanded(record, i);
|
||
var expandedRowContent = void 0;
|
||
var expandedContentHeight = 0;
|
||
//fixedIndex一般是跟index是一个值的，只有是树结构时，会讲子节点的值也累计上
|
||
var fixedIndex = i;
|
||
//判断是否是tree结构
|
||
if (this.treeType) {
|
||
fixedIndex = this.treeRowIndex;
|
||
}
|
||
if (expandedRowRender && isRowExpanded) {
|
||
expandedRowContent = expandedRowRender(record, fixedIndex + lazyCurrentIndex, indent);
|
||
expandedContentHeight = parseInt(expandedRowContent.props && expandedRowContent.props.style && expandedRowContent.props.style.height ? expandedRowContent.props.style.height : 0);
|
||
}
|
||
//只有当使用expandedRowRender参数的时候才去识别isHiddenExpandIcon（隐藏行展开的icon）
|
||
if (expandedRowRender && typeof props.haveExpandIcon == 'function') {
|
||
isHiddenExpandIcon = props.haveExpandIcon(record, i);
|
||
}
|
||
|
||
var onHoverProps = {};
|
||
|
||
onHoverProps.onHover = this.handleRowHover;
|
||
|
||
if (props.bodyDisplayInRow && props.height) {
|
||
height = props.height;
|
||
} else if (fixed || props.heightConsistent) {
|
||
height = fixedColumnsBodyRowsHeight[fixedIndex];
|
||
}
|
||
|
||
var leafColumns = void 0;
|
||
if (fixed === 'left') {
|
||
leafColumns = this.columnManager.leftLeafColumns();
|
||
} else if (fixed === 'right') {
|
||
leafColumns = this.columnManager.rightLeafColumns();
|
||
} else {
|
||
leafColumns = this.columnManager.leafColumns();
|
||
}
|
||
var className = rowClassName(record, fixedIndex + lazyCurrentIndex, indent);
|
||
|
||
//合计代码如果是最后一行并且有合计功能时，最后一行为合计列
|
||
if (i == data.length - 1 && props.showSum) {
|
||
className = className + ' sumrow';
|
||
}
|
||
|
||
var paramRootIndex = rootIndex;
|
||
//小于0说明为第一层节点，她的子孙节点要保存自己的根节点
|
||
if (paramRootIndex < 0) {
|
||
paramRootIndex = i + lazyParentIndex;
|
||
}
|
||
var index = i;
|
||
if (rootIndex == -1) {
|
||
index = i + lazyParentIndex;
|
||
}
|
||
rst.push(_react2["default"].createElement(_TableRow2["default"], _extends({
|
||
onPaste: onPaste,
|
||
indent: indent,
|
||
indentSize: props.indentSize,
|
||
needIndentSpaced: needIndentSpaced,
|
||
className: '' + className,
|
||
record: record,
|
||
expandIconAsCell: expandIconAsCell,
|
||
onDestroy: this.onRowDestroy,
|
||
index: index,
|
||
visible: visible,
|
||
expandRowByClick: expandRowByClick,
|
||
onExpand: this.onExpanded,
|
||
expandable: expandedRowRender || (childrenColumn && childrenColumn.length > 0 ? true : _isLeaf === false),
|
||
expanded: isRowExpanded,
|
||
clsPrefix: props.clsPrefix + '-row',
|
||
childrenColumnName: childrenColumnName,
|
||
columns: leafColumns,
|
||
expandIconColumnIndex: expandIconColumnIndex,
|
||
onRowClick: onRowClick,
|
||
onRowDoubleClick: onRowDoubleClick,
|
||
height: height,
|
||
isHiddenExpandIcon: isHiddenExpandIcon
|
||
}, onHoverProps, {
|
||
key: "table_row_" + key + "_" + index,
|
||
hoverKey: key,
|
||
ref: rowRef,
|
||
store: this.store,
|
||
fixed: fixed,
|
||
expandedContentHeight: expandedContentHeight,
|
||
setRowHeight: props.setRowHeight,
|
||
setRowParentIndex: props.setRowParentIndex,
|
||
treeType: childrenColumn || this.treeType ? true : false,
|
||
fixedIndex: fixedIndex + lazyCurrentIndex,
|
||
rootIndex: rootIndex,
|
||
syncHover: props.syncHover,
|
||
bodyDisplayInRow: props.bodyDisplayInRow,
|
||
rowDraggAble: props.rowDraggAble,
|
||
useDragHandle: props.useDragHandle,
|
||
onDragRow: this.onDragRow,
|
||
onDragRowStart: this.onDragRowStart,
|
||
contentTable: this.contentTable,
|
||
tableUid: this.tableUid,
|
||
expandedIcon: props.expandedIcon,
|
||
collapsedIcon: props.collapsedIcon,
|
||
lazyStartIndex: lazyCurrentIndex,
|
||
lazyEndIndex: lazyEndIndex,
|
||
centerColumnsLength: this.centerColumnsLength,
|
||
leftColumnsLength: this.leftColumnsLength,
|
||
expandIconCellWidth: expandIconCellWidth,
|
||
getCellClassName: props.getCellClassName
|
||
})));
|
||
this.treeRowIndex++;
|
||
var subVisible = visible && isRowExpanded;
|
||
|
||
if (expandedRowContent && isRowExpanded) {
|
||
rst.push(this.getExpandedRow(key, expandedRowContent, subVisible, expandedRowClassName(record, i, indent), fixed));
|
||
}
|
||
if (childrenColumn) {
|
||
this.isTreeType = true; //增加该标志位，为了兼容老版本，不修改以前的 `this.treeType` 的相关逻辑
|
||
this.treeType = true; //证明是tree表形式visible = {true}
|
||
rst = rst.concat(this.getRowsByData(childrenColumn, subVisible, indent + 1, columns, fixed, paramRootIndex));
|
||
}
|
||
}
|
||
|
||
if (props.lazyLoad && props.lazyLoad.sufHeight && indent == 0) {
|
||
rst.push(_react2["default"].createElement(_TableRow2["default"], { onPaste: onPaste, containerWidth: this.contentDomWidth, isSuf: true, height: props.lazyLoad.sufHeight, key: 'table_row_end', columns: [], className: '', store: this.store, visible: true }));
|
||
}
|
||
if (!this.isTreeType) {
|
||
this.treeType = false;
|
||
}
|
||
return rst;
|
||
};
|
||
|
||
Table.prototype.getRows = function getRows(columns, fixed) {
|
||
//统计index，只有含有树表结构才有用，因为树表结构时，固定列的索引取值有问题
|
||
this.treeRowIndex = 0;
|
||
//每次遍历 data 前，将this.isTreeType置为 false，若遍历完 data，此变量仍为 false，说明是普通表格
|
||
this.isTreeType = false;
|
||
var rs = this.getRowsByData(this.state.data, true, 0, columns, fixed);
|
||
return rs;
|
||
};
|
||
|
||
Table.prototype.getColGroup = function getColGroup(columns, fixed) {
|
||
var _this4 = this;
|
||
|
||
var cols = [];
|
||
var self = this;
|
||
|
||
var _state2 = this.state,
|
||
_state2$contentWidthD = _state2.contentWidthDiff,
|
||
contentWidthDiff = _state2$contentWidthD === undefined ? 0 : _state2$contentWidthD,
|
||
_state2$lastShowIndex = _state2.lastShowIndex,
|
||
lastShowIndex = _state2$lastShowIndex === undefined ? 0 : _state2$lastShowIndex;
|
||
|
||
if (this.props.expandIconAsCell && fixed !== 'right') {
|
||
cols.push(_react2["default"].createElement('col', {
|
||
className: this.props.clsPrefix + '-expand-icon-col',
|
||
key: 'u-table-expand-icon-col'
|
||
}));
|
||
}
|
||
var leafColumns = void 0;
|
||
if (fixed === 'left') {
|
||
contentWidthDiff = 0;
|
||
leafColumns = this.columnManager.leftLeafColumns();
|
||
} else if (fixed === 'right') {
|
||
contentWidthDiff = 0;
|
||
leafColumns = this.columnManager.rightLeafColumns();
|
||
} else {
|
||
leafColumns = this.columnManager.leafColumns();
|
||
}
|
||
cols = cols.concat(leafColumns.map(function (c, i, arr) {
|
||
var fixedClass = '';
|
||
var width = c.width;
|
||
if (typeof width == 'string' && width.indexOf('%') > -1 && self.contentWidth) {
|
||
width = parseInt(self.contentWidth * parseInt(width) / 100);
|
||
} else if (width) {
|
||
width = parseInt(width);
|
||
}
|
||
if (lastShowIndex == i && width) {
|
||
width = width + contentWidthDiff;
|
||
}
|
||
if (!fixed && c.fixed) {
|
||
fixedClass = ' ' + _this4.props.clsPrefix + '-row-fixed-columns-in-body';
|
||
}
|
||
return _react2["default"].createElement('col', { key: c.key, style: { width: width, minWidth: c.width }, className: fixedClass });
|
||
}));
|
||
return _react2["default"].createElement(
|
||
'colgroup',
|
||
{ id: 'bee-table-colgroup' },
|
||
cols
|
||
);
|
||
};
|
||
|
||
Table.prototype.getLeftFixedTable = function getLeftFixedTable() {
|
||
return this.getTable({
|
||
columns: this.columnManager.leftColumns(),
|
||
fixed: 'left'
|
||
});
|
||
};
|
||
|
||
Table.prototype.getRightFixedTable = function getRightFixedTable() {
|
||
return this.getTable({
|
||
columns: this.columnManager.rightColumns(),
|
||
fixed: 'right'
|
||
});
|
||
};
|
||
|
||
Table.prototype.getTable = function getTable() {
|
||
var _this5 = this;
|
||
|
||
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
||
var columns = options.columns,
|
||
fixed = options.fixed;
|
||
var _props4 = this.props,
|
||
clsPrefix = _props4.clsPrefix,
|
||
_props4$scroll = _props4.scroll,
|
||
scroll = _props4$scroll === undefined ? {} : _props4$scroll,
|
||
getBodyWrapper = _props4.getBodyWrapper,
|
||
footerScroll = _props4.footerScroll,
|
||
headerScroll = _props4.headerScroll,
|
||
_props4$hideHeaderScr = _props4.hideHeaderScroll,
|
||
hideHeaderScroll = _props4$hideHeaderScr === undefined ? false : _props4$hideHeaderScr,
|
||
expandIconAsCell = _props4.expandIconAsCell;
|
||
var _props5 = this.props,
|
||
useFixedHeader = _props5.useFixedHeader,
|
||
data = _props5.data;
|
||
|
||
var bodyStyle = _extends({}, this.props.bodyStyle); // 这里为什么不写在上面?
|
||
var headStyle = {};
|
||
var innerBodyStyle = {};
|
||
var leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
|
||
var rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
|
||
|
||
var tableClassName = '';
|
||
//表格元素的宽度大于容器的宽度也显示滚动条
|
||
if (scroll.x || fixed || this.contentDomWidth < this.contentWidth) {
|
||
tableClassName = clsPrefix + '-fixed';
|
||
//没有数据并且含有顶部菜单时
|
||
if (this.props.data.length == 0 && this.props.headerScroll) {
|
||
bodyStyle.overflowX = 'hidden';
|
||
}
|
||
if (!footerScroll && this.computeWidth > this.contentDomWidth) {
|
||
bodyStyle.overflowX = bodyStyle.overflowX || 'auto';
|
||
}
|
||
}
|
||
|
||
if (scroll.y) {
|
||
// maxHeight will make fixed-Table scrolling not working
|
||
// so we only set maxHeight to body-Table here
|
||
if (fixed) {
|
||
// bodyStyle.height = bodyStyle.height || scroll.y;
|
||
innerBodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y;
|
||
innerBodyStyle.overflowY = bodyStyle.overflowY || 'scroll';
|
||
if (this.computeWidth > this.contentDomWidth) {
|
||
innerBodyStyle.overflowX = 'scroll';
|
||
} else if (this.contentWidth === this.contentDomWidth) {
|
||
innerBodyStyle.overflowX = 'hidden';
|
||
}
|
||
} else {
|
||
bodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y;
|
||
}
|
||
bodyStyle.overflowY = bodyStyle.overflowY || 'scroll';
|
||
useFixedHeader = true;
|
||
|
||
// Add negative margin bottom for scroll bar overflow bug
|
||
var scrollbarWidth = this.scrollbarWidth;
|
||
if (scrollbarWidth >= 0) {
|
||
(fixed ? bodyStyle : headStyle).paddingBottom = '0px';
|
||
//显示表头滚动条
|
||
if (headerScroll) {
|
||
if (fixed) {
|
||
|
||
if (this.domWidthDiff <= 0) {
|
||
headStyle.marginBottom = scrollbarWidth + 'px';
|
||
bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
|
||
} else {
|
||
innerBodyStyle.overflowX = 'auto';
|
||
}
|
||
} else {
|
||
//内容少，不用显示滚动条
|
||
if (this.domWidthDiff > 0) {
|
||
headStyle.overflowX = 'hidden';
|
||
}
|
||
headStyle.marginBottom = '0px';
|
||
}
|
||
} else {
|
||
if (fixed) {
|
||
if (this.domWidthDiff > 0) {
|
||
headStyle.overflow = 'hidden';
|
||
innerBodyStyle.overflowX = 'auto'; //兼容expand场景、子表格含有固定列的场景
|
||
} else {
|
||
if (this.computeWidth > this.contentDomWidth) {
|
||
bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
|
||
var userAgent = navigator.userAgent; // 火狐，IE浏览器，固定表格跟随resize事件产生的滚动条隐藏
|
||
var isFF = userAgent.indexOf("Firefox") > -1;
|
||
var isIE = !!window.ActiveXObject || "ActiveXObject" in window;
|
||
if (isFF || isIE) {
|
||
// innerBodyStyle.overflowX = 'hidden';
|
||
delete innerBodyStyle.overflowX;
|
||
}
|
||
}
|
||
}
|
||
} else {
|
||
// 没有数据时，表头滚动条隐藏问题
|
||
if (data.length == 0 && this.domWidthDiff < 0) {
|
||
headStyle.marginBottom = '0px';
|
||
} else {
|
||
headStyle.marginBottom = '-' + scrollbarWidth + 'px';
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
if (data.length == 0 && hideHeaderScroll) {
|
||
//支持 NCC 需求:表格无数据时，去掉表头滚动条 (https://github.com/iuap-design/tinper-bee/issues/207)
|
||
headStyle.marginBottom = '-' + this.scrollbarWidth + 'px';
|
||
}
|
||
|
||
var renderTable = function renderTable() {
|
||
var hasHead = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
|
||
var hasBody = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
||
|
||
var tableStyle = {};
|
||
if (!fixed && scroll.x) {
|
||
// not set width, then use content fixed width
|
||
if (scroll.x === true) {
|
||
tableStyle.tableLayout = 'fixed';
|
||
} else {
|
||
tableStyle.width = _this5.contentWidth - _this5.columnManager.getLeftColumnsWidth(_this5.contentWidth) - _this5.columnManager.getRightColumnsWidth(_this5.contentWidth);
|
||
}
|
||
}
|
||
// 自动出现滚动条
|
||
if (!fixed && _this5.contentDomWidth < _this5.contentWidth) {
|
||
tableStyle.width = _this5.contentWidth - _this5.columnManager.getLeftColumnsWidth(_this5.contentWidth) - _this5.columnManager.getRightColumnsWidth(_this5.contentWidth);
|
||
}
|
||
if (_this5.bodyTable && !fixed && _this5.contentDomWidth === _this5.contentWidth) {
|
||
tableStyle.width = _this5.bodyTable.clientWidth;
|
||
}
|
||
var tableBody = hasBody ? getBodyWrapper(_react2["default"].createElement(
|
||
'tbody',
|
||
{ className: clsPrefix + '-tbody', onMouseLeave: _this5.onBodyMouseLeave },
|
||
_this5.getRows(columns, fixed)
|
||
)) : null;
|
||
var _drag_class = _this5.props.dragborder ? "table-drag-bordered" : "";
|
||
return _react2["default"].createElement(
|
||
'table',
|
||
{ className: ' ' + tableClassName + ' table-bordered ' + _drag_class + ' ', style: tableStyle },
|
||
_this5.getColGroup(columns, fixed),
|
||
hasHead ? _this5.getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) : null,
|
||
tableBody
|
||
);
|
||
};
|
||
|
||
var headTable = void 0;
|
||
if (useFixedHeader) {
|
||
headTable = _react2["default"].createElement(
|
||
'div',
|
||
{
|
||
className: clsPrefix + '-header',
|
||
ref: function ref(el) {
|
||
fixed ? _this5.fixedHeadTable = el : _this5.headTable = el;
|
||
},
|
||
style: headStyle,
|
||
onMouseOver: this.detectScrollTarget,
|
||
onTouchStart: this.detectScrollTarget,
|
||
onScroll: this.handleBodyScroll
|
||
},
|
||
renderTable(true, false)
|
||
);
|
||
}
|
||
var BodyTable = _react2["default"].createElement(
|
||
'div',
|
||
{
|
||
className: clsPrefix + '-body',
|
||
style: bodyStyle,
|
||
onMouseOver: this.detectScrollTarget,
|
||
onTouchStart: this.detectScrollTarget,
|
||
ref: function ref(el) {
|
||
_this5.bodyTableOuter = el;
|
||
},
|
||
onMouseLeave: this.onBodyMouseLeave
|
||
},
|
||
this.renderDragHideTable(),
|
||
_react2["default"].createElement(
|
||
'div',
|
||
{ className: 'scroll-container', onScroll: this.handleBodyScroll, ref: function ref(el) {
|
||
_this5.bodyTable = el;
|
||
}, style: _extends({}, bodyStyle) },
|
||
renderTable(!useFixedHeader)
|
||
)
|
||
);
|
||
|
||
if (fixed && columns.length) {
|
||
var refName = void 0;
|
||
if (columns[0].fixed === 'left' || columns[0].fixed === true) {
|
||
refName = 'fixedColumnsBodyLeft';
|
||
} else if (columns[0].fixed === 'right') {
|
||
refName = 'fixedColumnsBodyRight';
|
||
}
|
||
delete bodyStyle.overflowX;
|
||
delete bodyStyle.overflowY;
|
||
BodyTable = _react2["default"].createElement(
|
||
'div',
|
||
{
|
||
className: clsPrefix + '-body-outer',
|
||
style: _extends({}, bodyStyle)
|
||
},
|
||
_react2["default"].createElement(
|
||
'div',
|
||
{
|
||
style: _extends({}, innerBodyStyle),
|
||
className: clsPrefix + '-body-inner',
|
||
ref: function ref(el) {
|
||
return _this5[refName + 'Outer'] = el;
|
||
},
|
||
onMouseOver: this.detectScrollTarget,
|
||
onTouchStart: this.detectScrollTarget
|
||
},
|
||
_react2["default"].createElement(
|
||
'div',
|
||
{ className: 'fixed-scroll-container', ref: refName, style: _extends({}, innerBodyStyle), onScroll: this.handleBodyScroll },
|
||
renderTable(!useFixedHeader)
|
||
)
|
||
)
|
||
);
|
||
}
|
||
// const leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
|
||
// const rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
|
||
var expandIconWidth = expandIconAsCell ? 32 : 0;
|
||
var parStyle = {};
|
||
if (!fixed) {
|
||
parStyle = { 'marginLeft': leftFixedWidth + expandIconWidth, 'marginRight': rightFixedWidth };
|
||
}
|
||
return _react2["default"].createElement(
|
||
'div',
|
||
{ style: parStyle },
|
||
headTable,
|
||
BodyTable
|
||
);
|
||
};
|
||
|
||
Table.prototype.getTitle = function getTitle() {
|
||
var _props6 = this.props,
|
||
title = _props6.title,
|
||
clsPrefix = _props6.clsPrefix;
|
||
|
||
return title ? _react2["default"].createElement(
|
||
'div',
|
||
{ className: clsPrefix + '-title' },
|
||
title(this.state.data)
|
||
) : null;
|
||
};
|
||
|
||
Table.prototype.getFooter = function getFooter() {
|
||
var _props7 = this.props,
|
||
footer = _props7.footer,
|
||
clsPrefix = _props7.clsPrefix;
|
||
|
||
return footer ? _react2["default"].createElement(
|
||
'div',
|
||
{ className: clsPrefix + '-footer' },
|
||
footer(this.state.data)
|
||
) : null;
|
||
};
|
||
|
||
Table.prototype.getEmptyText = function getEmptyText() {
|
||
var _props8 = this.props,
|
||
defaultEmptyText = _props8.emptyText,
|
||
clsPrefix = _props8.clsPrefix,
|
||
data = _props8.data;
|
||
|
||
var locale = (0, _tool.getComponentLocale)(this.props, this.context, 'Table', function () {
|
||
return _i18n2["default"];
|
||
});
|
||
var emptyText = defaultEmptyText !== undefined ? defaultEmptyText : function () {
|
||
return _react2["default"].createElement(
|
||
'div',
|
||
null,
|
||
_react2["default"].createElement(_beeIcon2["default"], { type: 'uf-nodata', className: 'table-nodata' }),
|
||
_react2["default"].createElement(
|
||
'span',
|
||
null,
|
||
locale["no_data"]
|
||
)
|
||
);
|
||
};
|
||
|
||
return !data.length ? _react2["default"].createElement(
|
||
'div',
|
||
{ className: clsPrefix + '-placeholder' },
|
||
emptyText()
|
||
) : null;
|
||
};
|
||
|
||
Table.prototype.getHeaderRowStyle = function getHeaderRowStyle(columns, rows) {
|
||
var fixedColumnsHeadRowsHeight = this.state.fixedColumnsHeadRowsHeight;
|
||
|
||
var headerHeight = fixedColumnsHeadRowsHeight[0];
|
||
|
||
if (headerHeight && columns) {
|
||
if (headerHeight === 'auto') {
|
||
return { height: 'auto' };
|
||
}
|
||
return { height: headerHeight / rows.length };
|
||
}
|
||
return null;
|
||
};
|
||
|
||
Table.prototype.getStyle = function getStyle(obj, attr) {
|
||
if (obj.currentStyle) {
|
||
return obj.currentStyle[attr];
|
||
} else {
|
||
return document.defaultView.getComputedStyle(obj, null)[attr];
|
||
}
|
||
};
|
||
|
||
Table.prototype.manualSyncFixedTableRowHeight = function manualSyncFixedTableRowHeight() {
|
||
this.dataChanged = true;
|
||
this.syncFixedTableRowHeight();
|
||
};
|
||
|
||
Table.prototype.syncFixedTableRowHeight = function syncFixedTableRowHeight() {
|
||
//this.props.height、headerHeight分别为用户传入的行高和表头高度，如果有值，所有行的高度都是固定的，主要为了避免在千行数据中有固定列时获取行高度有问题
|
||
var _props9 = this.props,
|
||
clsPrefix = _props9.clsPrefix,
|
||
height = _props9.height,
|
||
headerHeight = _props9.headerHeight,
|
||
columns = _props9.columns,
|
||
heightConsistent = _props9.heightConsistent,
|
||
bodyDisplayInRow = _props9.bodyDisplayInRow,
|
||
lazyLoad = _props9.lazyLoad,
|
||
syncFixedRowHeight = _props9.syncFixedRowHeight;
|
||
|
||
var headRows = this.headTable ? this.headTable.querySelectorAll('thead') : this.bodyTable.querySelectorAll('thead');
|
||
var expandedRows = this.bodyTable.querySelectorAll('.' + clsPrefix + '-expanded-row') || [];
|
||
var bodyRows = this.bodyTable.querySelectorAll('.' + clsPrefix + '-row') || [];
|
||
var leftBodyRows = !this.dataChanged && this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll('.' + clsPrefix + '-row') || [];
|
||
var rightBodyRows = !this.dataChanged && this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll('.' + clsPrefix + '-row') || [];
|
||
this.dataChanged = false;
|
||
var fixedColumnsHeadRowsHeight = [].map.call(headRows, function (row) {
|
||
var height = headerHeight;
|
||
if (headerHeight) {
|
||
height = ((0, _utils.getMaxColChildrenLength)(columns) + 1) * headerHeight;
|
||
}
|
||
return headerHeight ? height : parseInt(row.getBoundingClientRect().height) || 'auto';
|
||
});
|
||
var flatRecords = this.getFlatRecords(this.props.data || []);
|
||
var fixedColumnsBodyRowsHeight = [].map.call(bodyRows, function (row, index) {
|
||
var rsHeight = height;
|
||
if (bodyDisplayInRow && rsHeight) {
|
||
return rsHeight;
|
||
} else {
|
||
var rowKey = row.getAttribute('data-row-key');
|
||
var record = flatRecords.find(function (record) {
|
||
return record.key === rowKey;
|
||
}) || {};
|
||
var leafKey = 'isleaf' in record ? 'isleaf' : '_isLeaf' in record ? '_isLeaf' : null; // ncc传递这俩属性区分是否是子节点
|
||
var isLeaf = leafKey && record[leafKey] === true;
|
||
if (isLeaf) {
|
||
return Number(Number(row.getBoundingClientRect().height).toFixed(2)) || 'auto';
|
||
}
|
||
// 为了提高性能，默认获取主表的高度，但是有的场景中固定列的高度比主表的高度高，所以提供此属性，会统计所有列的高度取最大的，设置
|
||
// 内容折行显示，并又设置了 height 的情况下，也要获取主表高度
|
||
if (heightConsistent || !bodyDisplayInRow && rsHeight && syncFixedRowHeight) {
|
||
var leftHeight = void 0,
|
||
rightHeight = void 0,
|
||
currentHeight = void 0,
|
||
maxHeight = void 0;
|
||
leftHeight = leftBodyRows[index] ? Number(leftBodyRows[index].getBoundingClientRect().height).toFixed(2) : 0; // 有些浏览器中，取到的高度是小数，直接parseInt有问题，保留两位小数处理
|
||
rightHeight = rightBodyRows[index] ? Number(rightBodyRows[index].getBoundingClientRect().height).toFixed(2) : 0;
|
||
currentHeight = Number(row.getBoundingClientRect().height).toFixed(2);
|
||
maxHeight = Math.max(leftHeight, rightHeight, currentHeight);
|
||
return maxHeight || 'auto';
|
||
} else {
|
||
return Number(Number(row.getBoundingClientRect().height).toFixed(2)) || 'auto';
|
||
}
|
||
}
|
||
});
|
||
var fixedColumnsExpandedRowsHeight = {};
|
||
// expandedRows为NodeList Array.prototype.forEach ie 下报错 对象不支持 “forEach” 方法
|
||
expandedRows.length > 0 && Array.prototype.forEach.call(expandedRows, function (row) {
|
||
var parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key");
|
||
var exHeight = row && parseInt(row.getBoundingClientRect().height) || 'auto';
|
||
// fix: ie 展开表格计算渲染bug
|
||
// try {//子表数据减少时，动态计算高度
|
||
// let td = row.querySelector('td');
|
||
// let tdPadding = this.getTdPadding(td);
|
||
// let trueheight = parseInt(row.querySelectorAll('.u-table')[0].getBoundingClientRect().height);
|
||
// exHeight = trueheight+tdPadding;
|
||
// } catch (error) {
|
||
|
||
// }
|
||
fixedColumnsExpandedRowsHeight[parentRowKey] = parseInt(exHeight);
|
||
});
|
||
if ((0, _shallowequal2["default"])(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsExpandedRowsHeight, fixedColumnsExpandedRowsHeight)) {
|
||
return;
|
||
}
|
||
|
||
this.setState({
|
||
fixedColumnsHeadRowsHeight: fixedColumnsHeadRowsHeight,
|
||
fixedColumnsBodyRowsHeight: fixedColumnsBodyRowsHeight,
|
||
fixedColumnsExpandedRowsHeight: fixedColumnsExpandedRowsHeight
|
||
});
|
||
};
|
||
|
||
Table.prototype.resetScrollX = function resetScrollX() {
|
||
if (this.headTable) {
|
||
this.headTable.scrollLeft = 0;
|
||
}
|
||
if (this.bodyTable) {
|
||
this.bodyTable.scrollLeft = 0;
|
||
}
|
||
};
|
||
|
||
Table.prototype.findExpandedRow = function findExpandedRow(record, index) {
|
||
var _this6 = this;
|
||
|
||
var rows = this.getExpandedRows().filter(function (i) {
|
||
return i === _this6.getRowKey(record, index);
|
||
});
|
||
return rows[0];
|
||
};
|
||
|
||
Table.prototype.isRowExpanded = function isRowExpanded(record, index) {
|
||
return typeof this.findExpandedRow(record, index) !== 'undefined';
|
||
};
|
||
|
||
Table.prototype.onBodyMouseLeave = function onBodyMouseLeave(e) {
|
||
this.hideHoverDom(e);
|
||
var onBodyMouseLeave = this.props.onBodyMouseLeave;
|
||
|
||
if (typeof onBodyMouseLeave === 'function') {
|
||
this.clearBodyMouseLeaveTimer();
|
||
//因为鼠标移动到 hoverContent 中也会触发 onBodyMouseLeave，这是错误的
|
||
//所以讲 onBodyMouseLeave 回调的调用放入 setTimeout中，
|
||
// 当触发 hoverContent 的 onRowHoverMouseEnter 回调时，清除此定时器
|
||
this.bodyMouseLeaveTimmer = setTimeout(onBodyMouseLeave, 0);
|
||
}
|
||
};
|
||
|
||
Table.prototype.detectScrollTarget = function detectScrollTarget(e) {
|
||
if (this.scrollTarget !== e.currentTarget) {
|
||
this.scrollTarget = e.currentTarget;
|
||
}
|
||
};
|
||
|
||
Table.prototype.hideHoverDom = function hideHoverDom(e) {
|
||
if (this.hoverDom) {
|
||
this.hoverDom.style.display = 'none';
|
||
}
|
||
};
|
||
|
||
Table.prototype.handleBodyScroll = function handleBodyScroll(e) {
|
||
var headTable = this.headTable;
|
||
var _props10 = this.props,
|
||
_props10$scroll = _props10.scroll,
|
||
scroll = _props10$scroll === undefined ? {} : _props10$scroll,
|
||
clsPrefix = _props10.clsPrefix,
|
||
handleScrollY = _props10.handleScrollY,
|
||
handleScrollX = _props10.handleScrollX,
|
||
onBodyScroll = _props10.onBodyScroll;
|
||
var _refs = this.refs,
|
||
fixedColumnsBodyLeft = _refs.fixedColumnsBodyLeft,
|
||
fixedColumnsBodyRight = _refs.fixedColumnsBodyRight;
|
||
// Prevent scrollTop setter trigger onScroll event
|
||
// http://stackoverflow.com/q/1386696
|
||
|
||
if (e.currentTarget !== e.target) {
|
||
return;
|
||
}
|
||
if (e.target.scrollLeft !== this.lastScrollLeft) {
|
||
var position = '';
|
||
if (e.target === this.bodyTable && headTable) {
|
||
headTable.scrollLeft = e.target.scrollLeft;
|
||
} else if (e.target === headTable && this.bodyTable) {
|
||
this.bodyTable.scrollLeft = e.target.scrollLeft;
|
||
}
|
||
if (e.target.scrollLeft === 0) {
|
||
position = 'left';
|
||
} else if (e.target.scrollLeft + 1 >= e.target.querySelector('table').getBoundingClientRect().width - e.target.getBoundingClientRect().width) {
|
||
position = 'right';
|
||
} else if (this.state.scrollPosition !== 'middle') {
|
||
position = 'middle';
|
||
}
|
||
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 && e.target !== headTable) {
|
||
if (fixedColumnsBodyLeft && e.target !== fixedColumnsBodyLeft) {
|
||
fixedColumnsBodyLeft.scrollTop = e.target.scrollTop;
|
||
}
|
||
if (fixedColumnsBodyRight && e.target !== fixedColumnsBodyRight) {
|
||
fixedColumnsBodyRight.scrollTop = e.target.scrollTop;
|
||
}
|
||
if (this.bodyTable && e.target !== this.bodyTable) {
|
||
this.bodyTable.scrollTop = e.target.scrollTop;
|
||
}
|
||
if (this.hoverDom) {
|
||
this.hoverDom.style.display = 'none';
|
||
}
|
||
this.lastScrollTop = e.target.scrollTop;
|
||
if (handleScrollY) {
|
||
(0, _utils.debounce)(handleScrollY(this.lastScrollTop, this.treeType, onBodyScroll), 300);
|
||
} else {
|
||
//滚动回调
|
||
onBodyScroll(this.lastScrollTop);
|
||
}
|
||
}
|
||
|
||
// Remember last scrollLeft for scroll direction detecting.
|
||
this.lastScrollLeft = e.target.scrollLeft;
|
||
};
|
||
|
||
Table.prototype.handleRowHover = function handleRowHover(isHover, key, event, currentIndex, propsRecord) {
|
||
//增加新的API，设置是否同步Hover状态，提高性能，避免无关的渲染
|
||
var _props11 = this.props,
|
||
syncHover = _props11.syncHover,
|
||
onRowHover = _props11.onRowHover,
|
||
data = _props11.data,
|
||
lazyLoad = _props11.lazyLoad;
|
||
//fix:树形表，onRowHover返回参数异常
|
||
|
||
var isTreeType = this.isTreeType;
|
||
|
||
var record = isTreeType ? propsRecord : lazyLoad ? data.find(function (item) {
|
||
return item.key === key;
|
||
}) : data[currentIndex];
|
||
// 固定列、或者含有hoverdom时情况下同步hover状态
|
||
if (this.columnManager.isAnyColumnsFixed() && syncHover) {
|
||
this.hoverKey = key;
|
||
this.store.setState({
|
||
currentHoverKey: isHover ? key : null
|
||
});
|
||
}
|
||
if (this.hoverDom) {
|
||
if (isHover) {
|
||
this.currentHoverKey = key;
|
||
var td = (0, _utils.closest)(event.target, 'td');
|
||
if (td) {
|
||
var scrollTop = this.lastScrollTop ? this.lastScrollTop : 0;
|
||
var top = td.offsetTop - scrollTop;
|
||
if (this.headTable) {
|
||
top = top + this.headTable.clientHeight;
|
||
}
|
||
this.hoverDom.style.top = top + 'px';
|
||
this.hoverDom.style.height = td.offsetHeight + 'px';
|
||
this.hoverDom.style.lineHeight = td.offsetHeight + 'px';
|
||
this.hoverDom.style.display = 'block';
|
||
}
|
||
this.setState({
|
||
currentHoverIndex: currentIndex,
|
||
currentHoverRecord: record
|
||
});
|
||
}
|
||
}
|
||
onRowHover && onRowHover(currentIndex, record);
|
||
};
|
||
|
||
Table.prototype.render = function render() {
|
||
var _this7 = this;
|
||
|
||
var _state3 = this.state,
|
||
currentHoverRecord = _state3.currentHoverRecord,
|
||
currentHoverIndex = _state3.currentHoverIndex;
|
||
|
||
var props = this.props;
|
||
var clsPrefix = props.clsPrefix;
|
||
var hasFixedLeft = this.columnManager.isAnyColumnsLeftFixed();
|
||
var className = props.clsPrefix;
|
||
if (props.className) {
|
||
className += ' ' + props.className;
|
||
}
|
||
if (props.useFixedHeader || props.scroll && props.scroll.y) {
|
||
className += ' ' + clsPrefix + '-fixed-header';
|
||
}
|
||
if (!props.showHeader) {
|
||
className += ' ' + clsPrefix + '-hide-header';
|
||
}
|
||
if (props.bordered) {
|
||
className += ' ' + clsPrefix + '-bordered';
|
||
}
|
||
if (props.onCopy) {
|
||
className += ' copy';
|
||
}
|
||
className += ' ' + clsPrefix + '-scroll-position-' + this.state.scrollPosition;
|
||
//如果传入height说明是固定高度
|
||
//内容过多折行显示时，height 属性会失效，为了避免产生错行
|
||
if (props.bodyDisplayInRow && props.height) {
|
||
className += ' fixed-height';
|
||
}
|
||
if (props.bodyDisplayInRow) {
|
||
className += ' body-dispaly-in-row';
|
||
}
|
||
if (props.headerDisplayInRow) {
|
||
className += ' header-dispaly-in-row';
|
||
}
|
||
var isTableScroll = this.columnManager.isAnyColumnsFixed() || props.scroll.x || props.scroll.y;
|
||
var loading = props.loading;
|
||
if (typeof loading === 'boolean') {
|
||
loading = {
|
||
show: loading
|
||
};
|
||
}
|
||
if (props.size) {
|
||
className += ' ' + clsPrefix + '-' + props.size;
|
||
}
|
||
if (hasFixedLeft) {
|
||
className += ' has-fixed-left';
|
||
}
|
||
return _react2["default"].createElement(
|
||
'div',
|
||
{ className: className, style: props.style, ref: function ref(el) {
|
||
return _this7.contentTable = el;
|
||
},
|
||
tabIndex: props.focusable && (props.tabIndex ? props.tabIndex : '0') },
|
||
this.getTitle(),
|
||
_react2["default"].createElement(
|
||
'div',
|
||
{ className: clsPrefix + '-content' },
|
||
_react2["default"].createElement(
|
||
'div',
|
||
{ className: isTableScroll ? clsPrefix + '-scroll' : '' },
|
||
this.getTable({ columns: this.columnManager.groupedColumns() }),
|
||
this.getEmptyText(),
|
||
this.getFooter()
|
||
),
|
||
hasFixedLeft && _react2["default"].createElement(
|
||
'div',
|
||
{ className: clsPrefix + '-fixed-left' },
|
||
this.getLeftFixedTable()
|
||
),
|
||
this.columnManager.isAnyColumnsRightFixed() && _react2["default"].createElement(
|
||
'div',
|
||
{ className: clsPrefix + '-fixed-right' },
|
||
this.getRightFixedTable()
|
||
)
|
||
),
|
||
_react2["default"].createElement(_beeLoading2["default"], _extends({
|
||
container: this
|
||
}, loading)),
|
||
props.hoverContent && _react2["default"].createElement(
|
||
'div',
|
||
{ className: 'u-row-hover',
|
||
onMouseEnter: this.onRowHoverMouseEnter, onMouseLeave: this.onRowHoverMouseLeave, ref: function ref(el) {
|
||
return _this7.hoverDom = el;
|
||
} },
|
||
currentHoverRecord ? props.hoverContent(currentHoverRecord, currentHoverIndex) : null
|
||
)
|
||
);
|
||
};
|
||
|
||
return Table;
|
||
}(_react.Component);
|
||
|
||
;
|
||
|
||
Table.propTypes = propTypes;
|
||
Table.defaultProps = defaultProps;
|
||
Table.contextTypes = {
|
||
beeLocale: _propTypes2["default"].object
|
||
};
|
||
|
||
exports["default"] = Table;
|
||
module.exports = exports['default']; |