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

拖拽增加回调函数

This commit is contained in:
wanghaoo 2018-10-25 19:21:05 +08:00
parent 35dc379664
commit 5b687329db
6 changed files with 56 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
build/Table.js
View File

@ -367,7 +367,8 @@ var Table = function (_Component) {
onThMouseMove = _props.onThMouseMove,
dragborderKey = _props.dragborderKey,
minColumnWidth = _props.minColumnWidth,
headerHeight = _props.headerHeight;
headerHeight = _props.headerHeight,
afterDragColWidth = _props.afterDragColWidth;
var rows = this.getHeaderRows(columns);
if (expandIconAsCell && fixed !== 'right') {
@ -400,7 +401,8 @@ var Table = function (_Component) {
filterable: filterable,
onFilterRowsChange: onFilterRowsChange,
onFilterRowsDropChange: onFilterRowsDropChange,
filterDelay: filterDelay
filterDelay: filterDelay,
afterDragColWidth: afterDragColWidth
})) : null;
};
@ -426,7 +428,8 @@ var Table = function (_Component) {
children: column.title,
drgHover: column.drgHover,
fixed: column.fixed,
width: column.width
width: column.width,
dataIndex: column.dataIndex
};
if (column.onHeadCellClick) {
cell.onClick = column.onHeadCellClick;

24
build/TableHeader.js
View File

@ -135,7 +135,9 @@ var TableHeader = function (_Component) {
_this.onThMouseUp = function (event, data) {
_this.border = false;
var clsPrefix = _this.props.clsPrefix;
var _this$props2 = _this.props,
clsPrefix = _this$props2.clsPrefix,
rows = _this$props2.rows;
var eventDom = event.target;
var optDom = void 0;
@ -149,15 +151,19 @@ var TableHeader = function (_Component) {
optDom.classList.remove('th-drag-gap-hover');
optDom.classList.add('th-drag-gap');
}
//宽度拖拽后，增加回调函数，外部可以记录宽度
if (typeof _this.props.afterDragColWidth == 'function' && rows && rows[0] && _this.drag.currIndex) {
_this.props.afterDragColWidth(rows[0][_this.drag.currIndex]);
}
};
_this.onThMouseMove = function (event, data) {
if (!_this.border) return;
//固定表头拖拽
var _this$props2 = _this.props,
dragborderKey = _this$props2.dragborderKey,
contentTable = _this$props2.contentTable;
var _this$props3 = _this.props,
dragborderKey = _this$props3.dragborderKey,
contentTable = _this$props3.contentTable;
var x = event.pageX - _this.drag.initPageLeftX + _this.drag.initLeft - 0;
var contentTableDom = document.getElementById("u-table-drag-thead-" + _this.theadKey).parentNode;
@ -205,6 +211,8 @@ var TableHeader = function (_Component) {
currentDom.style.width = newWidth + "px";
// this.contentTableWidth = newTableWidth;
contentTableDom.style.width = newTableWidth + 'px';
data.width = newWidth;
_this.drag.x = x;
var contentColDomArr = contentTableDom.querySelectorAll('colgroup col');
contentColDomArr[_this.drag.currIndex].style.width = newWidth + "px";
@ -238,10 +246,10 @@ var TableHeader = function (_Component) {
};
_this.filterRenderType = function (type, dataIndex, index) {
var _this$props3 = _this.props,
clsPrefix = _this$props3.clsPrefix,
rows = _this$props3.rows,
filterDelay = _this$props3.filterDelay;
var _this$props4 = _this.props,
clsPrefix = _this$props4.clsPrefix,
rows = _this$props4.rows,
filterDelay = _this$props4.filterDelay;
switch (type) {
//文本输入

33
dist/demo.js vendored
View File

@ -10935,7 +10935,8 @@
onThMouseMove = _props.onThMouseMove,
dragborderKey = _props.dragborderKey,
minColumnWidth = _props.minColumnWidth,
headerHeight = _props.headerHeight;
headerHeight = _props.headerHeight,
afterDragColWidth = _props.afterDragColWidth;
var rows = this.getHeaderRows(columns);
if (expandIconAsCell && fixed !== 'right') {
@ -10968,7 +10969,8 @@
filterable: filterable,
onFilterRowsChange: onFilterRowsChange,
onFilterRowsDropChange: onFilterRowsDropChange,
filterDelay: filterDelay
filterDelay: filterDelay,
afterDragColWidth: afterDragColWidth
})) : null;
};
@ -10994,7 +10996,8 @@
children: column.title,
drgHover: column.drgHover,
fixed: column.fixed,
width: column.width
width: column.width,
dataIndex: column.dataIndex
};
if (column.onHeadCellClick) {
cell.onClick = column.onHeadCellClick;
@ -12612,7 +12615,9 @@
_this.onThMouseUp = function (event, data) {
_this.border = false;
var clsPrefix = _this.props.clsPrefix;
var _this$props2 = _this.props,
clsPrefix = _this$props2.clsPrefix,
rows = _this$props2.rows;
var eventDom = event.target;
var optDom = void 0;
@ -12626,15 +12631,19 @@
optDom.classList.remove('th-drag-gap-hover');
optDom.classList.add('th-drag-gap');
}
//宽度拖拽后，增加回调函数，外部可以记录宽度
if (typeof _this.props.afterDragColWidth == 'function' && rows && rows[0] && _this.drag.currIndex) {
_this.props.afterDragColWidth(rows[0][_this.drag.currIndex]);
}
};
_this.onThMouseMove = function (event, data) {
if (!_this.border) return;
//固定表头拖拽
var _this$props2 = _this.props,
dragborderKey = _this$props2.dragborderKey,
contentTable = _this$props2.contentTable;
var _this$props3 = _this.props,
dragborderKey = _this$props3.dragborderKey,
contentTable = _this$props3.contentTable;
var x = event.pageX - _this.drag.initPageLeftX + _this.drag.initLeft - 0;
var contentTableDom = document.getElementById("u-table-drag-thead-" + _this.theadKey).parentNode;
@ -12682,6 +12691,8 @@
currentDom.style.width = newWidth + "px";
// this.contentTableWidth = newTableWidth;
contentTableDom.style.width = newTableWidth + 'px';
data.width = newWidth;
_this.drag.x = x;
var contentColDomArr = contentTableDom.querySelectorAll('colgroup col');
contentColDomArr[_this.drag.currIndex].style.width = newWidth + "px";
@ -12715,10 +12726,10 @@
};
_this.filterRenderType = function (type, dataIndex, index) {
var _this$props3 = _this.props,
clsPrefix = _this$props3.clsPrefix,
rows = _this$props3.rows,
filterDelay = _this$props3.filterDelay;
var _this$props4 = _this.props,
clsPrefix = _this$props4.clsPrefix,
rows = _this$props4.rows,
filterDelay = _this$props4.filterDelay;
switch (type) {
//文本输入

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

6
src/Table.js
View File

@ -278,7 +278,7 @@ class Table extends Component {
getHeader(columns, fixed) {
const { filterDelay, onFilterRowsDropChange, onFilterRowsChange, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop, draggable,
onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight } = this.props;
onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth } = this.props;
const rows = this.getHeaderRows(columns);
if (expandIconAsCell && fixed !== 'right') {
rows[0].unshift({
@ -314,6 +314,7 @@ class Table extends Component {
onFilterRowsChange={onFilterRowsChange}
onFilterRowsDropChange={onFilterRowsDropChange}
filterDelay={filterDelay}
afterDragColWidth = {afterDragColWidth}
/>
) : null;
}
@ -335,7 +336,8 @@ class Table extends Component {
children: column.title,
drgHover: column.drgHover,
fixed: column.fixed,
width: column.width
width: column.width,
dataIndex:column.dataIndex
};
if (column.onHeadCellClick) {
cell.onClick = column.onHeadCellClick;

9
src/TableHeader.js
View File

@ -124,7 +124,7 @@ class TableHeader extends Component {
}
onThMouseUp = (event, data) => {
this.border = false;
const { clsPrefix } = this.props;
const { clsPrefix,rows } = this.props;
let eventDom = event.target;
let optDom;
if (eventDom.classList.contains('.th-drag-gap-hover')) {
@ -138,7 +138,10 @@ class TableHeader extends Component {
optDom.classList.remove('th-drag-gap-hover');
optDom.classList.add('th-drag-gap');
}
//宽度拖拽后，增加回调函数，外部可以记录宽度
if(typeof (this.props.afterDragColWidth) == 'function' && rows && rows[0] && this.drag.currIndex){
this.props.afterDragColWidth(rows[0][this.drag.currIndex]);
}
}
@ -193,6 +196,8 @@ class TableHeader extends Component {
currentDom.style.width = newWidth + "px";
// this.contentTableWidth = newTableWidth;
contentTableDom.style.width = newTableWidth + 'px';
data.width = newWidth;
this.drag.x = x;
let contentColDomArr = contentTableDom.querySelectorAll('colgroup col')
contentColDomArr[this.drag.currIndex].style.width = newWidth + "px";