feat: 增加列拷贝钩子函数

This commit is contained in:
izbz wh 2020-09-29 09:45:11 +08:00
parent b23c699566
commit c6e520db0f
10 changed files with 2612 additions and 2444 deletions

View File

@ -830,6 +830,8 @@ var _initialiseProps = function _initialiseProps() {
}
var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event);
event.preventDefault();
event.stopPropagation();
_this8.currentDome.setAttribute('draggable', false); //添加交换列效果
// let data = this.getCurrentEventData(this._dragCurrent);
// if(!data){
@ -858,6 +860,8 @@ var _initialiseProps = function _initialiseProps() {
var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event);
_this8._dragCurrent.setAttribute("style", "");
event.preventDefault();
event.stopPropagation();
// this._dragCurrent.style = "";
document.getElementById(_this8._table_none_cont_id).innerHTML = "";

View File

@ -139,7 +139,8 @@ var TableRow = function (_Component) {
var event = _utils.Event.getEvent(e),
_target = _utils.Event.getTarget(event),
target = _target.parentNode;
event.preventDefault();
event.stopPropagation();
var currentKey = event.dataTransfer.getData("text");
var targetKey = target.getAttribute("data-row-key");
@ -449,9 +450,10 @@ var TableRow = function (_Component) {
if (this.props.treeType) {
this.setRowParentIndex();
}
if (syncRowHeight) {
this.setRowHeight();
}
// if(syncRowHeight){
// this.setRowHeight()
// }
this.setRowHeight();
};
TableRow.prototype.componentWillUnmount = function componentWillUnmount() {

View File

@ -96,6 +96,7 @@ function bigData(Table) {
_this.treeType = isTreeType;
//fix: 滚动加载场景中,数据动态改变下占位计算错误的问题(26 Jun)
if (newData.toString() !== props.data.toString()) {
_this.cachedRowHeight = []; //缓存每行的高度
_this.cachedRowParentIndex = [];
_this.computeCachedRowParentIndex(newData);

4979
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

@ -86,9 +86,11 @@ import 'bee-table/build/Table.css';
| [v2.2.8新增]autoCheckedByClickRows | 设置为 false 时,表格行点击事件,不会自动勾选复选框 | bool | true |
| [v2.2.8新增]autoSelect | 树型表格勾选时,是否开启子节点的联动 | bool | false |
| onPaste | 粘贴的回调函数 | func(event,positon) | - |
| onCopy | 复制列的回调函数 | func(data,event) | - |
| onBodyScroll | table body 滚动的回调 | func(scrollTop) | - |
| syncRowHeight | 滚动是否同步高度,关闭此功能有利于提高性能,注:树表和主子表不允许关闭 | true | - |
> 快捷键部分参考示例 (快捷键在table中的简单使用应用)
*注意: data参数中的key值必需否则会导致部分功能出现问题建议使用唯一的值如id*

View File

@ -436,7 +436,7 @@ class Table extends Component {
getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
const { lastShowIndex } = this.state;
const { filterDelay, onFilterChange, onFilterClear, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop,onDragEnd, draggable,
onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered,onDropBorder,onDraggingBorder, bodyDisplayInRow, headerEventNoStop} = this.props;
onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered,onDropBorder,onDraggingBorder, bodyDisplayInRow, headerEventNoStop, onCopy} = this.props;
this.columnsChildrenList = []; //复杂表头拖拽重新render表头前将其置空
const rows = this.getHeaderRows(columns);
if (expandIconAsCell && fixed !== 'right') {
@ -488,6 +488,7 @@ class Table extends Component {
rightFixedWidth = {rightFixedWidth}
bodyDisplayInRow = {bodyDisplayInRow}
eventNoStop = {headerEventNoStop}
onCopy = {onCopy}
/>
) : null;
}
@ -1449,6 +1450,9 @@ class Table extends Component {
if (props.bordered) {
className += ` ${clsPrefix}-bordered`;
}
if (props.onCopy) {
className += ` copy`;
}
className += ` ${clsPrefix}-scroll-position-${this.state.scrollPosition}`;
//如果传入height说明是固定高度
//内容过多折行显示时height 属性会失效,为了避免产生错行

View File

@ -29,6 +29,9 @@ $icon-color:#505F79;
position: relative;
line-height: $line-height;
overflow: hidden;
&.copy .u-table-thead th {
user-select: unset
}
&-body{
// overflow: hidden!important;
position: relative;

View File

@ -841,6 +841,12 @@ class TableHeader extends Component {
}
};
onCopy = (data,index, event) => {
if(this.props.onCopy) {
this.props.onCopy(Object.assign(data,{col: index}),event)
}
}
render() {
const { clsPrefix, rowStyle,draggable,
@ -908,7 +914,7 @@ class TableHeader extends Component {
thClassName += ` ${fixedStyle}`;
if(!da.fixed ){
return (<th {...da} {...keyTemp} className={thClassName} data-th-fixed={da.fixed} data-line-key={da.key}
data-line-index={columIndex} data-th-width={da.width} data-type="draggable">
data-line-index={columIndex} data-th-width={da.width} data-type="draggable" onCopy={(event) => {this.onCopy(da,columIndex,event)}}>
{da.children}
{
// && columIndex != _rowLeng
@ -924,7 +930,7 @@ class TableHeader extends Component {
className:`${thClassName} ${fixedStyle}`,
};
da.onClick ?thDefaultObj.onClick = (e)=>{da.onClick(da, e)}:"";
return (<th {...thDefaultObj} {...keyTemp} data-th-fixed={da.fixed} style={{maxWidth: da.width}}/>)
return (<th {...thDefaultObj} {...keyTemp} data-th-fixed={da.fixed} style={{maxWidth: da.width}} onCopy={this.onCopy}/>)
}
})}
</tr>

View File

@ -352,9 +352,10 @@ class TableRow extends Component{
if(this.props.treeType){
this.setRowParentIndex();
}
if(syncRowHeight){
this.setRowHeight()
}
// if(syncRowHeight){
// this.setRowHeight()
// }
this.setRowHeight()
}
componentWillUnmount() {