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

增加 onDraggingBorder 拖拽时的回调

This commit is contained in:
yangchch6 2019-08-01 14:39:57 +08:00
parent 64deebbeeb
commit 87e0f1f82e
8 changed files with 31 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
build/Table.js
View File

@ -568,7 +568,8 @@ var Table = function (_Component) {
afterDragColWidth = _props.afterDragColWidth,
headerScroll = _props.headerScroll,
bordered = _props.bordered,
onDropBorder = _props.onDropBorder;
onDropBorder = _props.onDropBorder,
onDraggingBorder = _props.onDraggingBorder;
var rows = this.getHeaderRows(columns);
if (expandIconAsCell && fixed !== 'right') {
@ -582,7 +583,7 @@ var Table = function (_Component) {
var trStyle = headerHeight && !fixed ? { height: headerHeight } : fixed ? this.getHeaderRowStyle(columns, rows) : null;
var drop = draggable ? { onDragStart: onDragStart, onDragOver: onDragOver, onDrop: onDrop, onDragEnter: onDragEnter, draggable: draggable } : {};
var dragBorder = dragborder ? { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, dragborder: dragborder, onThMouseMove: onThMouseMove, dragborderKey: dragborderKey, onDropBorder: onDropBorder } : {};
var dragBorder = dragborder ? { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, dragborder: dragborder, onThMouseMove: onThMouseMove, dragborderKey: dragborderKey, onDropBorder: onDropBorder, onDraggingBorder: onDraggingBorder } : {};
var contentWidthDiff = 0;
//非固定表格,宽度不够时自动扩充
if (!fixed) {

11
build/TableHeader.js
View File

@ -147,7 +147,8 @@ var TableHeader = function (_Component) {
scrollbarWidth = _this$props2.scrollbarWidth,
contentTable = _this$props2.contentTable,
headerScroll = _this$props2.headerScroll,
lastShowIndex = _this$props2.lastShowIndex;
lastShowIndex = _this$props2.lastShowIndex,
onDraggingBorder = _this$props2.onDraggingBorder;
_utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(e);
@ -214,9 +215,11 @@ var TableHeader = function (_Component) {
}
} else if (_this.props.draggable && _this.drag.option == "draggable") {
// console.log(" --onTrMouseMove--draggable- ",this.drag.option);
} else {
// console.log("onTrMouseMove dragborder or draggable is all false !");
}
} else {}
// console.log("onTrMouseMove dragborder or draggable is all false !");
// 增加拖拽列宽动作的回调函数
_this.drag.newWidth && onDraggingBorder && onDraggingBorder(event, _this.drag.newWidth);
};
_this.onTrMouseUp = function (e) {

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

20
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

3
docs/api.md
View File

@ -265,7 +265,8 @@ Table 组件参数：
| dragborder | 拖拽调整列宽度 | boolean | false |
| draggable | 拖拽交换列 | boolean | false |
| onDrop | 拖拽释放回调函数(交换列) | function | () => {} |
| onDropBorder | 拖拽释放回调函数(调整列宽) | function | (e) => {} |
| onDropBorder | 拖拽释放回调函数(调整列宽) | function | (e,width) => {} |
| onDraggingBorder | 调整列宽过程中触发的回调函数 | function | (e,width) => {} |
#### dragColumn 使用示例
- [拖拽改变列顺序](http://design.yonyoucloud.com/tinper-bee/bee-table#%E6%8B%96%E6%8B%BD%E6%94%B9%E5%8F%98%E5%88%97%E9%A1%BA%E5%BA%8F)

4
src/Table.js
View File

@ -395,7 +395,7 @@ class Table extends Component {
getHeader(columns, fixed) {
const { filterDelay, onFilterChange, onFilterClear, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop, draggable,
onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered,onDropBorder} = this.props;
onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered,onDropBorder,onDraggingBorder} = this.props;
const rows = this.getHeaderRows(columns);
if (expandIconAsCell && fixed !== 'right') {
rows[0].unshift({
@ -408,7 +408,7 @@ class Table extends Component {
const trStyle = headerHeight&&!fixed ? { height: headerHeight } : (fixed ? this.getHeaderRowStyle(columns, rows) : null);
let drop = draggable ? { onDragStart, onDragOver, onDrop, onDragEnter, draggable } : {};
let dragBorder = dragborder ? { onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey,onDropBorder } : {};
let dragBorder = dragborder ? { onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey,onDropBorder,onDraggingBorder } : {};
let contentWidthDiff = 0;
//非固定表格,宽度不够时自动扩充
if (!fixed) {

4
src/TableHeader.js
View File

@ -263,7 +263,7 @@ class TableHeader extends Component {
*/
onTrMouseMove = (e) => {
if(!this.props.dragborder && !this.props.draggable)return;
const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll,lastShowIndex} = this.props;
const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll,lastShowIndex,onDraggingBorder} = this.props;
Event.stopPropagation(e);
let event = Event.getEvent(e);
if(this.props.dragborder && this.drag.option == "border"){
@ -331,6 +331,8 @@ class TableHeader extends Component {
}else{
// console.log("onTrMouseMove dragborder or draggable is all false !");
}
// 增加拖拽列宽动作的回调函数
this.drag.newWidth && onDraggingBorder && onDraggingBorder(event, this.drag.newWidth);
}
/**