This commit is contained in:
wanghaoo 2019-01-25 11:21:18 +08:00
commit b465c43173
10 changed files with 43 additions and 26 deletions

View File

@ -432,7 +432,8 @@ var Table = function (_Component) {
headerHeight = _props.headerHeight,
afterDragColWidth = _props.afterDragColWidth,
headerScroll = _props.headerScroll,
bordered = _props.bordered;
bordered = _props.bordered,
onDropBorder = _props.onDropBorder;
var rows = this.getHeaderRows(columns);
if (expandIconAsCell && fixed !== 'right') {
@ -446,7 +447,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 } : {};
var dragBorder = dragborder ? { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, dragborder: dragborder, onThMouseMove: onThMouseMove, dragborderKey: dragborderKey, onDropBorder: onDropBorder } : {};
var contentWidthDiff = 0;
//非固定表格,宽度不够时自动扩充
if (!fixed) {
@ -817,7 +818,7 @@ var Table = function (_Component) {
}));
return _react2["default"].createElement(
'colgroup',
null,
{ id: 'bee-table-colgroup' },
cols
);
};
@ -941,7 +942,7 @@ var Table = function (_Component) {
var _drag_class = _this4.props.dragborder ? "table-drag-bordered" : "";
return _react2["default"].createElement(
'table',
{ className: ' ' + tableClassName + ' table-bordered ' + _drag_class + ' ', style: tableStyle },
{ id: 'bee-table-uid', className: ' ' + tableClassName + ' table-bordered ' + _drag_class + ' ', style: tableStyle },
_this4.getColGroup(columns, fixed),
hasHead ? _this4.getHeader(columns, fixed) : null,
tableBody

View File

@ -124,6 +124,7 @@ var TableHeader = function (_Component) {
_this.onLineMouseUp = function (event) {
_this.clearDragBorder(event);
_this.props.onDropBorder(event);
};
_this.bodyonLineMouseMove = function (event) {

View File

@ -60,6 +60,10 @@ class Demo23 extends Component {
return <DragColumnTable columns={columns23} data={data23} bordered
dragborder={true}
draggable={true}
onDropBorder ={(e)=>{
console.log("调整列宽后触发事件",e.target);
}}
/>;
}
}

File diff suppressed because one or more lines are too long

36
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

@ -101,7 +101,9 @@ const SumTable = sum(Table);
| ------ | ---------- | -------- | ---- |
| dragborder | 拖拽调整列宽度 | boolean | false |
| draggable | 拖拽交换列 | boolean | false |
| onDrop | 拖拽释放回调函数 | function | () => {} |
| onDrop | 拖拽释放回调函数(交换列) | function | () => {} |
| onDropBorder | 拖拽释放回调函数(调整列宽) | function | (e) => {} |
#### 使用

View File

@ -1,6 +1,6 @@
{
"name": "bee-table",
"version": "1.6.32",
"version": "1.6.34",
"description": "Table ui component for react",
"keywords": [
"react",

View File

@ -321,7 +321,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} = this.props;
onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered,onDropBorder} = this.props;
const rows = this.getHeaderRows(columns);
if (expandIconAsCell && fixed !== 'right') {
rows[0].unshift({
@ -334,7 +334,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 } : {};
let dragBorder = dragborder ? { onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey,onDropBorder } : {};
let contentWidthDiff = 0;
//非固定表格,宽度不够时自动扩充
if (!fixed) {
@ -692,7 +692,7 @@ class Table extends Component {
}
return <col key={c.key} style={{ width: width, minWidth: c.width }} className={fixedClass}/>;
}));
return <colgroup>{cols}</colgroup>;
return <colgroup id="bee-table-colgroup">{cols}</colgroup>;
}
renderDragHideTable = () => {
@ -815,7 +815,7 @@ class Table extends Component {
) : null;
let _drag_class = this.props.dragborder ? "table-drag-bordered" : ""
return (
<table className={` ${tableClassName} table-bordered ${_drag_class} `} style={tableStyle} >
<table id="bee-table-uid" className={` ${tableClassName} table-bordered ${_drag_class} `} style={tableStyle} >
{/* {this.props.dragborder?null:this.getColGroup(columns, fixed)} */}
{this.getColGroup(columns, fixed)}
{hasHead ? this.getHeader(columns, fixed) : null}

View File

@ -235,6 +235,7 @@ class TableHeader extends Component {
*/
onLineMouseUp = (event) => {
this.clearDragBorder(event);
this.props.onDropBorder(event)
};
/**