Compare commits
18 Commits
master
...
ncc_2.2.30
Author | SHA1 | Date |
---|---|---|
izbz wh | 2fd0aec4db | |
izbz wh | 9d17709e30 | |
izbz wh | 7fdce5f76d | |
yangchch6 | ae2227a454 | |
liushaozhen | 57ab4c3ced | |
liushaozhen | 827e4dd262 | |
liushaozhen | 01c2456341 | |
liushaozhen | 5466fd82c3 | |
liushaozhen | 6c16ddc8b6 | |
liushaozhen | c4178de729 | |
liushaozhen | 6507b08ce6 | |
liushaozhen | 18a268f4b8 | |
liushaozhen | 4a84af3f9b | |
liushaozhen | f2d2011db3 | |
liushaozhen | f54853829a | |
liushaozhen | ae9ad7fe86 | |
yangchch6 | 392108b0b4 | |
yangchch6 | 1b49ce5d4d |
|
@ -40,4 +40,5 @@ coverage
|
|||
.*.swp
|
||||
package-lock.json
|
||||
demo/.DS_Store
|
||||
demo/demolist/.DS_Store
|
||||
demo/demolist/.DS_Store
|
||||
.history/
|
|
@ -26,3 +26,8 @@ sea-modules
|
|||
spm_modules
|
||||
.cache
|
||||
coverage
|
||||
demo
|
||||
docs
|
||||
test
|
||||
dist
|
||||
.npmignore
|
|
@ -84,6 +84,8 @@ var propTypes = {
|
|||
//特殊的渲染规则的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,
|
||||
|
@ -127,6 +129,7 @@ var defaultProps = {
|
|||
expandIconAsCell: false,
|
||||
defaultExpandAllRows: false,
|
||||
defaultExpandedRowKeys: [],
|
||||
columnKey: 'key',
|
||||
rowKey: 'key',
|
||||
rowClassName: function rowClassName() {
|
||||
return '';
|
||||
|
@ -158,7 +161,7 @@ var defaultProps = {
|
|||
minColumnWidth: 80,
|
||||
locale: {},
|
||||
syncHover: true,
|
||||
setRowHeight: function setRowHeight() {},
|
||||
// setRowHeight:()=>{},
|
||||
setRowParentIndex: function setRowParentIndex() {},
|
||||
tabIndex: '0',
|
||||
heightConsistent: false,
|
||||
|
@ -384,6 +387,8 @@ var Table = function (_Component) {
|
|||
|
||||
Table.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
if ('data' in nextProps) {
|
||||
console.log("————————————————————data");
|
||||
console.log(nextProps.data);
|
||||
this.setState({
|
||||
data: nextProps.data
|
||||
});
|
||||
|
@ -668,6 +673,7 @@ var Table = function (_Component) {
|
|||
|
||||
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,
|
||||
|
@ -679,6 +685,9 @@ var Table = function (_Component) {
|
|||
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([]);
|
||||
|
@ -754,7 +763,8 @@ var Table = function (_Component) {
|
|||
Table.prototype.getExpandedRow = function getExpandedRow(key, content, visible, className, fixed) {
|
||||
var _props2 = this.props,
|
||||
clsPrefix = _props2.clsPrefix,
|
||||
expandIconAsCell = _props2.expandIconAsCell;
|
||||
expandIconAsCell = _props2.expandIconAsCell,
|
||||
syncRowHeight = _props2.syncRowHeight;
|
||||
|
||||
var colCount = void 0;
|
||||
if (fixed === 'left') {
|
||||
|
@ -806,7 +816,8 @@ var Table = function (_Component) {
|
|||
rowDraggAble: this.props.rowDraggAble,
|
||||
onDragRow: this.onDragRow,
|
||||
onDragRowStart: this.onDragRowStart,
|
||||
height: expandedRowHeight
|
||||
height: expandedRowHeight,
|
||||
syncRowHeight: syncRowHeight
|
||||
});
|
||||
};
|
||||
|
||||
|
@ -849,6 +860,7 @@ var Table = function (_Component) {
|
|||
var childrenColumnName = props.childrenColumnName;
|
||||
var expandedRowRender = props.expandedRowRender;
|
||||
var expandRowByClick = props.expandRowByClick;
|
||||
var syncRowHeight = props.syncRowHeight;
|
||||
var fixedColumnsBodyRowsHeight = this.state.fixedColumnsBodyRowsHeight;
|
||||
|
||||
var rst = [];
|
||||
|
@ -865,7 +877,7 @@ var Table = function (_Component) {
|
|||
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"], { height: props.lazyLoad.preHeight, columns: [], className: '', key: 'table_row_first', store: this.store, visible: true }));
|
||||
rst.push(_react2["default"].createElement(_TableRow2["default"], { syncRowHeight: syncRowHeight, 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;
|
||||
|
@ -979,7 +991,8 @@ var Table = function (_Component) {
|
|||
lazyEndIndex: lazyEndIndex,
|
||||
centerColumnsLength: this.centerColumnsLength,
|
||||
leftColumnsLength: this.leftColumnsLength,
|
||||
expandIconCellWidth: expandIconCellWidth
|
||||
expandIconCellWidth: expandIconCellWidth,
|
||||
syncRowHeight: syncRowHeight
|
||||
})));
|
||||
this.treeRowIndex++;
|
||||
var subVisible = visible && isRowExpanded;
|
||||
|
@ -995,7 +1008,7 @@ var Table = function (_Component) {
|
|||
}
|
||||
|
||||
if (props.lazyLoad && props.lazyLoad.sufHeight && indent == 0) {
|
||||
rst.push(_react2["default"].createElement(_TableRow2["default"], { height: props.lazyLoad.sufHeight, key: 'table_row_end', columns: [], className: '', store: this.store, visible: true }));
|
||||
rst.push(_react2["default"].createElement(_TableRow2["default"], { syncRowHeight: syncRowHeight, height: props.lazyLoad.sufHeight, key: 'table_row_end', columns: [], className: '', store: this.store, visible: true }));
|
||||
}
|
||||
if (!this.isTreeType) {
|
||||
this.treeType = false;
|
||||
|
@ -1398,7 +1411,8 @@ var Table = function (_Component) {
|
|||
}
|
||||
});
|
||||
var fixedColumnsExpandedRowsHeight = {};
|
||||
expandedRows.length > 0 && expandedRows.forEach(function (row) {
|
||||
//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"),
|
||||
height = row && row.getBoundingClientRect().height || 'auto';
|
||||
fixedColumnsExpandedRowsHeight[parentRowKey] = height;
|
||||
|
|
|
@ -550,7 +550,7 @@ var _initialiseProps = function _initialiseProps() {
|
|||
var type = currentElement.getAttribute('data-type');
|
||||
if (!_this7.props.dragborder && !_this7.props.draggable) return;
|
||||
if (type == 'online' && _this7.props.dragborder) {
|
||||
if (!_this7.props.dragborder) return;
|
||||
// if(!this.props.dragborder)return;
|
||||
targetEvent.setAttribute('draggable', false); //添加交换列效果
|
||||
var currentIndex = -1;
|
||||
var defaultWidth = currentElement.getAttribute("data-th-width");
|
||||
|
@ -573,9 +573,9 @@ var _initialiseProps = function _initialiseProps() {
|
|||
if (!_this7.tableOldWidth) {
|
||||
_this7.tableOldWidth = _this7.drag.tableWidth; //this.getTableWidth();
|
||||
}
|
||||
if (!_this7.lastColumWidth) {
|
||||
_this7.lastColumWidth = parseInt(_this7.table.cols[lastShowIndex].style.width);
|
||||
}
|
||||
// if(!this.lastColumWidth){
|
||||
_this7.lastColumWidth = parseInt(_this7.table.cols[lastShowIndex].style.width);
|
||||
// }
|
||||
} else if (type != 'online' && _this7.props.draggable) {
|
||||
// if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
|
||||
if (!_this7.props.draggable) return;
|
||||
|
@ -670,6 +670,7 @@ var _initialiseProps = function _initialiseProps() {
|
|||
_this7.optTableMargin(_this7.table.fixedRighHeadertTable, 0);
|
||||
}
|
||||
} else {
|
||||
l;
|
||||
if (showScroll < 0) {
|
||||
_this7.table.tableBody.style.overflowX = 'auto';
|
||||
_this7.optTableMargin(_this7.table.fixedLeftBodyTable, '-' + scrollbarWidth);
|
||||
|
|
|
@ -74,7 +74,8 @@ var defaultProps = {
|
|||
|
||||
className: '',
|
||||
setRowParentIndex: function setRowParentIndex() {},
|
||||
rowDraggAble: false
|
||||
rowDraggAble: false,
|
||||
syncRowHeight: true
|
||||
// onDragRow:()=>{}
|
||||
};
|
||||
|
||||
|
@ -432,7 +433,9 @@ var TableRow = function (_Component) {
|
|||
|
||||
|
||||
TableRow.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
|
||||
var rowDraggAble = this.props.rowDraggAble;
|
||||
var _props2 = this.props,
|
||||
rowDraggAble = _props2.rowDraggAble,
|
||||
syncRowHeight = _props2.syncRowHeight;
|
||||
|
||||
if (!this.event) {
|
||||
this.event = true;
|
||||
|
@ -444,15 +447,17 @@ var TableRow = function (_Component) {
|
|||
if (this.props.treeType) {
|
||||
this.setRowParentIndex();
|
||||
}
|
||||
this.setRowHeight();
|
||||
if (syncRowHeight) {
|
||||
this.setRowHeight();
|
||||
}
|
||||
};
|
||||
|
||||
TableRow.prototype.componentWillUnmount = function componentWillUnmount() {
|
||||
var _props2 = this.props,
|
||||
record = _props2.record,
|
||||
onDestroy = _props2.onDestroy,
|
||||
index = _props2.index,
|
||||
rowDraggAble = _props2.rowDraggAble;
|
||||
var _props3 = this.props,
|
||||
record = _props3.record,
|
||||
onDestroy = _props3.onDestroy,
|
||||
index = _props3.index,
|
||||
rowDraggAble = _props3.rowDraggAble;
|
||||
|
||||
onDestroy(record, index);
|
||||
if (this.unsubscribe) {
|
||||
|
@ -464,23 +469,23 @@ var TableRow = function (_Component) {
|
|||
};
|
||||
|
||||
TableRow.prototype.setRowHeight = function setRowHeight() {
|
||||
var _props3 = this.props,
|
||||
setRowHeight = _props3.setRowHeight,
|
||||
_props3$expandedConte = _props3.expandedContentHeight,
|
||||
expandedContentHeight = _props3$expandedConte === undefined ? 0 : _props3$expandedConte,
|
||||
fixed = _props3.fixed,
|
||||
fixedIndex = _props3.fixedIndex;
|
||||
var _props4 = this.props,
|
||||
setRowHeight = _props4.setRowHeight,
|
||||
_props4$expandedConte = _props4.expandedContentHeight,
|
||||
expandedContentHeight = _props4$expandedConte === undefined ? 0 : _props4$expandedConte,
|
||||
fixed = _props4.fixed,
|
||||
fixedIndex = _props4.fixedIndex;
|
||||
|
||||
if (!setRowHeight || !this.element || fixed) return;
|
||||
setRowHeight(this.element.clientHeight + expandedContentHeight, fixedIndex);
|
||||
};
|
||||
|
||||
TableRow.prototype.setRowParentIndex = function setRowParentIndex() {
|
||||
var _props4 = this.props,
|
||||
index = _props4.index,
|
||||
setRowParentIndex = _props4.setRowParentIndex,
|
||||
fixedIndex = _props4.fixedIndex,
|
||||
rootIndex = _props4.rootIndex;
|
||||
var _props5 = this.props,
|
||||
index = _props5.index,
|
||||
setRowParentIndex = _props5.setRowParentIndex,
|
||||
fixedIndex = _props5.fixedIndex,
|
||||
rootIndex = _props5.rootIndex;
|
||||
|
||||
setRowParentIndex(rootIndex < 0 ? index : rootIndex, fixedIndex);
|
||||
};
|
||||
|
@ -490,16 +495,16 @@ var TableRow = function (_Component) {
|
|||
// 异步访问事件属性
|
||||
// 调用 event.persist() 会从事件池中移除该合成函数并允许对该合成事件的引用被保留下来。
|
||||
event.persist();
|
||||
var _props5 = this.props,
|
||||
record = _props5.record,
|
||||
index = _props5.index,
|
||||
onRowClick = _props5.onRowClick,
|
||||
expandable = _props5.expandable,
|
||||
expandRowByClick = _props5.expandRowByClick,
|
||||
expanded = _props5.expanded,
|
||||
onExpand = _props5.onExpand,
|
||||
fixedIndex = _props5.fixedIndex,
|
||||
onRowDoubleClick = _props5.onRowDoubleClick;
|
||||
var _props6 = this.props,
|
||||
record = _props6.record,
|
||||
index = _props6.index,
|
||||
onRowClick = _props6.onRowClick,
|
||||
expandable = _props6.expandable,
|
||||
expandRowByClick = _props6.expandRowByClick,
|
||||
expanded = _props6.expanded,
|
||||
onExpand = _props6.onExpand,
|
||||
fixedIndex = _props6.fixedIndex,
|
||||
onRowDoubleClick = _props6.onRowDoubleClick;
|
||||
|
||||
if (expandable && expandRowByClick) {
|
||||
onExpand(!expanded, record, fixedIndex, event);
|
||||
|
@ -514,31 +519,17 @@ var TableRow = function (_Component) {
|
|||
};
|
||||
|
||||
TableRow.prototype.onRowDoubleClick = function onRowDoubleClick(event) {
|
||||
var _props6 = this.props,
|
||||
record = _props6.record,
|
||||
index = _props6.index,
|
||||
onRowDoubleClick = _props6.onRowDoubleClick,
|
||||
fixedIndex = _props6.fixedIndex;
|
||||
var _props7 = this.props,
|
||||
record = _props7.record,
|
||||
index = _props7.index,
|
||||
onRowDoubleClick = _props7.onRowDoubleClick,
|
||||
fixedIndex = _props7.fixedIndex;
|
||||
|
||||
this.clear();
|
||||
onRowDoubleClick && onRowDoubleClick(record, fixedIndex, event);
|
||||
};
|
||||
|
||||
TableRow.prototype.onMouseEnter = function onMouseEnter(e) {
|
||||
var _props7 = this.props,
|
||||
onHover = _props7.onHover,
|
||||
hoverKey = _props7.hoverKey,
|
||||
fixedIndex = _props7.fixedIndex,
|
||||
syncHover = _props7.syncHover,
|
||||
record = _props7.record;
|
||||
|
||||
if (syncHover) {
|
||||
this.setState({ hovered: true });
|
||||
}
|
||||
onHover(true, hoverKey, e, fixedIndex, record);
|
||||
};
|
||||
|
||||
TableRow.prototype.onMouseLeave = function onMouseLeave(e) {
|
||||
var _props8 = this.props,
|
||||
onHover = _props8.onHover,
|
||||
hoverKey = _props8.hoverKey,
|
||||
|
@ -546,6 +537,20 @@ var TableRow = function (_Component) {
|
|||
syncHover = _props8.syncHover,
|
||||
record = _props8.record;
|
||||
|
||||
if (syncHover) {
|
||||
this.setState({ hovered: true });
|
||||
}
|
||||
onHover(true, hoverKey, e, fixedIndex, record);
|
||||
};
|
||||
|
||||
TableRow.prototype.onMouseLeave = function onMouseLeave(e) {
|
||||
var _props9 = this.props,
|
||||
onHover = _props9.onHover,
|
||||
hoverKey = _props9.hoverKey,
|
||||
fixedIndex = _props9.fixedIndex,
|
||||
syncHover = _props9.syncHover,
|
||||
record = _props9.record;
|
||||
|
||||
if (syncHover) {
|
||||
this.setState({ hovered: false });
|
||||
}
|
||||
|
@ -553,32 +558,32 @@ var TableRow = function (_Component) {
|
|||
};
|
||||
|
||||
TableRow.prototype.render = function render() {
|
||||
var _props9 = this.props,
|
||||
clsPrefix = _props9.clsPrefix,
|
||||
columns = _props9.columns,
|
||||
record = _props9.record,
|
||||
height = _props9.height,
|
||||
visible = _props9.visible,
|
||||
index = _props9.index,
|
||||
expandIconColumnIndex = _props9.expandIconColumnIndex,
|
||||
expandIconAsCell = _props9.expandIconAsCell,
|
||||
expanded = _props9.expanded,
|
||||
expandRowByClick = _props9.expandRowByClick,
|
||||
rowDraggAble = _props9.rowDraggAble,
|
||||
expandable = _props9.expandable,
|
||||
onExpand = _props9.onExpand,
|
||||
needIndentSpaced = _props9.needIndentSpaced,
|
||||
indent = _props9.indent,
|
||||
indentSize = _props9.indentSize,
|
||||
isHiddenExpandIcon = _props9.isHiddenExpandIcon,
|
||||
fixed = _props9.fixed,
|
||||
bodyDisplayInRow = _props9.bodyDisplayInRow,
|
||||
expandedIcon = _props9.expandedIcon,
|
||||
collapsedIcon = _props9.collapsedIcon,
|
||||
hoverKey = _props9.hoverKey,
|
||||
lazyStartIndex = _props9.lazyStartIndex,
|
||||
lazyEndIndex = _props9.lazyEndIndex,
|
||||
expandIconCellWidth = _props9.expandIconCellWidth;
|
||||
var _props10 = this.props,
|
||||
clsPrefix = _props10.clsPrefix,
|
||||
columns = _props10.columns,
|
||||
record = _props10.record,
|
||||
height = _props10.height,
|
||||
visible = _props10.visible,
|
||||
index = _props10.index,
|
||||
expandIconColumnIndex = _props10.expandIconColumnIndex,
|
||||
expandIconAsCell = _props10.expandIconAsCell,
|
||||
expanded = _props10.expanded,
|
||||
expandRowByClick = _props10.expandRowByClick,
|
||||
rowDraggAble = _props10.rowDraggAble,
|
||||
expandable = _props10.expandable,
|
||||
onExpand = _props10.onExpand,
|
||||
needIndentSpaced = _props10.needIndentSpaced,
|
||||
indent = _props10.indent,
|
||||
indentSize = _props10.indentSize,
|
||||
isHiddenExpandIcon = _props10.isHiddenExpandIcon,
|
||||
fixed = _props10.fixed,
|
||||
bodyDisplayInRow = _props10.bodyDisplayInRow,
|
||||
expandedIcon = _props10.expandedIcon,
|
||||
collapsedIcon = _props10.collapsedIcon,
|
||||
hoverKey = _props10.hoverKey,
|
||||
lazyStartIndex = _props10.lazyStartIndex,
|
||||
lazyEndIndex = _props10.lazyEndIndex,
|
||||
expandIconCellWidth = _props10.expandIconCellWidth;
|
||||
|
||||
var showSum = false;
|
||||
var className = this.props.className;
|
||||
|
|
|
@ -99,6 +99,15 @@ function bigData(Table) {
|
|||
_this.cachedRowHeight = []; //缓存每行的高度
|
||||
_this.cachedRowParentIndex = [];
|
||||
_this.computeCachedRowParentIndex(newData);
|
||||
// fix:切换数据源,startIndex、endIndex错误
|
||||
_this.currentIndex = 0;
|
||||
_this.startIndex = _this.currentIndex; //数据开始位置
|
||||
_this.endIndex = _this.currentIndex + _this.loadCount;
|
||||
}
|
||||
if (newData.length && newData[0].key == undefined) {
|
||||
//数据没有key时设置key
|
||||
_this.cachedRowParentIndex = [];
|
||||
_this.computeCachedRowParentIndex(newData);
|
||||
}
|
||||
_this.treeData = [];
|
||||
_this.flatTreeData = [];
|
||||
|
@ -344,8 +353,9 @@ function bigData(Table) {
|
|||
lazyLoad.preHeight = this.getSumHeight(0, startIndex);
|
||||
lazyLoad.sufHeight = this.getSumHeight(endIndex, data.length);
|
||||
}
|
||||
// console.log('*******expandedRowKeys*****'+expandedRowKeys);
|
||||
// console.log('*******data*****',data);
|
||||
var dataSource = treeType && Array.isArray(treeData) && treeData.length > 0 ? treeData : data.slice(startIndex, endIndex);
|
||||
// console.log('*******dataSource*****',dataSource);
|
||||
return _react2["default"].createElement(Table, _extends({}, this.props, {
|
||||
data: dataSource,
|
||||
lazyLoad: lazyLoad,
|
||||
|
@ -406,19 +416,22 @@ function bigData(Table) {
|
|||
if (Array.isArray(dataCopy)) {
|
||||
for (var i = 0, l = dataCopy.length; i < l; i++) {
|
||||
var _dataCopy$i = dataCopy[i],
|
||||
key = _dataCopy$i.key,
|
||||
children = _dataCopy$i.children,
|
||||
props = _objectWithoutProperties(_dataCopy$i, ["key", "children"]),
|
||||
props = _objectWithoutProperties(_dataCopy$i, ["children"]),
|
||||
key = _this4.getRowKey(dataCopy[i], i),
|
||||
dataCopyI = new Object(),
|
||||
isLeaf = children && children.length > 0 ? false : true,
|
||||
isExpanded = parentKey === null || expandedKeysSet.has(parentKey) ? expandedKeysSet.has(key) : false;
|
||||
// console.log("getRowKey:: "+this.getRowKey(dataCopy[i],i))
|
||||
|
||||
|
||||
dataCopyI = _extends(dataCopyI, {
|
||||
key: key,
|
||||
isExpanded: isExpanded,
|
||||
parentKey: parentKey,
|
||||
isLeaf: isLeaf,
|
||||
index: flatTreeData.length
|
||||
index: flatTreeData.length,
|
||||
children: children
|
||||
}, _extends({}, props));
|
||||
|
||||
flatTreeData.push(dataCopyI); // 取每项数据放入一个新数组
|
||||
|
|
|
@ -57,31 +57,34 @@ function sort(Table, Icon) {
|
|||
var flatColumns = [];
|
||||
_this2._toFlatColumn(props.columns, -1, flatColumns);
|
||||
_this2.state = { data: _this2.props.data, columns: props.columns, flatColumns: flatColumns };
|
||||
|
||||
_this2._initSort();
|
||||
return _this2;
|
||||
}
|
||||
|
||||
//默认是前端排序,值为true为后端排序
|
||||
|
||||
SortTable.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
|
||||
if (nextProps.data !== this.props.data) {
|
||||
this.setState({
|
||||
data: nextProps.data,
|
||||
oldData: nextProps.data.concat()
|
||||
});
|
||||
}
|
||||
if (nextProps.columns !== this.props.columns) {
|
||||
var flatColumns = [];
|
||||
this._toFlatColumn(nextProps.columns, -1, flatColumns);
|
||||
this.setState({ columns: nextProps.columns, flatColumns: flatColumns });
|
||||
}
|
||||
|
||||
if (nextProps.data !== this.props.data) {
|
||||
this.setState({
|
||||
data: nextProps.data,
|
||||
oldData: nextProps.data.concat()
|
||||
}, function () {
|
||||
this._initSort(); // 数据更新后需要重新排序
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
*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] : [];
|
||||
|
@ -164,6 +167,24 @@ function sort(Table, Icon) {
|
|||
}(_react.Component), _class.defaultProps = { sort: { mode: "single", backSource: false } }, _initialiseProps = function _initialiseProps() {
|
||||
var _this3 = this;
|
||||
|
||||
this._initSort = function () {
|
||||
var flatColumns = _this3.state.flatColumns;
|
||||
|
||||
var needSort = false;
|
||||
flatColumns.forEach(function (item) {
|
||||
if (item.order == 'descend' || item.order == 'ascend') {
|
||||
needSort = true;
|
||||
return;
|
||||
}
|
||||
});
|
||||
if (needSort) {
|
||||
var data = _this3.multiSort(flatColumns);
|
||||
_this3.setState({
|
||||
data: data
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
this.getOrderNum = function () {
|
||||
var orderNum = 0;
|
||||
//todo 1
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -83,6 +83,7 @@ import 'bee-table/build/Table.css';
|
|||
| [v2.2.2新增]showRowNum | 展示序号功能,false时不展示,true时展示默认情况,可传入自定义配置信息 | bool / obj:{name: '序号', key: '_index', // 在数据中存储的key值width: 50,base: 0,// 排序的基准值,为数字或者字母type:'number', // 排序类型,默认为number类型,支持单字母排序(type='ascii')} | false |
|
||||
| autoCheckedByClickRows | 设置为 false 时,表格行点击事件,不会自动勾选复选框 | bool | true |
|
||||
| autoSelect | 树型表格勾选时,是否开启子节点的联动 | bool | false |
|
||||
| syncRowHeight | 滚动是否同步高度,关闭此功能有利于提高性能,注:树表和主子表不允许关闭 | true | - |
|
||||
|
||||
> 快捷键部分参考示例 (快捷键在table中的简单使用应用)
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "2.2.30",
|
||||
"version": "2.2.30-nc.13",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
@ -92,4 +92,4 @@
|
|||
"reqwest": "^2.0.5",
|
||||
"tinper-bee": "latest"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
23
src/Table.js
23
src/Table.js
|
@ -28,6 +28,8 @@ const propTypes = {
|
|||
//特殊的渲染规则的key值
|
||||
rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
|
||||
rowClassName: PropTypes.func,
|
||||
//column的主键,和 column.key 作用相同
|
||||
columnKey: PropTypes.string,
|
||||
expandedRowClassName: PropTypes.func,
|
||||
childrenColumnName: PropTypes.string,
|
||||
onExpand: PropTypes.func,
|
||||
|
@ -71,6 +73,7 @@ const defaultProps = {
|
|||
expandIconAsCell: false,
|
||||
defaultExpandAllRows: false,
|
||||
defaultExpandedRowKeys: [],
|
||||
columnKey: 'key',
|
||||
rowKey: 'key',
|
||||
rowClassName: () => '',
|
||||
expandedRowClassName: () => '',
|
||||
|
@ -93,7 +96,7 @@ const defaultProps = {
|
|||
minColumnWidth: 80,
|
||||
locale:{},
|
||||
syncHover: true,
|
||||
setRowHeight:()=>{},
|
||||
// setRowHeight:()=>{},
|
||||
setRowParentIndex:()=>{},
|
||||
tabIndex:'0',
|
||||
heightConsistent:false,
|
||||
|
@ -199,6 +202,8 @@ class Table extends Component {
|
|||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if ('data' in nextProps) {
|
||||
console.log("————————————————————data")
|
||||
console.log(nextProps.data)
|
||||
this.setState({
|
||||
data: nextProps.data,
|
||||
});
|
||||
|
@ -482,12 +487,16 @@ class Table extends Component {
|
|||
}
|
||||
|
||||
getHeaderRows(columns, currentRow = 0, rows) {
|
||||
const { columnKey } = this.props;
|
||||
let { contentWidthDiff = 0, lastShowIndex = -1 } = this.state;
|
||||
let filterCol = [];
|
||||
rows = rows || [];
|
||||
rows[currentRow] = rows[currentRow] || [];
|
||||
|
||||
columns.forEach((column,i) => {
|
||||
if (!column.key) {
|
||||
column.key = column[columnKey];
|
||||
}
|
||||
if (column.rowSpan && rows.length < column.rowSpan) {
|
||||
while (rows.length < column.rowSpan) {
|
||||
rows.push([]);
|
||||
|
@ -559,7 +568,7 @@ class Table extends Component {
|
|||
}
|
||||
|
||||
getExpandedRow(key, content, visible, className, fixed) {
|
||||
const { clsPrefix, expandIconAsCell } = this.props;
|
||||
const { clsPrefix, expandIconAsCell,syncRowHeight } = this.props;
|
||||
let colCount;
|
||||
if (fixed === 'left') {
|
||||
colCount = this.columnManager.leftLeafColumns().length;
|
||||
|
@ -610,6 +619,7 @@ class Table extends Component {
|
|||
onDragRow={this.onDragRow}
|
||||
onDragRowStart={this.onDragRowStart}
|
||||
height={expandedRowHeight}
|
||||
syncRowHeight={syncRowHeight}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
@ -691,6 +701,7 @@ class Table extends Component {
|
|||
const childrenColumnName = props.childrenColumnName;
|
||||
const expandedRowRender = props.expandedRowRender;
|
||||
const expandRowByClick = props.expandRowByClick;
|
||||
const syncRowHeight = props.syncRowHeight;
|
||||
const { fixedColumnsBodyRowsHeight } = this.state;
|
||||
let rst = [];
|
||||
let height;
|
||||
|
@ -705,7 +716,7 @@ class Table extends Component {
|
|||
const expandIconColumnIndex = props.expandIconColumnIndex
|
||||
if(props.lazyLoad && props.lazyLoad.preHeight && indent == 0){
|
||||
rst.push(
|
||||
<TableRow height={props.lazyLoad.preHeight} columns={[]} className='' key={'table_row_first'} store={this.store} visible = {true}/>
|
||||
<TableRow syncRowHeight={syncRowHeight} height={props.lazyLoad.preHeight} columns={[]} className='' key={'table_row_first'} store={this.store} visible = {true}/>
|
||||
)
|
||||
}
|
||||
const lazyCurrentIndex = props.lazyLoad && props.lazyLoad.startIndex ?props.lazyLoad.startIndex :0;
|
||||
|
@ -824,6 +835,7 @@ class Table extends Component {
|
|||
centerColumnsLength={this.centerColumnsLength}
|
||||
leftColumnsLength={this.leftColumnsLength}
|
||||
expandIconCellWidth={expandIconCellWidth}
|
||||
syncRowHeight={syncRowHeight}
|
||||
/>
|
||||
);
|
||||
this.treeRowIndex++;
|
||||
|
@ -845,7 +857,7 @@ class Table extends Component {
|
|||
|
||||
if(props.lazyLoad && props.lazyLoad.sufHeight && indent == 0){
|
||||
rst.push(
|
||||
<TableRow height={props.lazyLoad.sufHeight} key={'table_row_end'} columns={[]} className='' store={this.store} visible = {true}/>
|
||||
<TableRow syncRowHeight={syncRowHeight} height={props.lazyLoad.sufHeight} key={'table_row_end'} columns={[]} className='' store={this.store} visible = {true}/>
|
||||
)
|
||||
}
|
||||
if (!this.isTreeType) {
|
||||
|
@ -1200,7 +1212,8 @@ class Table extends Component {
|
|||
}
|
||||
);
|
||||
const fixedColumnsExpandedRowsHeight = {};
|
||||
expandedRows.length > 0 && expandedRows.forEach(row => {
|
||||
//expandedRows为NodeList Array.prototype.forEach ie 下报错 对象不支持 “forEach” 方法
|
||||
expandedRows.length > 0 && Array.prototype.forEach.call(expandedRows,row => {
|
||||
let parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key"),
|
||||
height = row && row.getBoundingClientRect().height || 'auto';
|
||||
fixedColumnsExpandedRowsHeight[parentRowKey] = height;
|
||||
|
|
|
@ -223,7 +223,7 @@ class TableHeader extends Component {
|
|||
let type = currentElement.getAttribute('data-type');
|
||||
if(!this.props.dragborder && !this.props.draggable)return;
|
||||
if(type == 'online' && this.props.dragborder){
|
||||
if(!this.props.dragborder)return;
|
||||
// if(!this.props.dragborder)return;
|
||||
targetEvent.setAttribute('draggable',false);//添加交换列效果
|
||||
let currentIndex = -1;
|
||||
let defaultWidth = currentElement.getAttribute("data-th-width");
|
||||
|
@ -244,9 +244,9 @@ class TableHeader extends Component {
|
|||
if(!this.tableOldWidth){
|
||||
this.tableOldWidth = this.drag.tableWidth;//this.getTableWidth();
|
||||
}
|
||||
if(!this.lastColumWidth){
|
||||
// if(!this.lastColumWidth){
|
||||
this.lastColumWidth = parseInt(this.table.cols[lastShowIndex].style.width);
|
||||
}
|
||||
// }
|
||||
}else if(type != 'online' && this.props.draggable){
|
||||
// if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
|
||||
if (!this.props.draggable) return;
|
||||
|
@ -337,7 +337,7 @@ class TableHeader extends Component {
|
|||
this.optTableMargin( this.table.fixedLeftHeaderTable,0);
|
||||
this.optTableMargin( this.table.fixedRighHeadertTable,0);
|
||||
}
|
||||
}else{
|
||||
}else{l
|
||||
if(showScroll < 0){
|
||||
this.table.tableBody.style.overflowX = 'auto';
|
||||
this.optTableMargin( this.table.fixedLeftBodyTable,'-'+scrollbarWidth);
|
||||
|
|
|
@ -45,6 +45,7 @@ const defaultProps = {
|
|||
className:'',
|
||||
setRowParentIndex:()=>{},
|
||||
rowDraggAble:false,
|
||||
syncRowHeight:true,
|
||||
// onDragRow:()=>{}
|
||||
};
|
||||
|
||||
|
@ -346,7 +347,7 @@ class TableRow extends Component{
|
|||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const { rowDraggAble } = this.props;
|
||||
const { rowDraggAble,syncRowHeight } = this.props;
|
||||
if(!this.event){
|
||||
this.event = true;
|
||||
if(rowDraggAble){
|
||||
|
@ -357,7 +358,9 @@ class TableRow extends Component{
|
|||
if(this.props.treeType){
|
||||
this.setRowParentIndex();
|
||||
}
|
||||
this.setRowHeight()
|
||||
if(syncRowHeight){
|
||||
this.setRowHeight()
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
|
|
|
@ -72,6 +72,14 @@ export default function bigData(Table) {
|
|||
_this.cachedRowHeight = []; //缓存每行的高度
|
||||
_this.cachedRowParentIndex = [];
|
||||
_this.computeCachedRowParentIndex(newData);
|
||||
// fix:切换数据源,startIndex、endIndex错误
|
||||
_this.currentIndex = 0;
|
||||
_this.startIndex = _this.currentIndex; //数据开始位置
|
||||
_this.endIndex = _this.currentIndex + _this.loadCount;
|
||||
}
|
||||
if(newData.length&&(newData[0].key==undefined)){//数据没有key时设置key
|
||||
_this.cachedRowParentIndex = [];
|
||||
_this.computeCachedRowParentIndex(newData);
|
||||
}
|
||||
_this.treeData = [];
|
||||
_this.flatTreeData = [];
|
||||
|
@ -132,17 +140,20 @@ export default function bigData(Table) {
|
|||
dataCopy = treeData;
|
||||
if(Array.isArray(dataCopy)){
|
||||
for (let i=0, l=dataCopy.length; i<l; i++) {
|
||||
let { key, children, ...props } = dataCopy[i],
|
||||
let { children, ...props } = dataCopy[i],
|
||||
key = this.getRowKey(dataCopy[i],i),
|
||||
dataCopyI = new Object(),
|
||||
isLeaf = (children && children.length > 0) ? false : true,
|
||||
//如果父节点是收起状态,则子节点的展开状态无意义。(一级节点或根节点直接判断自身状态即可)
|
||||
isExpanded = (parentKey === null || expandedKeysSet.has(parentKey)) ? expandedKeysSet.has(key) : false;
|
||||
// console.log("getRowKey:: "+this.getRowKey(dataCopy[i],i))
|
||||
dataCopyI = Object.assign(dataCopyI,{
|
||||
key,
|
||||
isExpanded,
|
||||
parentKey : parentKey,
|
||||
isLeaf,
|
||||
index: flatTreeData.length
|
||||
index: flatTreeData.length,
|
||||
children
|
||||
},{...props});
|
||||
|
||||
flatTreeData.push(dataCopyI); // 取每项数据放入一个新数组
|
||||
|
@ -558,8 +569,9 @@ export default function bigData(Table) {
|
|||
lazyLoad.preHeight = this.getSumHeight(0, startIndex);
|
||||
lazyLoad.sufHeight = this.getSumHeight(endIndex, data.length);
|
||||
}
|
||||
// console.log('*******expandedRowKeys*****'+expandedRowKeys);
|
||||
// console.log('*******data*****',data);
|
||||
const dataSource = (treeType && Array.isArray(treeData) && treeData.length > 0) ? treeData : data.slice(startIndex, endIndex);
|
||||
// console.log('*******dataSource*****',dataSource);
|
||||
return (
|
||||
<Table
|
||||
{...this.props}
|
||||
|
|
|
@ -27,24 +27,46 @@ export default function sort(Table, Icon) {
|
|||
let flatColumns = [];
|
||||
this._toFlatColumn(props.columns,-1,flatColumns);
|
||||
this.state = { data: this.props.data, columns: props.columns,flatColumns:flatColumns };
|
||||
|
||||
this._initSort();
|
||||
}
|
||||
static defaultProps = { sort: { mode: "single", backSource: false } }; //默认是前端排序,值为true为后端排序
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
|
||||
if (nextProps.columns !== this.props.columns) {
|
||||
let flatColumns = [];
|
||||
this._toFlatColumn(nextProps.columns,-1,flatColumns);
|
||||
this.setState({ columns: nextProps.columns ,flatColumns});
|
||||
}
|
||||
|
||||
if (nextProps.data !== this.props.data) {
|
||||
this.setState({
|
||||
data: nextProps.data,
|
||||
oldData: nextProps.data.concat()
|
||||
}, function () {
|
||||
this._initSort(); // 数据更新后需要重新排序
|
||||
});
|
||||
}
|
||||
if (nextProps.columns !== this.props.columns) {
|
||||
let flatColumns = [];
|
||||
this._toFlatColumn(nextProps.columns,-1,flatColumns);
|
||||
this.setState({ columns: nextProps.columns ,flatColumns});
|
||||
|
||||
|
||||
}
|
||||
|
||||
_initSort = () => {
|
||||
const {flatColumns} = this.state;
|
||||
let needSort = false;
|
||||
flatColumns.forEach(item => {
|
||||
if(item.order == 'descend' || item.order == 'ascend') {
|
||||
needSort = true;
|
||||
return
|
||||
}
|
||||
})
|
||||
if(needSort) {
|
||||
const data = this.multiSort(flatColumns)
|
||||
this.setState({
|
||||
data
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*column扁平化处理,适应多表头避免递归操作
|
||||
*
|
||||
|
|
Loading…
Reference in New Issue