merge

build/Table.js

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

build/TableHeader.js

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

demo/demolist/Demo23.js

@@ -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);
+    }}
     />;
   }
 }

docs/mixin.md

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

package.json

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

src/Table.js

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

src/TableHeader.js

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