Compare commits

...

18 Commits

Author SHA1 Message Date
izbz wh 2fd0aec4db fix: 最后一列拖拽,宽度计算错误 2020-12-11 11:38:22 +08:00
izbz wh 9d17709e30 fix: rebuild 2020-11-02 19:01:19 +08:00
izbz wh 7fdce5f76d feat: 支持前端默认排序 2020-11-02 15:49:12 +08:00
yangchch6 ae2227a454 merge 2020-08-19 10:35:42 +08:00
liushaozhen 57ab4c3ced syncRowHeight 2020-07-23 13:45:01 +08:00
liushaozhen 827e4dd262 syncRowHeight 2020-07-23 13:44:38 +08:00
liushaozhen 01c2456341 syncRowHeight 2020-07-23 13:42:50 +08:00
liushaozhen 5466fd82c3 setRowHeight性能优化 2020-07-23 09:49:54 +08:00
liushaozhen 6c16ddc8b6 fixbug 2020-07-01 15:18:20 +08:00
liushaozhen c4178de729 build 2020-06-16 17:36:47 +08:00
liushaozhen 6507b08ce6 build 2020-06-16 17:36:41 +08:00
liushaozhen 18a268f4b8 expandedRows为NodeList Array.prototype.forEach ie 下报错 对象不支持 “forEach” 方法 2020-06-16 17:08:18 +08:00
liushaozhen 4a84af3f9b 2.2.30-nc.5 2020-04-02 10:43:15 +08:00
liushaozhen f2d2011db3 build 2020-04-01 16:53:28 +08:00
liushaozhen f54853829a 数据中没有key字段,鼠标不展开问题修复 2020-04-01 14:39:41 +08:00
liushaozhen ae9ad7fe86 2.2.30-nc.2 2020-03-31 13:38:00 +08:00
yangchch6 392108b0b4 publish 2.2.30-nc.1 2020-03-25 10:02:23 +08:00
yangchch6 1b49ce5d4d feat: 增加columnKey属性,column[columnKey]可作为主键 2020-03-25 09:56:25 +08:00
18 changed files with 68604 additions and 70246 deletions

3
.gitignore vendored
View File

@ -40,4 +40,5 @@ coverage
.*.swp
package-lock.json
demo/.DS_Store
demo/demolist/.DS_Store
demo/demolist/.DS_Store
.history/

View File

@ -26,3 +26,8 @@ sea-modules
spm_modules
.cache
coverage
demo
docs
test
dist
.npmignore

View File

@ -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;

View File

@ -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);

View File

@ -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;

View File

@ -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); // 取每项数据放入一个新数组

View File

@ -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

2
dist/demo.css.map vendored

File diff suppressed because one or more lines are too long

138491
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -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中的简单使用应用)

View File

@ -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"
}
}
}

View File

@ -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;

View File

@ -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);

View File

@ -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() {

View File

@ -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}

View File

@ -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扁平化处理适应多表头避免递归操作
*