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), 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 = "";

View File

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

View File

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

5011
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新增]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*

View File

@ -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 属性会失效,为了避免产生错行

View File

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

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

View File

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