feat: 增加列拷贝钩子函数
This commit is contained in:
parent
b23c699566
commit
c6e520db0f
|
@ -830,6 +830,8 @@ var _initialiseProps = function _initialiseProps() {
|
||||||
}
|
}
|
||||||
var event = _utils.Event.getEvent(e),
|
var event = _utils.Event.getEvent(e),
|
||||||
target = _utils.Event.getTarget(event);
|
target = _utils.Event.getTarget(event);
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
_this8.currentDome.setAttribute('draggable', false); //添加交换列效果
|
_this8.currentDome.setAttribute('draggable', false); //添加交换列效果
|
||||||
// let data = this.getCurrentEventData(this._dragCurrent);
|
// let data = this.getCurrentEventData(this._dragCurrent);
|
||||||
// if(!data){
|
// if(!data){
|
||||||
|
@ -858,6 +860,8 @@ var _initialiseProps = function _initialiseProps() {
|
||||||
var event = _utils.Event.getEvent(e),
|
var event = _utils.Event.getEvent(e),
|
||||||
target = _utils.Event.getTarget(event);
|
target = _utils.Event.getTarget(event);
|
||||||
_this8._dragCurrent.setAttribute("style", "");
|
_this8._dragCurrent.setAttribute("style", "");
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
// this._dragCurrent.style = "";
|
// this._dragCurrent.style = "";
|
||||||
document.getElementById(_this8._table_none_cont_id).innerHTML = "";
|
document.getElementById(_this8._table_none_cont_id).innerHTML = "";
|
||||||
|
|
||||||
|
|
|
@ -139,7 +139,8 @@ var TableRow = function (_Component) {
|
||||||
var event = _utils.Event.getEvent(e),
|
var event = _utils.Event.getEvent(e),
|
||||||
_target = _utils.Event.getTarget(event),
|
_target = _utils.Event.getTarget(event),
|
||||||
target = _target.parentNode;
|
target = _target.parentNode;
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
var currentKey = event.dataTransfer.getData("text");
|
var currentKey = event.dataTransfer.getData("text");
|
||||||
var targetKey = target.getAttribute("data-row-key");
|
var targetKey = target.getAttribute("data-row-key");
|
||||||
|
|
||||||
|
@ -449,9 +450,10 @@ var TableRow = function (_Component) {
|
||||||
if (this.props.treeType) {
|
if (this.props.treeType) {
|
||||||
this.setRowParentIndex();
|
this.setRowParentIndex();
|
||||||
}
|
}
|
||||||
if (syncRowHeight) {
|
// if(syncRowHeight){
|
||||||
this.setRowHeight();
|
// this.setRowHeight()
|
||||||
}
|
// }
|
||||||
|
this.setRowHeight();
|
||||||
};
|
};
|
||||||
|
|
||||||
TableRow.prototype.componentWillUnmount = function componentWillUnmount() {
|
TableRow.prototype.componentWillUnmount = function componentWillUnmount() {
|
||||||
|
|
|
@ -96,6 +96,7 @@ function bigData(Table) {
|
||||||
_this.treeType = isTreeType;
|
_this.treeType = isTreeType;
|
||||||
//fix: 滚动加载场景中,数据动态改变下占位计算错误的问题(26 Jun)
|
//fix: 滚动加载场景中,数据动态改变下占位计算错误的问题(26 Jun)
|
||||||
if (newData.toString() !== props.data.toString()) {
|
if (newData.toString() !== props.data.toString()) {
|
||||||
|
|
||||||
_this.cachedRowHeight = []; //缓存每行的高度
|
_this.cachedRowHeight = []; //缓存每行的高度
|
||||||
_this.cachedRowParentIndex = [];
|
_this.cachedRowParentIndex = [];
|
||||||
_this.computeCachedRowParentIndex(newData);
|
_this.computeCachedRowParentIndex(newData);
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -86,9 +86,11 @@ import 'bee-table/build/Table.css';
|
||||||
| [v2.2.8新增]autoCheckedByClickRows | 设置为 false 时,表格行点击事件,不会自动勾选复选框 | bool | true |
|
| [v2.2.8新增]autoCheckedByClickRows | 设置为 false 时,表格行点击事件,不会自动勾选复选框 | bool | true |
|
||||||
| [v2.2.8新增]autoSelect | 树型表格勾选时,是否开启子节点的联动 | bool | false |
|
| [v2.2.8新增]autoSelect | 树型表格勾选时,是否开启子节点的联动 | bool | false |
|
||||||
| onPaste | 粘贴的回调函数 | func(event,positon) | - |
|
| onPaste | 粘贴的回调函数 | func(event,positon) | - |
|
||||||
|
| onCopy | 复制列的回调函数 | func(data,event) | - |
|
||||||
| onBodyScroll | table body 滚动的回调 | func(scrollTop) | - |
|
| onBodyScroll | table body 滚动的回调 | func(scrollTop) | - |
|
||||||
| syncRowHeight | 滚动是否同步高度,关闭此功能有利于提高性能,注:树表和主子表不允许关闭 | true | - |
|
| syncRowHeight | 滚动是否同步高度,关闭此功能有利于提高性能,注:树表和主子表不允许关闭 | true | - |
|
||||||
|
|
||||||
|
|
||||||
> 快捷键部分参考示例 (快捷键在table中的简单使用应用)
|
> 快捷键部分参考示例 (快捷键在table中的简单使用应用)
|
||||||
|
|
||||||
*注意: data参数中的key值必需,否则会导致部分功能出现问题!建议使用唯一的值,如id*
|
*注意: data参数中的key值必需,否则会导致部分功能出现问题!建议使用唯一的值,如id*
|
||||||
|
|
|
@ -436,7 +436,7 @@ class Table extends Component {
|
||||||
getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
|
getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
|
||||||
const { lastShowIndex } = this.state;
|
const { lastShowIndex } = this.state;
|
||||||
const { filterDelay, onFilterChange, onFilterClear, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop,onDragEnd, draggable,
|
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表头前,将其置空
|
this.columnsChildrenList = []; //复杂表头拖拽,重新render表头前,将其置空
|
||||||
const rows = this.getHeaderRows(columns);
|
const rows = this.getHeaderRows(columns);
|
||||||
if (expandIconAsCell && fixed !== 'right') {
|
if (expandIconAsCell && fixed !== 'right') {
|
||||||
|
@ -488,6 +488,7 @@ class Table extends Component {
|
||||||
rightFixedWidth = {rightFixedWidth}
|
rightFixedWidth = {rightFixedWidth}
|
||||||
bodyDisplayInRow = {bodyDisplayInRow}
|
bodyDisplayInRow = {bodyDisplayInRow}
|
||||||
eventNoStop = {headerEventNoStop}
|
eventNoStop = {headerEventNoStop}
|
||||||
|
onCopy = {onCopy}
|
||||||
/>
|
/>
|
||||||
) : null;
|
) : null;
|
||||||
}
|
}
|
||||||
|
@ -1449,6 +1450,9 @@ class Table extends Component {
|
||||||
if (props.bordered) {
|
if (props.bordered) {
|
||||||
className += ` ${clsPrefix}-bordered`;
|
className += ` ${clsPrefix}-bordered`;
|
||||||
}
|
}
|
||||||
|
if (props.onCopy) {
|
||||||
|
className += ` copy`;
|
||||||
|
}
|
||||||
className += ` ${clsPrefix}-scroll-position-${this.state.scrollPosition}`;
|
className += ` ${clsPrefix}-scroll-position-${this.state.scrollPosition}`;
|
||||||
//如果传入height说明是固定高度
|
//如果传入height说明是固定高度
|
||||||
//内容过多折行显示时,height 属性会失效,为了避免产生错行
|
//内容过多折行显示时,height 属性会失效,为了避免产生错行
|
||||||
|
|
|
@ -29,6 +29,9 @@ $icon-color:#505F79;
|
||||||
position: relative;
|
position: relative;
|
||||||
line-height: $line-height;
|
line-height: $line-height;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
&.copy .u-table-thead th {
|
||||||
|
user-select: unset
|
||||||
|
}
|
||||||
&-body{
|
&-body{
|
||||||
// overflow: hidden!important;
|
// overflow: hidden!important;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
|
@ -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() {
|
render() {
|
||||||
const { clsPrefix, rowStyle,draggable,
|
const { clsPrefix, rowStyle,draggable,
|
||||||
|
@ -908,7 +914,7 @@ class TableHeader extends Component {
|
||||||
thClassName += ` ${fixedStyle}`;
|
thClassName += ` ${fixedStyle}`;
|
||||||
if(!da.fixed ){
|
if(!da.fixed ){
|
||||||
return (<th {...da} {...keyTemp} className={thClassName} data-th-fixed={da.fixed} data-line-key={da.key}
|
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}
|
{da.children}
|
||||||
{
|
{
|
||||||
// && columIndex != _rowLeng
|
// && columIndex != _rowLeng
|
||||||
|
@ -924,7 +930,7 @@ class TableHeader extends Component {
|
||||||
className:`${thClassName} ${fixedStyle}`,
|
className:`${thClassName} ${fixedStyle}`,
|
||||||
};
|
};
|
||||||
da.onClick ?thDefaultObj.onClick = (e)=>{da.onClick(da, e)}:"";
|
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>
|
</tr>
|
||||||
|
|
|
@ -352,9 +352,10 @@ class TableRow extends Component{
|
||||||
if(this.props.treeType){
|
if(this.props.treeType){
|
||||||
this.setRowParentIndex();
|
this.setRowParentIndex();
|
||||||
}
|
}
|
||||||
if(syncRowHeight){
|
// if(syncRowHeight){
|
||||||
this.setRowHeight()
|
// this.setRowHeight()
|
||||||
}
|
// }
|
||||||
|
this.setRowHeight()
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
|
|
Loading…
Reference in New Issue