[Fixbug]使用rowKey的表格，行拖拽无法使用的问题

build/Table.js

@@ -112,7 +112,8 @@ var propTypes = {
   tabIndex: _propTypes2["default"].string,
   hoverContent: _propTypes2["default"].func,
   size: _propTypes2["default"].oneOf(['sm', 'md', 'lg']),
-  rowDraggAble: _propTypes2["default"].bool
+  rowDraggAble: _propTypes2["default"].bool,
+  onDropRow: _propTypes2["default"].func
 };
 
 var defaultProps = {
@@ -157,7 +158,8 @@ var defaultProps = {
   tabIndex: '0',
   heightConsistent: false,
   size: 'md',
-  rowDraggAble: false
+  rowDraggAble: false,
+  onDropRow: function onDropRow() {}
 };
 
 var Table = function (_Component) {
@@ -190,12 +192,16 @@ var Table = function (_Component) {
     _this.onDragRow = function (currentKey, targetKey) {
       var data = _this.state.data,
           currentIndex = void 0,
-          targetIndex = void 0;
+          targetIndex = void 0,
+          record = void 0;
       data.forEach(function (da, i) {
-        if (da.key == currentKey) {
+        // tr 的唯一标识通过 data.key 或 rowKey 两种方式传进来
+        var trKey = da.key ? da.key : _this.getRowKey(da, i);
+        if (trKey == currentKey) {
           currentIndex = i;
+          record = da;
         }
-        if (da.key == targetKey) {
+        if (trKey == targetKey) {
           targetIndex = i;
         }
       });
@@ -204,6 +210,7 @@ var Table = function (_Component) {
       } else {
         data.splice(targetIndex + 1, 0, data.splice(currentIndex, 1).shift());
       }
+      _this.props.onDropRow && _this.props.onDropRow(data, record);
       _this.setState({
         data: data
       });
@@ -720,6 +727,13 @@ var Table = function (_Component) {
     });
   };
 
+  /**
+   * 行拖拽结束时触发
+   * @param currentKey 当前拖拽目标的key
+   * @param targetKey 拖拽结束时，目标位置的key
+   */
+
+
   /**
    *
    *

build/TableRow.js

@@ -451,7 +451,8 @@ var TableRow = function (_Component) {
         fixed = _props9.fixed,
         bodyDisplayInRow = _props9.bodyDisplayInRow,
         expandedIcon = _props9.expandedIcon,
-        collapsedIcon = _props9.collapsedIcon;
+        collapsedIcon = _props9.collapsedIcon,
+        hoverKey = _props9.hoverKey;
 
     var showSum = false;
     var className = this.props.className;
@@ -518,7 +519,7 @@ var TableRow = function (_Component) {
         onMouseLeave: this.onMouseLeave,
         className: clsPrefix + ' ' + className + ' ' + clsPrefix + '-level-' + indent,
         style: style,
-        'data-row-key': record && record.key ? record.key : "null"
+        'data-row-key': record && record.key ? record.key : hoverKey
         // key={hoverKey}
         , ref: this.bindElement
       },

demo/demolist/Demo1201.js

@@ -2,7 +2,7 @@
 *
 * @title 拖拽改变行顺序
 * @parent 行操作-拖拽
-* @description `rowDraggAble`参数设置是否使用行交换顺序功能
+* @description `rowDraggAble`参数设置是否使用行交换顺序功能，`onDropRow` 是拖拽行后的回调函数。注意：表格行数据必须有唯一标识，可以通过 `data.key` 或 `rowKey` 两种方式传入。
 * Demo1201
 */
 
@@ -43,12 +43,23 @@ class Demo1201 extends Component {
     console.log('内容：' , this.currentRecord);
   }
 
+  /**
+   * 行拖拽结束时触发
+   * @param data 拖拽改变顺序后的新data数组
+   * @param record 拖拽行的数据
+   */
+  onDropRow = (data, record) => {
+    console.log('重排序后的data： ', data);
+    console.log('拖拽的行数据： ', record);
+  }
+
   render() {
     return (
         <Table
           columns={columns}
           data={data}
           rowDraggAble={true}
+          onDropRow={this.onDropRow}
         />
     );
   }

demo/demolist/Demo1402.js

@@ -2,7 +2,7 @@
 *
 * @title 嵌套子表格滚动加载
 * @parent 无限滚动 Infinite-scroll
-* @description 通过expandedRowRender参数来实现子表格。注意事项：传入的表格数据必须有 key 值作为唯一标识，否则会导致表格的收起展开功能出现问题。
+* @description 通过expandedRowRender参数来实现子表格。注意：表格行数据必须有唯一标识，可以通过 `data.key` 或 `rowKey` 两种方式传入。
 * demo1402
 */
 

docs/api.md

@@ -95,6 +95,7 @@ import 'bee-table/build/Table.css';
 | onFilterChange | 触发过滤输入操作以及下拉条件的回调 | function(field,value,condition) | `field` : 字段名称 <br> `value` : 字段值 <br> `condition` : 判断条件 |
 | onFilterClear | 清除过滤条件的回调函数，回调参数为清空的字段 | function(field) | `field` : 字段名称 |
 | onRowHover | 行hover时的回调函数 | function(index,record) | `index` : 当前行的index<br> `record` : 当前行的数据 |
+| onDropRow | 拖拽改变行顺序后的回调函数 | function(data,record) | `data` : 拖拽后的新data数组<br> `record` : 拖拽行的数据 |
 
 
 ### Column

src/Table.js

@@ -57,6 +57,7 @@ const propTypes = {
   hoverContent:PropTypes.func,
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
   rowDraggAble: PropTypes.bool,
+  onDropRow: PropTypes.func
 };
 
 const defaultProps = {
@@ -92,7 +93,8 @@ const defaultProps = {
   tabIndex:'0',
   heightConsistent:false,
   size: 'md',
-  rowDraggAble:false
+  rowDraggAble:false,
+  onDropRow: ()=>{}
 };
 
 class Table extends Component {
@@ -556,13 +558,21 @@ class Table extends Component {
     );
   }
 
+  /**
+   * 行拖拽结束时触发
+   * @param currentKey 当前拖拽目标的key
+   * @param targetKey 拖拽结束时，目标位置的key
+   */
   onDragRow = (currentKey,targetKey)=>{
-    let {data} = this.state,currentIndex,targetIndex;
+    let {data} = this.state,currentIndex,targetIndex,record;
     data.forEach((da,i)=>{ 
-      if(da.key == currentKey){
+      // tr 的唯一标识通过 data.key 或 rowKey 两种方式传进来
+      let trKey = da.key ? da.key : this.getRowKey(da, i);
+      if(trKey == currentKey){
         currentIndex = i;
+        record = da;
       }
-      if(da.key == targetKey){
+      if(trKey == targetKey){
         targetIndex = i;
       }
     });
@@ -571,6 +581,7 @@ class Table extends Component {
     }else{
       data.splice((targetIndex+1), 0, data.splice(currentIndex, 1).shift());
     }
+    this.props.onDropRow && this.props.onDropRow(data,record);
     this.setState({
       data,
     });

src/TableRow.js

@@ -353,7 +353,7 @@ class TableRow extends Component{
       clsPrefix, columns, record, height, visible, index,
       expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,rowDraggAble,
       expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,bodyDisplayInRow
-      ,expandedIcon,collapsedIcon
+      ,expandedIcon,collapsedIcon, hoverKey
     } = this.props;
     let showSum = false;
     let { className } = this.props;
@@ -413,7 +413,7 @@ class TableRow extends Component{
     if (!visible) {
       style.display = 'none';
     }
-    
+
     return ( 
       <tr
         draggable={rowDraggAble}
@@ -423,7 +423,7 @@ class TableRow extends Component{
         onMouseLeave={this.onMouseLeave}
         className={`${clsPrefix} ${className} ${clsPrefix}-level-${indent}`}
         style={style}
-        data-row-key={record && record.key?record.key:"null"}
+        data-row-key={record && record.key?record.key:hoverKey}
         // key={hoverKey}
         ref={this.bindElement}
       >