p47502813
/
bee-table
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

嵌套表格，扩展行支持高度自适应

This commit is contained in:
yangchch6 2019-09-09 10:46:35 +08:00
parent 5ce4037c78
commit 65741b6613
9 changed files with 171004 additions and 166448 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
build/Table.js
View File

@ -241,10 +241,8 @@ var Table = function (_Component) {
var value1 = arr[index1];
arr.splice(index1, 1);
if (index1 < index2) {
console.log('向下拖');
arr.splice(index2, 0, value1);
} else {
console.log('向上拖');
arr.splice(index2 + 1, 0, value1);
}
@ -318,7 +316,8 @@ var Table = function (_Component) {
currentHoverKey: null,
scrollPosition: 'left',
fixedColumnsHeadRowsHeight: [],
fixedColumnsBodyRowsHeight: []
fixedColumnsBodyRowsHeight: [],
fixedColumnsExpandedRowsHeight: {} //扩展行的高度
};
_this.onExpandedRowsChange = _this.onExpandedRowsChange.bind(_this);
@ -738,10 +737,10 @@ var Table = function (_Component) {
} else if (fixed === 'right') {
colCount = this.columnManager.rightLeafColumns().length;
} else {
// colCount = this.columnManager.leafColumns().length;
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 } });
@ -781,7 +780,8 @@ var Table = function (_Component) {
dragborderKey: this.props.dragborderKey,
rowDraggAble: this.props.rowDraggAble,
onDragRow: this.onDragRow,
onDragRowStart: this.onDragRowStart
onDragRowStart: this.onDragRowStart,
height: expandedRowHeight
});
};
@ -1346,6 +1346,7 @@ var Table = function (_Component) {
bodyDisplayInRow = _props8.bodyDisplayInRow;
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.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll('.' + clsPrefix + '-row') || [];
var rightBodyRows = this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll('.' + clsPrefix + '-row') || [];
@ -1378,13 +1379,19 @@ var Table = function (_Component) {
}
}
});
if ((0, _shallowequal2["default"])(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight)) {
var fixedColumnsExpandedRowsHeight = {};
expandedRows.length > 0 && expandedRows.forEach(function (row) {
var parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key"),
height = row && row.getBoundingClientRect().height || 'auto';
fixedColumnsExpandedRowsHeight[parentRowKey] = height;
});
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
fixedColumnsBodyRowsHeight: fixedColumnsBodyRowsHeight,
fixedColumnsExpandedRowsHeight: fixedColumnsExpandedRowsHeight
});
};

1
build/lib/multiSelect.js
View File

@ -347,6 +347,7 @@ function multiSelect(Table, Checkbox) {
};
this.onRowClick = function (record, index, event) {
if (record._disabled) return;
var _props2 = _this2.props,
autoCheckedByClickRows = _props2.autoCheckedByClickRows,
onRowClick = _props2.onRowClick;

4
demo/demolist/Demo1101.js
View File

@ -52,14 +52,10 @@ class Demo16 extends Component {
}
}
expandedRowRender = (record, index, indent) => {
let height = 42 * (this.state.data_obj[record.key].length+ 2);
return (
<Table
columns={columns17}
style={{height:height}}
data={this.state.data_obj[record.key]}
/>
);
};

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

336245
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -54,7 +54,7 @@
"bee-loading": "1.1.2",
"bee-locale": "0.0.14",
"bee-menus": "^2.0.6",
"bee-radio": "^2.0.14",
"bee-radio": "^2.0.16",
"bee-select": "^2.0.11",
"classnames": "^2.2.5",
"component-classes": "^1.2.6",

20
src/Table.js
View File

@ -131,6 +131,7 @@ class Table extends Component {
scrollPosition: 'left',
fixedColumnsHeadRowsHeight: [],
fixedColumnsBodyRowsHeight: [],
fixedColumnsExpandedRowsHeight: {}, //扩展行的高度
}
this.onExpandedRowsChange = this.onExpandedRowsChange.bind(this);
@ -542,10 +543,10 @@ class Table extends Component {
} else if (fixed === 'right') {
colCount = this.columnManager.rightLeafColumns().length;
} else {
// colCount = this.columnManager.leafColumns().length;
colCount = this.columnManager.centerColumns().length; //计算非固定列的个数，fix: 嵌套表格场景，右侧列断开的问题
}
let expandedRowHeight = this.state.fixedColumnsExpandedRowsHeight[key] || 'auto';
function contentContainer() {
if (content && content.props && content.props.style) {
return (
@ -585,6 +586,7 @@ class Table extends Component {
rowDraggAble={this.props.rowDraggAble}
onDragRow={this.onDragRow}
onDragRowStart={this.onDragRowStart}
height={expandedRowHeight}
/>
);
}
@ -640,11 +642,9 @@ class Table extends Component {
var value1 = arr[index1]
arr.splice(index1,1)
if(index1<index2){
console.log('向下拖')
arr.splice(index2,0,value1)
}else {
console.log('向上拖')
arr.splice(index2+1,0,value1)
}
@ -1150,6 +1150,7 @@ class Table extends Component {
const headRows = this.headTable ?
this.headTable.querySelectorAll('thead') :
this.bodyTable.querySelectorAll('thead');
const expandedRows = this.bodyTable.querySelectorAll(`.${clsPrefix}-expanded-row`) || [];
const bodyRows = this.bodyTable.querySelectorAll(`.${clsPrefix}-row`) || [];
const leftBodyRows = this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll(`.${clsPrefix}-row`) || [];
const rightBodyRows = this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll(`.${clsPrefix}-row`) || [];
@ -1180,18 +1181,23 @@ class Table extends Component {
return row.getBoundingClientRect().height || 'auto'
}
}
}
);
const fixedColumnsExpandedRowsHeight = {};
expandedRows.length > 0 && expandedRows.forEach(row => {
let parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key"),
height = row && row.getBoundingClientRect().height || 'auto';
fixedColumnsExpandedRowsHeight[parentRowKey] = height;
})
if (shallowequal(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) &&
shallowequal(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight)) {
shallowequal(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight) &&
shallowequal(this.state.fixedColumnsExpandedRowsHeight, fixedColumnsExpandedRowsHeight)) {
return;
}
this.setState({
fixedColumnsHeadRowsHeight,
fixedColumnsBodyRowsHeight,
fixedColumnsExpandedRowsHeight,
});
}

1
src/lib/multiSelect.js
View File

@ -288,6 +288,7 @@ export default function multiSelect(Table, Checkbox) {
// 实现行点击时触发多选框勾选的需求
onRowClick = (record,index,event) =>{
if(record._disabled) return;
let { autoCheckedByClickRows, onRowClick } = this.props;
if(autoCheckedByClickRows) {
this.onCheckboxChange('',record, index)();