Merge branch 'master' of github.com:tinper-bee/bee-table

2019-04-28 14:26:28 +08:00 · 2019-04-28 14:26:28 +08:00 · 0cdb4fcb40
parent 1e3b09b423 d036690e58
commit 0cdb4fcb40
21 changed files with 608 additions and 269 deletions
--- a/build/Table.css
+++ b/build/Table.css
@ -310,7 +310,7 @@
  .u-table-filter-column-pop-cont {
    margin: 0px;
    max-height: 300px;
-    overflow-y: scroll;
+    overflow-y: auto;
    color: #212121; }
  .u-table-filter-column-clear-setting {
    cursor: pointer;
@ -384,6 +384,11 @@
    display: none; }
  .u-table ::-webkit-scrollbar-track-piece {
    display: none; }
+  .u-table .row-dragg-able {
+    cursor: move; }
+  .u-table .u-table-drag-hidden-cont {
+    width: 100px;
+    height: 40px; }

 .u-table:focus {
  outline: none;
@ -617,3 +622,21 @@
 .u-table-drag-hidden-cont {
  position: absolute;
  top: -1000px; }
+
+.u-editable-table .u-table .u-table-row-hover .editable-cell-text-wrapper {
+  padding-left: 4px;
+  border: 1px solid #c1c7d0; }
+
+.u-editable-table .u-table .editable-cell-text-wrapper:hover {
+  padding-left: 4px;
+  border: 1px solid #a5adba; }
+
+.u-editable-table .u-table .editable-cell-input-wrapper:focus {
+  outline: none; }
+
+.u-editable-table-tp .tooltip-arrow {
+  top: 1px !important;
+  border-bottom-color: #F44336 !important; }
+
+.u-editable-table-tp .tooltip-inner {
+  border-color: #F44336 !important; }
--- a/build/Table.js
+++ b/build/Table.js
@ -173,14 +173,33 @@ var Table = function (_Component) {
      });
    };

-    _this.onDragRow = function (currentIndex, targetIndex) {
-      var data = _this.state.data,
-          currentObj = data[currentIndex],
-          targetObj = data[targetIndex];
+    _this.getTableUID = function () {
+      var uid = "_table_uid_" + new Date().getTime();
+      _this.tableUid = uid;
+      var div = document.createElement("div");
+      // div.className = "u-table-drag-hidden-cont";
+      div.className = "u-table-drag-hidden-cont";
+      div.id = uid;
+      _this.contentTable.appendChild(div);
+    };

-      console.log(currentIndex + " ----------onRowDragEnd-------- " + targetIndex);
-      data.splice(targetIndex, 0, data.splice(currentIndex, 1).shift());
-      console.log(" _data---- ", data);
+    _this.onDragRow = function (currentKey, targetKey) {
+      var data = _this.state.data,
+          currentIndex = void 0,
+          targetIndex = void 0;
+      data.forEach(function (da, i) {
+        if (da.key == currentKey) {
+          currentIndex = i;
+        }
+        if (da.key == targetKey) {
+          targetIndex = i;
+        }
+      });
+      if (currentIndex < targetIndex) {
+        data.splice(targetIndex, 0, data.splice(currentIndex, 1).shift());
+      } else {
+        data.splice(targetIndex + 1, 0, data.splice(currentIndex, 1).shift());
+      }
      _this.setState({
        data: data
      });
@ -283,10 +302,12 @@ var Table = function (_Component) {
    _this.handleRowHover = _this.handleRowHover.bind(_this);
    _this.computeTableWidth = _this.computeTableWidth.bind(_this);
    _this.onBodyMouseLeave = _this.onBodyMouseLeave.bind(_this);
+    _this.tableUid = null;
    return _this;
  }

  Table.prototype.componentDidMount = function componentDidMount() {
+    this.getTableUID();
    _utils.EventUtil.addHandler(this.contentTable, 'keydown', this.onKeyDown);
    _utils.EventUtil.addHandler(this.contentTable, 'focus', this.onFocus);
    setTimeout(this.resetScrollX, 300);
@ -786,7 +807,7 @@ var Table = function (_Component) {
        indent: indent,
        indentSize: props.indentSize,
        needIndentSpaced: needIndentSpaced,
-        className: className,
+        className: className + ' ' + (this.props.rowDraggAble ? ' row-dragg-able ' : ''),
        record: record,
        expandIconAsCell: expandIconAsCell,
        onDestroy: this.onRowDestroy,
@ -820,7 +841,8 @@ var Table = function (_Component) {
        bodyDisplayInRow: props.bodyDisplayInRow,
        rowDraggAble: this.props.rowDraggAble,
        onDragRow: this.onDragRow,
-        contentTable: this.contentTable
+        contentTable: this.contentTable,
+        tableUid: this.tableUid
      })));
      this.treeRowIndex++;
      var subVisible = visible && isRowExpanded;
--- a/build/TableRow.js
+++ b/build/TableRow.js
@ -102,6 +102,11 @@ var TableRow = function (_Component) {
          target = _utils.Event.getTarget(event);
      _this.currentIndex = target.getAttribute("data-row-key");
      _this._dragCurrent = target;
+
+      //TODO 自定义图像后续需要增加。
+      //  let crt = this.synchronizeTableTrShadow(); 
+      //  document.getElementById(this.props.tableUid).appendChild(crt);
+      // event.dataTransfer.setDragImage(crt, 0, 0);
      event.dataTransfer.effectAllowed = "move";
      event.dataTransfer.setData("Text", _this.currentIndex);
    };
@ -119,15 +124,37 @@ var TableRow = function (_Component) {
      var event = _utils.Event.getEvent(e),
          _target = _utils.Event.getTarget(event),
          target = _target.parentNode;
-      var currentIndex = target.getAttribute("data-row-key");
-      if (!currentIndex || currentIndex === _this.currentIndex) return;
+
+      var currentKey = event.dataTransfer.getData("text");
+      var targetKey = target.getAttribute("data-row-key");
+
+      if (!targetKey || targetKey === currentKey) return;
      if (target.nodeName.toUpperCase() === "TR") {
-        _this.synchronizeTableTr(_this.currentIndex, null);
+        _this.synchronizeTableTr(currentKey, null);
+        _this.synchronizeTableTr(targetKey, null);
        // target.setAttribute("style","");
        // this.synchronizeTrStyle(this.currentIndex,false);
      }
-      var _currentIndex = event.dataTransfer.getData("text");
-      onDragRow && onDragRow(parseInt(_this.currentIndex--), parseInt(currentIndex--));
+      onDragRow && onDragRow(currentKey, targetKey);
+    };
+
+    _this.synchronizeTableTrShadow = function () {
+      var _this$props2 = _this.props,
+          contentTable = _this$props2.contentTable,
+          index = _this$props2.index;
+
+
+      var _table_cont = contentTable.querySelector('.u-table-scroll table tbody').getElementsByTagName("tr")[index],
+          _table_trs = _table_cont.getBoundingClientRect(),
+          _table_fixed_left_trs = contentTable.querySelector('.u-table-fixed-left table tbody').getElementsByTagName("tr")[index].getBoundingClientRect(),
+          _table_fixed_right_trs = contentTable.querySelector('.u-table-fixed-right table tbody').getElementsByTagName("tr")[index].getBoundingClientRect();
+
+      var div = document.createElement("div");
+      var style = "wdith:" + (_table_trs.width + _table_fixed_left_trs.width + _table_fixed_right_trs.width) + "px";
+      style += "height:" + _table_trs.height + "px";
+      style += "classname:" + _table_cont.className;
+      div.setAttribute("style", style);
+      return div;
    };

    _this.synchronizeTableTr = function (currentIndex, type) {
@ -274,6 +301,12 @@ var TableRow = function (_Component) {
   */


+  /**
+   *同步当前拖拽到阴影
+   * @memberof TableRow
+   */
+
+
  /**
   * 同步自己,也需要同步当前行的行显示
   */
--- a/build/lib/sum.js
+++ b/build/lib/sum.js
@ -106,9 +106,9 @@ function sum(Table) {
      return _this;
    }

-    /**
-     * 获取当前的表格类型。
-     * 
+    /**
+     * 获取当前的表格类型。
+     * 
     */


--- a/build/lib/util.js
+++ b/build/lib/util.js
@ -1,7 +1,7 @@
 'use strict';

 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });

 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@ -9,71 +9,71 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 exports.sortBy = sortBy;
 exports.compare = compare;
 exports.ObjectAssign = ObjectAssign;
-/*
-* 快速排序，按某个属性，或按“获取排序依据的函数”，来排序.
-* @method soryBy
-* @static
-* @param {array} arr 待处理数组
-* @param {string|function} prop 排序依据属性，获取
-* @param {boolean} desc 降序
-* @return {array} 返回排序后的新数组
+/*
+* 快速排序，按某个属性，或按“获取排序依据的函数”，来排序.
+* @method soryBy
+* @static
+* @param {array} arr 待处理数组
+* @param {string|function} prop 排序依据属性，获取
+* @param {boolean} desc 降序
+* @return {array} 返回排序后的新数组
 */

 function sortBy(arr, prop, desc) {
-  var props = [],
-      ret = [],
-      i = 0,
-      len = arr.length;
-  if (typeof prop == 'string') {
-    for (; i < len; i++) {
-      var oI = arr[i];
-      (props[i] = new String(oI && oI[prop] || ''))._obj = oI;
+    var props = [],
+        ret = [],
+        i = 0,
+        len = arr.length;
+    if (typeof prop == 'string') {
+        for (; i < len; i++) {
+            var oI = arr[i];
+            (props[i] = new String(oI && oI[prop] || ''))._obj = oI;
+        }
+    } else if (typeof prop == 'function') {
+        for (; i < len; i++) {
+            var _oI = arr[i];
+            (props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
+        }
+    } else {
+        throw '参数类型错误';
    }
-  } else if (typeof prop == 'function') {
-    for (; i < len; i++) {
-      var _oI = arr[i];
-      (props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
+    props.sort();
+    for (i = 0; i < len; i++) {
+        ret[i] = props[i]._obj;
    }
-  } else {
-    throw '参数类型错误';
-  }
-  props.sort();
-  for (i = 0; i < len; i++) {
-    ret[i] = props[i]._obj;
-  }
-  if (desc) ret.reverse();
-  return ret;
+    if (desc) ret.reverse();
+    return ret;
 };

-/**
- * 数组对象排序
- * console.log(arr.sort(compare('age')))
- * @param {} property 
+/**
+ * 数组对象排序
+ * console.log(arr.sort(compare('age')))
+ * @param {} property 
 */
 function compare(property) {
-  return function (a, b) {
-    var value1 = a[property];
-    var value2 = b[property];
-    return value1 - value2;
-  };
+    return function (a, b) {
+        var value1 = a[property];
+        var value2 = b[property];
+        return value1 - value2;
+    };
 }

-/**
- * 简单数组数据对象拷贝
- * @param {*} obj 要拷贝的对象 
+/**
+ * 简单数组数据对象拷贝
+ * @param {*} obj 要拷贝的对象 
 */
 function ObjectAssign(obj) {
-  var b = obj instanceof Array;
-  var tagObj = b ? [] : {};
-  if (b) {
-    //数组
-    obj.forEach(function (da) {
-      var _da = {};
-      _extends(_da, da);
-      tagObj.push(_da);
-    });
-  } else {
-    _extends(tagObj, obj);
-  }
-  return tagObj;
+    var b = obj instanceof Array;
+    var tagObj = b ? [] : {};
+    if (b) {
+        //数组
+        obj.forEach(function (da) {
+            var _da = {};
+            _extends(_da, da);
+            tagObj.push(_da);
+        });
+    } else {
+        _extends(tagObj, obj);
+    }
+    return tagObj;
 }
--- a/build/render/CheckboxRender.js
+++ b/build/render/CheckboxRender.js
@ -19,11 +19,11 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen

 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }

-/**
- * 渲染checkbox
- * @param Checkbox
- * @param Icon
- * @returns {CheckboxRender}
+/**
+ * 渲染checkbox
+ * @param Checkbox
+ * @param Icon
+ * @returns {CheckboxRender}
 */
 function renderCheckbox(Checkbox, Icon) {
    return function (_Component) {
--- a/build/render/InputRender.js
+++ b/build/render/InputRender.js
@ -28,12 +28,12 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen

 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }

-/**
- * 渲染输入框
- * @param Form
- * @param Input
- * @param Icon
- * @returns {InputRender}
+/**
+ * 渲染输入框
+ * @param Form
+ * @param Input
+ * @param Icon
+ * @returns {InputRender}
 */
 function renderInput(Form, Input, Icon) {
    var _class, _temp2;
--- a/build/render/SelectRender.js
+++ b/build/render/SelectRender.js
@ -26,11 +26,11 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen

 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }

-/**
- * 渲染下拉框
- * @param Select
- * @param Icon
- * @returns {SelectRender}
+/**
+ * 渲染下拉框
+ * @param Select
+ * @param Icon
+ * @returns {SelectRender}
 */
 function renderSelect(Select, Icon) {
    var _class, _temp2;
--- a/demo/demolist/Demo1201.js
+++ b/demo/demolist/Demo1201.js
@ -2,7 +2,7 @@
 *
 * @title 拖拽改变行顺序
 * @parent 行操作-拖拽
-* @description 拖拽改变行顺序
+* @description `rowDraggAble`参数设置是否使用行交换顺序功能
 * Demo1201
 */

@ -38,7 +38,13 @@ const columns = [
 const data = [
  { a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1001" },
  { a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", e: "T1", key: "1002" },
-  { a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", e: "T2", key: "1003" }
+  { a: "ASVAL_201903120001", b: "小红", c: "女", d: "财务四科", e: "T3", key: "1003" },
+  { a: "ASVAL_201903120002", b: "小姚", c: "女", d: "财务一科", e: "T2", key: "1004" },
+  { a: "ASVAL_201903120003", b: "小岳", c: "男", d: "财务五科", e: "T2", key: "1005" },
+  { a: "ASVAL_201903120004", b: "小王", c: "男", d: "财务一科", e: "T5", key: "1006" },
+  { a: "ASVAL_201903120005", b: "小绍", c: "男", d: "财务七科", e: "T2", key: "1007" },
+  { a: "ASVAL_201903120006", b: "小郭", c: "男", d: "财务一科", e: "T3", key: "1008" },
+  { a: "ASVAL_201903120007", b: "小杨", c: "女", d: "财务四科", e: "T2", key: "1009" }
 ];

 class Demo1201 extends Component {
--- a/demo/demolist/Demo1304.js
+++ b/demo/demolist/Demo1304.js
@ -24,7 +24,7 @@ class Demo1304 extends Component {
      this.state = {
        data: data,
        selectedRowIndex: 0,
-        selectedValue:"ASVAL_201903200004"
+        selectedValue:"ASVAL_201903280005"
      }
  }

--- a/demo/index.js
+++ b/demo/index.js
--- a/dist/demo.css
+++ b/dist/demo.css
@ -312,7 +312,7 @@
  .u-table-filter-column-pop-cont {
    margin: 0px;
    max-height: 300px;
-    overflow-y: scroll;
+    overflow-y: auto;
    color: #212121; }
  .u-table-filter-column-clear-setting {
    cursor: pointer;
@ -386,6 +386,11 @@
    display: none; }
  .u-table ::-webkit-scrollbar-track-piece {
    display: none; }
+  .u-table .row-dragg-able {
+    cursor: move; }
+  .u-table .u-table-drag-hidden-cont {
+    width: 100px;
+    height: 40px; }

 .u-table:focus {
  outline: none;
--- a/dist/demo.css.map
+++ b/dist/demo.css.map
--- a/dist/demo.js
+++ b/dist/demo.js
--- a/dist/demo.js.map
+++ b/dist/demo.js.map
--- a/docs/api.md
+++ b/docs/api.md
@ -1,11 +1,13 @@
 # 表格 Table

 ## 何时使用
+
 - 当有大量结构化的数据需要展现时；
 - Table组件拥有多种可自由组合使用的功能，包括：大数据渲染、拖拽列、过滤列、排序、多选、分页、自定义操作、合计、搜索等复杂行为；
- 当需要复杂表格展示数据的时候，推荐使用开箱即用的[Grid组件](https://design.yonyoucloud.com/tinper-acs/ac-complex-grid)。
+- 当需要复杂表格展示数据的时候，推荐使用开箱即用的[Grid组件](https://design.yonyoucloud.com/tinper-acs/bee-complex-grid)。

 ## 如何使用
+
 ```
 import { Table } from 'tinper-bee';

@ -108,11 +110,10 @@ import 'bee-table/build/Table.css';
 | textAlign | 内容对齐方式，默认是左对齐（'left、right、center'） | string |


-## mixin
+### 高阶函数

 Table拓展功能方法。注：拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然在操作state会导致功能出现异常

-### 如何引用
 需要单独的去引用相应的js文件，目录在lib文件夹，示例如下：

 ```js
@ -120,31 +121,22 @@ import multiSelect from "tinper-bee/lib/multiSelect.js";
 ```

 ### multiSelect 多选功能
-#### multiSelect 新增API
+
+#### multiSelect:API
+
+Data 数组参数：

 | 参数                  | 说明                         | 类型       | 默认值      |
 | ------------------- | -------------------------- | -------- | -------- |
 | _checked         | 设置是否选中当前数据（设置在data数组中）           |  boolean      | true/false       |
 | _disabled   | 设置是否禁用当前数据（设置在data数组中）     |  boolean      | true/false     
+
+Table 组件参数：
+| 参数                  | 说明                         | 类型       | 默认值      |
+| ------------------- | -------------------------- | -------- | -------- |   
 | getSelectedDataFunc | 返回当前选中的数据数组（设置在Table组件上）                | Function | 无        |

-<font color="#ccc">
-
-#### <font color="#ccc">multiSelect 废弃部分的API</font>
-
-| 参数                  | 说明                         | 类型       | 默认值      |
-| ------------------- | -------------------------- | -------- | -------- |
-| multiSelect         | 全选功能的配置对象，属性参见下面           | obj      | {}       |
-| multiSelect.type    | 全选功能的类型，多选或单选（暂时只支持多选）     | string   | checkbox |
-| multiSelect.param   | 通过设置该参数来设计获取的数据数组，默认返还所有数据 | string   | ''       |
-| getSelectedDataFunc | 返回当前选中的数据数组                | Function | 无        |
-| selectDisabled | 设置某一行数据无法被选中，使用类似于rowClassName       | Function(record, index):bool | 无        |
-| selectedRow | 设置某一行数据是否被选中，使用类似于rowClassName       | Function(record, index):bool | 无        |
-
-</font>
-
-
-#### 使用
+#### multiSelect:使用

 ```js
 import multiSelect from "tinper-bee/lib/multiSelect.js";
@ -156,14 +148,16 @@ const MultiSelectTable = multiSelect(Table, Checkbox);

 ### sort 排序功能

-#### columns新增参数
+#### sort:API
+
+column 数组参数：

 | 参数     | 说明         | 类型       | 默认值  |
 | ------ | ---------- | -------- | ---- |
 | sorter | 排序函数，可以自定义 | Function | 无    |
 | sorterClick | 排序钩子函数| Function | (coloum,type)    |

-#### 使用
+#### sort:使用

 ```js
 import sort from "tinper-bee/lib/sort.js";
@ -175,13 +169,15 @@ const SortTable = sort(Table, Icon);

 ### sum 合计功能

-#### columns新增参数
+#### sum:API
+
+column 数组参数：
 
 | 参数     | 说明         | 类型       | 默认值  |
 | ------ | ---------- | -------- | ---- |
 | sumCol | 该列设置为合计列，合计行中会显示合计数据 | boolean | false |

-#### 使用
+#### sum:使用

 ```js
 import sum from "tinper-bee/lib/sum.js";
@ -193,7 +189,9 @@ const SumTable = sum(Table);

 ### dragColumn 拖拽列功能

-#### dragColumn新增参数
+#### dragColumn:API
+
+Table 组件参数：

 | 参数     | 说明         | 类型       | 默认值  |
 | ------ | ---------- | -------- | ---- |
@ -202,8 +200,7 @@ const SumTable = sum(Table);
 | onDrop | 拖拽释放回调函数(交换列) | function | () => {} |
 | onDropBorder | 拖拽释放回调函数(调整列宽) | function | (e) => {} |

-
-#### 使用
+#### dragColumn:使用

 ```js
 import dragColumn from "tinper-bee/lib/dragColumn.js";
@ -215,11 +212,11 @@ const DragColumnTable = dragColumn(Table);

 ### filterColumn 过滤功能

-#### filterColumn新增参数
+#### filterColumn:API

 无

-#### 使用
+#### filterColumn:使用

 ```js
 import filterColumn from "tinper-bee/lib/filterColumn.js";
@ -229,12 +226,10 @@ const DragColumnTable = filterColumn(Table, Checkbox, Popover, Icon);

 ```

+### rendertype

-
-## rendertype
 在表格中提供了多种rendertype可以供选择，比如下拉框，输入框，日期等

-### 如何引用
 需要单独的去引用相应的js文件，目录在render文件夹，示例如下：

 ```js
@ -243,13 +238,16 @@ import renderInput from "tinper-bee/lib/InputRender.js";
 ```

 ### InputRender
+
 输入框类型render

-#### 依赖的组件
+#### InputRender:依赖的组件
+
 该render依赖于`Icon`,`FormControl`,`Form`,`Tooltip`。


-#### 配置
+#### InputRender:配置
+
 | 参数                | 说明                                       | 类型         | 默认值    |
 | ----------------- | ---------------------------------------- | ---------- | ------ |
 | name              | 该输入框获取数据时的key值，该值不能设置重复且必填               | string     | -      |
@ -267,7 +265,7 @@ import renderInput from "tinper-bee/lib/InputRender.js";
 | htmlType          | 数值类型，目前支持 email/tel/IDCard/chinese/password'类型 | string     | -      |
 | reg               | 校验正则，注：设置 htmlType 后 reg 无效              | regExp     | -      |

-#### 使用
+#### InputRender:使用

 ```js
 import renderInput from "tinper-bee/lib/InputRender.js";
@ -277,13 +275,16 @@ const InputRender = renderInput(Form, FormControl, Icon);
 ```

 ### DateRender
+
 日期类型render

-#### 依赖的组件
+#### DateRender:依赖的组件
+
 该render依赖于`moment`, `Datepicker`, `Icon`


-#### 配置
+#### DateRender:配置
+
 | 参数                | 说明                                       | 类型         | 默认值    |
 | ----------------- | ---------------------------------------- | ---------- | ------ |
 | isclickTrigger    | 是否使用点击触发编辑状态                             | boolean    | false |
@ -292,7 +293,7 @@ const InputRender = renderInput(Form, FormControl, Icon);

 注:其他参数参见Datepicker组件参数配置

-#### 使用
+#### DateRender:使用

 ```js
 import renderDate from "tinper-bee/lib/DateRender.js";
@ -304,23 +305,24 @@ const DateRender = renderDate(Datepicker, Icon);


 ### SelectRender
+
 下拉框类型render

-#### 依赖的组件
+#### SelectRender:依赖的组件
 该render依赖于`Icon`,`Select`


-#### 配置
+#### SelectRender:配置
+
 | 参数             | 说明                                       | 类型      | 默认值   |
 | -------------- | ---------------------------------------- | ------- | ----- |
 | isclickTrigger | 是否使用点击触发编辑状态                             | boolean | false |
 | dataSource     | 数据的键值对，在表格浏览态的时候能显示真实的key值。比如`[{key:"张三",value:"01"}]` | array   | -     |


-
 注:其他参数参见Select组件参数配置

-#### 使用
+#### SelectRender:使用

 ```js
 import renderSelect from "tinper-bee/lib/SelectRender.js";
@ -330,13 +332,16 @@ const SelectRender = renderSelect(Select, Icon);
 ```

 ### CheckboxRender
+
 复选框类型render

-#### 依赖的组件
+#### CheckboxRender:依赖的组件
+
 该render依赖于`Icon`,`Checkbox`


-#### 配置
+#### CheckboxRender:配置
+
 | 参数             | 说明                                       | 类型      | 默认值   |
 | -------------- | ---------------------------------------- | ------- | ----- |
 | onChange | 修改后触发回调函数 | function | () => {} |
@ -346,7 +351,7 @@ const SelectRender = renderSelect(Select, Icon);

 注:其他参数参见Checkbox组件参数配置

-#### 使用
+#### CheckboxRender:使用

 ```js
 import renderCheckbox from "tinper-bee/lib/CheckboxRender.js";
@ -355,7 +360,7 @@ const CheckboxRender = renderCheckbox(Checkbox, Icon);

 ```

-## 快捷键API
+### 快捷键API

 | 快捷键  | 快捷键说明 | 类型 | 默认值 | 
 | --- | :--- | --- |--- |
--- a/docs/menu.json
+++ b/docs/menu.json
@ -0,0 +1,128 @@
+{
+    "何时使用": {},
+    "如何使用": {},
+    "能力特性": {
+        "基础 Basic": {
+            "基本表格": "",
+            "默认无数据展示": "",
+            "固定表头": "",
+            "隔行换色": "",
+            "表格 Loading 加载": "",
+            "单元格内容居中": "",
+            "带边框": ""
+        },
+        "滚动 Scroll View": {
+            "横向滚动条": "",
+            "纵向滚动条": ""
+        },
+        "数据操作 Data Opetation": {
+            "渲染本地数据": "",
+            "渲染远程数据": ""
+        },
+        "列渲染 Custom Render": {
+            "多列表头": "",
+            "数据关联": "",
+            "列合计（总计）": ""
+        },
+        "编辑 Editor": {
+            "行编辑 - 行内编辑": "",
+            "单元格编辑": "",
+            "行编辑 - 弹框编辑": ""
+        },
+        "列操作-锁定 Fixed": {
+            "左侧固定列": "",
+            "右侧固定列": "",
+            "动态设置列锁定、解除锁定": ""
+        },
+        "列操作-过滤 Filter": {
+            "按条件、值过滤": "",
+            "复杂表格中行过滤": ""
+        },
+        "列操作-隐藏 Hide": {
+            "列过滤面板": ""
+        },
+        "列操作-排序 Sort": {
+            "列排序": "",
+            "后端列排序": "",
+            "多列排序": ""
+        },
+        "列操作-拖拽 Drag": {
+            "拖拽改变列顺序": "",
+            "拖拽改变列宽度": ""
+        },
+        "扩展行 Expanded Row": {
+            "嵌套子表格": "",
+            "树型表格数据展示": "",
+            "自定义表格标题、表尾、选中行颜色": "",
+            "紧凑型、宽松型": "",
+            "自定义行高": "",
+            "图片在表格中的展示": "",
+            "自定义行、列合并": ""
+        },
+        "行操作-拖拽": {
+            "拖拽改变行顺序": ""
+        },
+        "行操作-选择": {
+            "多选功能": "",
+            "单选功能": ""
+        },
+        "无限滚动 Infinite-scroll": {
+            "万行以上数据渲染": "",
+            "嵌套子表格滚动加载": "",
+            "多功能表格滚动加载": "",
+            "层级树大数据场景": ""
+        },
+        "分页 Pagination": {
+            "表格+分页": ""
+        }
+    },
+    "API": {
+        "Table": "",
+        "Column": "",
+        "高阶函数": "",
+        "multiSelect 多选功能": {
+            "multiSelect:API":"",
+            "multiSelect:使用":""
+        },
+        "sort 排序功能": {
+            "sort:API":"",
+            "sort:使用":""
+        },
+        "sum 合计功能": {
+            "sum:API":"",
+            "sum:使用":""
+        },
+        "dragColumn 拖拽列功能": {
+            "dragColumn:API":"",
+            "dragColumn:使用":""
+        },
+        "filterColumn 过滤功能": {
+            "filterColumn:API":"",
+            "filterColumn:使用":""
+        },
+        "rendertype":"",
+        "InputRender": {
+            "InputRender:依赖的组件":"",
+            "InputRender:配置":"",
+            "InputRender:使用":""
+        },
+        "DateRender": {
+            "DateRender:依赖的组件":"",
+            "DateRender:配置":"",
+            "DateRender:使用":""
+        },
+        "SelectRender": {
+            "SelectRender:依赖的组件":"",
+            "SelectRender:配置":"",
+            "SelectRender:使用":""
+        },
+        "CheckboxRender": {
+            "CheckboxRender:依赖的组件":"",
+            "CheckboxRender:配置":"",
+            "CheckboxRender:使用":""
+        },
+        "快捷键API":""
+    },
+    "注意事项": {},
+    "更新日志": {}
+}
--- a/package.json
+++ b/package.json
@ -1,96 +1,96 @@
 {
-  "name": "bee-table",
-  "version": "2.0.15",
-  "description": "Table ui component for react",
-  "keywords": [
-    "react",
-    "react-component",
-    "bee-table",
-    "iuap-design",
-    "tinper-bee",
-    "Table"
+ "name": "bee-table",
+ "version": "2.0.16",
+ "description": "Table ui component for react",
+ "keywords": [
+  "react",
+  "react-component",
+  "bee-table",
+  "iuap-design",
+  "tinper-bee",
+  "Table"
+ ],
+ "engines": {
+  "node": ">=6.0.0"
+ },
+ "jest": {
+  "moduleFileExtensions": [
+   "js",
+   "jsx"
  ],
-  "engines": {
-    "node": ">=6.0.0"
-  },
-  "jest": {
-    "moduleFileExtensions": [
-      "js",
-      "jsx"
-    ],
-    "transform": {
-      "^.+\\.js$": "babel-jest"
-    }
-  },
-  "homepage": "https://github.com/tinper-bee/bee-table.git",
-  "author": "Yonyou FED",
-  "repository": "http://github.com/tinper-bee/bee-table",
-  "bugs": "https://github.com/tinper-bee/bee-table.git/issues",
-  "license": "MIT",
-  "main": "./build/index.js",
-  "config": {
-    "port": 3000,
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
-  },
-  "scripts": {
-    "dev": "bee-tools run start",
-    "build": "bee-tools run build",
-    "lint": "bee-tools run lint",
-    "test": "jest",
-    "chrome": "bee-tools run chrome",
-    "coveralls": "jest",
-    "browsers": "bee-tools run browsers",
-    "pub": "bee-tools run pub",
-    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
-  },
-  "dependencies": {
-    "bee-button": "latest",
-    "bee-checkbox": "latest",
-    "bee-datepicker": "^2.0.28",
-    "bee-dropdown": "^2.0.4",
-    "bee-form-control": "latest",
-    "bee-icon": "latest",
-    "bee-input-number": "^2.0.7",
-    "bee-loading": "^1.0.9",
-    "bee-locale": "0.0.13",
-    "bee-menus": "^2.0.6",
-    "bee-radio": "^2.0.8",
-    "bee-select": "^2.0.11",
-    "classnames": "^2.2.5",
-    "component-classes": "^1.2.6",
-    "lodash.clonedeep": "^4.5.0",
-    "object-path": "^0.11.3",
-    "ref-tree": "^2.0.1-beta.1",
-    "shallowequal": "^1.0.2",
-    "throttle-debounce": "^2.0.1",
-    "tinper-bee-core": "latest",
-    "warning": "^3.0.0"
-  },
-  "peerDependencies": {
-    "react": "^15.3.0 || ^16.0",
-    "react-dom": "^15.3.0 || ^16.0",
-    "prop-types": "^15.6.0"
-  },
-  "devDependencies": {
-    "babel-jest": "^22.0.4",
-    "bee-clipboard": "^2.0.0",
-    "bee-drawer": "0.0.2",
-    "bee-layout": "latest",
-    "bee-pagination": "^2.0.5",
-    "bee-panel": "latest",
-    "bee-popover": "^2.0.0",
-    "chai": "^3.5.0",
-    "console-polyfill": "~0.2.1",
-    "cz-conventional-changelog": "^2.1.0",
-    "enzyme": "^2.9.1",
-    "es5-shim": "~4.1.10",
-    "jest": "^22.0.4",
-    "react": "^16.6.3",
-    "react-addons-test-utils": "^15.5.0",
-    "react-dom": "^16.6.3",
-    "reqwest": "^2.0.5",
-    "tinper-bee": "latest"
+  "transform": {
+   "^.+\\.js$": "babel-jest"
  }
-}
+ },
+ "homepage": "https://github.com/tinper-bee/bee-table.git",
+ "author": "Yonyou FED",
+ "repository": "http://github.com/tinper-bee/bee-table",
+ "bugs": "https://github.com/tinper-bee/bee-table.git/issues",
+ "license": "MIT",
+ "main": "./build/index.js",
+ "config": {
+  "port": 3000,
+  "commitizen": {
+   "path": "./node_modules/cz-conventional-changelog"
+  }
+ },
+ "scripts": {
+  "dev": "bee-tools run start",
+  "build": "bee-tools run build",
+  "lint": "bee-tools run lint",
+  "test": "jest",
+  "chrome": "bee-tools run chrome",
+  "coveralls": "jest",
+  "browsers": "bee-tools run browsers",
+  "pub": "bee-tools run pub",
+  "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
+ },
+ "dependencies": {
+  "bee-button": "latest",
+  "bee-checkbox": "latest",
+  "bee-datepicker": "^2.0.28",
+  "bee-dropdown": "^2.0.4",
+  "bee-form-control": "latest",
+  "bee-icon": "latest",
+  "bee-input-number": "^2.0.7",
+  "bee-loading": "^1.0.9",
+  "bee-locale": "0.0.13",
+  "bee-menus": "^2.0.6",
+  "bee-radio": "^2.0.8",
+  "bee-select": "^2.0.11",
+  "classnames": "^2.2.5",
+  "component-classes": "^1.2.6",
+  "lodash.clonedeep": "^4.5.0",
+  "object-path": "^0.11.3",
+  "ref-tree": "^2.0.1-beta.1",
+  "shallowequal": "^1.0.2",
+  "throttle-debounce": "^2.0.1",
+  "tinper-bee-core": "latest",
+  "warning": "^3.0.0"
+ },
+ "peerDependencies": {
+  "react": "^15.3.0 || ^16.0",
+  "react-dom": "^15.3.0 || ^16.0",
+  "prop-types": "^15.6.0"
+ },
+ "devDependencies": {
+  "babel-jest": "^22.0.4",
+  "bee-clipboard": "^2.0.0",
+  "bee-drawer": "0.0.2",
+  "bee-layout": "latest",
+  "bee-pagination": "^2.0.5",
+  "bee-panel": "latest",
+  "bee-popover": "^2.0.0",
+  "chai": "^3.5.0",
+  "console-polyfill": "~0.2.1",
+  "cz-conventional-changelog": "^2.1.0",
+  "enzyme": "^2.9.1",
+  "es5-shim": "~4.1.10",
+  "jest": "^22.0.4",
+  "react": "^16.6.3",
+  "react-addons-test-utils": "^15.5.0",
+  "react-dom": "^16.6.3",
+  "reqwest": "^2.0.5",
+  "tinper-bee": "latest"
+ }
+}
--- a/src/Table.js
+++ b/src/Table.js
@ -146,9 +146,11 @@ class Table extends Component {
    this.handleRowHover = this.handleRowHover.bind(this);
    this.computeTableWidth = this.computeTableWidth.bind(this);
    this.onBodyMouseLeave = this.onBodyMouseLeave.bind(this);
+    this.tableUid = null;
  }

  componentDidMount() {
+    this.getTableUID();
    EventUtil.addHandler(this.contentTable,'keydown',this.onKeyDown);
    EventUtil.addHandler(this.contentTable,'focus',this.onFocus);
    setTimeout(this.resetScrollX, 300);
@ -244,6 +246,17 @@ class Table extends Component {
      renderFlag: !renderFlag
    });
  }
+
+  getTableUID =()=>{
+    let uid = "_table_uid_"+new Date().getTime();
+    this.tableUid = uid;
+    let div = document.createElement("div");
+    // div.className = "u-table-drag-hidden-cont";
+    div.className = "u-table-drag-hidden-cont";
+    div.id = uid;
+    this.contentTable.appendChild(div);
+  }
+
  computeTableWidth() {
    
    //如果用户传了scroll.x按用户传的为主
@ -531,15 +544,23 @@ class Table extends Component {
    );
  }

-  onDragRow = (currentIndex,targetIndex)=>{
-    let {data} = this.state,
-    currentObj = data[currentIndex],
-    targetObj = data[targetIndex];
-    console.log(currentIndex+" ----------onRowDragEnd-------- "+targetIndex);
-    data.splice(targetIndex, 0, data.splice(currentIndex, 1).shift());
-    console.log(" _data---- ",data);
+  onDragRow = (currentKey,targetKey)=>{
+    let {data} = this.state,currentIndex,targetIndex;
+    data.forEach((da,i)=>{ 
+      if(da.key == currentKey){
+        currentIndex = i;
+      }
+      if(da.key == targetKey){
+        targetIndex = i;
+      }
+    });
+    if(currentIndex < targetIndex){
+      data.splice(targetIndex, 0, data.splice(currentIndex, 1).shift());
+    }else{
+      data.splice((targetIndex+1), 0, data.splice(currentIndex, 1).shift());
+    }
    this.setState({
-      data: data,
+      data,
    });
  }

@ -645,7 +666,7 @@ class Table extends Component {
          indent={indent}
          indentSize={props.indentSize}
          needIndentSpaced={needIndentSpaced}
-          className={className}
+          className={`${className} ${this.props.rowDraggAble?' row-dragg-able ':''}`}
          record={record}
          expandIconAsCell={expandIconAsCell}
          onDestroy={this.onRowDestroy}
@ -680,6 +701,7 @@ class Table extends Component {
          rowDraggAble={this.props.rowDraggAble}
          onDragRow={this.onDragRow}
          contentTable={this.contentTable}
+          tableUid = {this.tableUid}
        />
      );
      this.treeRowIndex++;
--- a/src/Table.scss
+++ b/src/Table.scss
@ -532,7 +532,7 @@ $icon-color:#505F79;
    &-pop-cont{
      margin: 0px;
      max-height: 300px;
-      overflow-y: scroll;
+      overflow-y: auto;
      color:#212121;
    }
    &-clear-setting{ 
@ -647,7 +647,17 @@ $icon-color:#505F79;
  ::-webkit-scrollbar-track-piece {
    display: none;
  }
+
+  .row-dragg-able{
+    cursor:move;
+  }
+  .u-table-drag-hidden-cont{
+    width: 100px;
+    height: 40px;
+  }
+
 }
+
 .u-table:focus{
  outline: none;
  // border-color: #9ecaed;
--- a/src/TableRow.js
+++ b/src/TableRow.js
@ -133,6 +133,11 @@ class TableRow extends Component{
    target = Event.getTarget(event);
     this.currentIndex = target.getAttribute("data-row-key");
     this._dragCurrent = target;
+ 
+    //TODO 自定义图像后续需要增加。
+    //  let crt = this.synchronizeTableTrShadow(); 
+    //  document.getElementById(this.props.tableUid).appendChild(crt);
+    // event.dataTransfer.setDragImage(crt, 0, 0);
     event.dataTransfer.effectAllowed = "move";
     event.dataTransfer.setData("Text", this.currentIndex);
  }
@ -150,17 +155,42 @@ class TableRow extends Component{
    let {rowDraggAble,onDragRow} = this.props;
    let event = Event.getEvent(e) ,
    _target = Event.getTarget(event),target = _target.parentNode;
-    let currentIndex = target.getAttribute("data-row-key");
-    if(!currentIndex || currentIndex === this.currentIndex)return;    
+    
+    let currentKey = event.dataTransfer.getData("text");
+    let targetKey = target.getAttribute("data-row-key");
+
+    if(!targetKey || targetKey === currentKey)return;    
    if(target.nodeName.toUpperCase() === "TR"){
-      this.synchronizeTableTr(this.currentIndex,null);
+      this.synchronizeTableTr(currentKey,null);
+      this.synchronizeTableTr(targetKey,null);
      // target.setAttribute("style","");
      // this.synchronizeTrStyle(this.currentIndex,false);
    }
-    let _currentIndex = event.dataTransfer.getData("text");
-    onDragRow && onDragRow(parseInt(this.currentIndex--),parseInt(currentIndex--));
+    onDragRow && onDragRow(currentKey,targetKey);
  };

+
+  /**
+   *同步当前拖拽到阴影
+   * @memberof TableRow
+   */
+  synchronizeTableTrShadow = ()=>{
+    let {contentTable,index} = this.props; 
+
+    let _table_cont = contentTable.querySelector('.u-table-scroll table tbody').getElementsByTagName("tr")[index],
+    _table_trs = _table_cont.getBoundingClientRect(),
+     _table_fixed_left_trs = contentTable.querySelector('.u-table-fixed-left table tbody').getElementsByTagName("tr")[index].getBoundingClientRect(),
+    _table_fixed_right_trs = contentTable.querySelector('.u-table-fixed-right table tbody').getElementsByTagName("tr")[index].getBoundingClientRect();
+
+    let div = document.createElement("div");
+    let style = "wdith:"+(_table_trs.width + _table_fixed_left_trs.width + _table_fixed_right_trs.width)+"px";
+    style += "height:"+ _table_trs.height+"px";
+    style += "classname:"+ _table_cont.className;
+    div.setAttribute("style",style);
+    return div;
+  }
+
+
  /**
   * 同步自己,也需要同步当前行的行显示
   */